添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

作者:Matrix 被围观: 957 次 发布时间:2013-09-20 分类:wordpress建站 兼容并蓄 拷贝型 码字型 | 无评论 »

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

onamae.com

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

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

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

实际效果,文字说明:

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

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

js代码:

  1.     <script>    //鼠标滑过图片闪烁  
  2.     jQuery(document).ready(function(){  
  3.   
  4.     // over?  
  5.     jQuery(".post img").wink(300);  
  6.       
  7.       
  8. });  
  9.   
  10.   
  11. /*===================================================== 
  12. meta: { 
  13.   title: "jquery-opacity-rollover.js", 
  14.   version: "2.1", 
  15.   copy: "copyright 2009 h2ham (h2ham.mail@gmail.com)", 
  16.   license: "MIT License(http://www.opensource.org/licenses/mit-license.php)", 
  17.   author: "THE HAM MEDIA - http://h2ham.seesaa.net/", 
  18.   date: "2009-07-21" 
  19.   modify: "2009-07-23" 
  20. } 
  21. =====================================================*/  
  22. (function($) {  
  23.       
  24.     $.fn.opOver = function(op,oa,durationp,durationa){  
  25.           
  26.         var c = {  
  27.             op:op? op:1.0,  
  28.             oa:oa? oa:0.6,  
  29.             durationp:durationp? durationp:'fast',  
  30.             durationa:durationa? durationa:'fast'  
  31.         };  
  32.           
  33.   
  34.         $(this).each(function(){  
  35.             $(this).css({  
  36.                     opacity: c.op,  
  37.                     filter: "alpha(opacity="+c.op*100+")"  
  38.                 }).hover(function(){  
  39.                     $(this).fadeTo(c.durationp,c.oa);  
  40.                 },function(){  
  41.                     $(this).fadeTo(c.durationa,c.op);  
  42.                 })  
  43.         });  
  44.     },  
  45.       
  46.     $.fn.wink = function(durationp,op,oa){  
  47.   
  48.         var c = {  
  49.             durationp:durationp? durationp:'slow',  
  50.             op:op? op:1.0,  
  51.             oa:oa? oa:0.2  
  52.         };  
  53.           
  54.         $(this).each(function(){  
  55.             $(this) .css({  
  56.                     opacity: c.op,  
  57.                     filter: "alpha(opacity="+c.op*100+")"  
  58.                 }).hover(function(){  
  59.                 $(this).css({  
  60.                     opacity: c.oa,  
  61.                     filter: "alpha(opacity="+c.oa*100+")"  
  62.                 });  
  63.                 $(this).fadeTo(c.durationp,c.op);  
  64.             },function(){  
  65.                 $(this).css({  
  66.                     opacity: c.op,  
  67.                     filter: "alpha(opacity="+c.op*100+")"  
  68.                 });  
  69.             })  
  70.         });  
  71.     }  
  72.       
  73. })(jQuery);  
  74.   
  75.         </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毫秒的倒计时自行消失。

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

本文固定链接:http://www.hhtjim.com/add-the-mouse-slip-images-flashing-js-effects-jquery-opacity-rollover.html
Matrix
本文章由 Matrix 于2013年09月20日发布在wordpress建站, 兼容并蓄, 拷贝型, 码字型分类下,目前没有通告,你可以至底部留下评论。
转载请注明:添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover-HHTjim'S 部落格
关键字:, , , ,

添加新评论 »

 😛 Sad 忧伤 👿 Smile 笑脸 😳 😀 😯 😮 😕 😎 😆 😡 😈 Roll Eyes 转眼珠 😉 💡 😐 😥 Mr Green 绿脸先生

NOTICE: You should type some Chinese word (like “你好”) in your comment to pass the spam-check, thanks for your patience!