onamae.com的25号免费域名没抢到,倒是看到onamae上的一个图片闪光特效好奇,这就扒了。
看头部的meta写的jquery-opacity-rollover.js文件,不知道这是个啥子插件上的东东。
作者:http://h2ham.seesaa.net
实际效果,文字说明:
当鼠标移到图片上的瞬间,图片被蒙上一层白色的半透明层,并且这时白色的半透明层开始以300(代码第5行)毫秒的倒计时自行消失。
js代码:
<script> //鼠标滑过图片闪烁
jQuery(document).ready(function(){
// over?
jQuery(".post img").wink(300);
});
/*=====================================================
meta: {
title: "jquery-opacity-rollover.js",
version: "2.1",
copy: "copyright 2009 h2ham ([email protected])",
license: "MIT License(http://www.opensource.org/licenses/mit-license.php)",
author: "THE HAM MEDIA - http://h2ham.seesaa.net/",
date: "2009-07-21"
modify: "2009-07-23"
}
=====================================================*/
(function($) {
$.fn.opOver = function(op,oa,durationp,durationa){
var c = {
op:op? op:1.0,
oa:oa? oa:0.6,
durationp:durationp? durationp:'fast',
durationa:durationa? durationa:'fast'
};
$(this).each(function(){
$(this).css({
opacity: c.op,
filter: "alpha(opacity="+c.op*100+")"
}).hover(function(){
$(this).fadeTo(c.durationp,c.oa);
},function(){
$(this).fadeTo(c.durationa,c.op);
})
});
},
$.fn.wink = function(durationp,op,oa){
var c = {
durationp:durationp? durationp:'slow',
op:op? op:1.0,
oa:oa? oa:0.2
};
$(this).each(function(){
$(this) .css({
opacity: c.op,
filter: "alpha(opacity="+c.op*100+")"
}).hover(function(){
$(this).css({
opacity: c.oa,
filter: "alpha(opacity="+c.oa*100+")"
});
$(this).fadeTo(c.durationp,c.op);
},function(){
$(this).css({
opacity: c.op,
filter: "alpha(opacity="+c.op*100+")"
});
})
});
}
})(jQuery);
</script>
使用步骤:
一.需要加载JQ库。1.7.2版本的可以,其他版本还须自测。
二.在header中加入上面的js代码。
js代码说明:
第5行中.post img指需要加载此js特效的元素。这里是class为post的 img标签加载特效,也就是文章内容的图片,鼠标移上去就会与闪烁的效果。
当然这里的.post img也可以改为css中的id或者其他的class和标签等都可以的。
第5行中还有wink(300),其中300指300毫秒,是单次闪烁的时间。也就是当鼠标移到图片上的瞬间,图片被蒙上一层白色的半透明层,并且白色的半透明层开始以300毫秒的倒计时自行消失。
至于其他的数字什么的我就搞不明白了。在此 笔记~