前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover

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

作者头像
HHTjim 部落格
发布2022-09-26 11:26:56
2.5K0
发布2022-09-26 11:26:56
举报
文章被收录于专栏:HHTjim'S 部落格

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

作者:matrix 被围观: 1,771 次 发布时间:2013-09-20 分类:Wordpress 兼容并蓄 | 无评论 »

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

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

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

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

实际效果,文字说明:

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

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

js代码:

代码语言:javascript
复制
   <script>    //鼠标滑过图片闪烁  
    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);  

        </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毫秒的倒计时自行消失。

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

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 添加鼠标滑过图片闪烁的js特效-jquery-opacity-rollover
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档