php鼠标经过变换图片,添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

作者：matrix

被围观: 1,582 次

发布时间：2013-09-20

无评论 »

💡NOTICE:这是一个创建于 2738 天前的主题，其中的信息可能已经有所发展或是发生改变。

onamae.com的25号免费域名没抢到，倒是看到onamae上的一个图片闪光特效好奇，这就扒了。

看头部的meta写的jquery-opacity-rollover.js文件，不知道这是个啥子插件上的东东。

作者：http://h2ham.seesaa.net

实际效果，文字说明：

假设图片被指定加载此js特效。

当鼠标移到图片上的瞬间，图片被蒙上一层白色的半透明层，并且这时白色的半透明层开始以300(代码第5行)毫秒的倒计时自行消失。

js代码：

jQuery(document).ready(function(){

// over?

jQuery(".post img").wink(300);

});

/*=====================================================

meta: {

title: "jquery-opacity-rollover.js",

version: "2.1",

copy: "copyright 2009 h2ham (h2ham.mail@gmail.com)",

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);

使用步骤：

一.需要加载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毫秒的倒计时自行消失。

至于其他的数字什么的我就搞不明白了。在此 笔记~