shover.js 自动感应鼠标方向悬浮层进入特效插件-BFW插件库

shover.js 自动感应鼠标方向悬浮层进入特效插件

shover.js 它可以让你的展示图片感应鼠标进入方向，从而让悬浮层做出不同的运动效果，多个图片放在一起效果更酷炫噢！它的使用和设置都非常方便，更重要的是它能用在几乎所有的浏览器上啊！（至少IE5及以上吧）

第一步引入bfwone

第二步执行插件代码

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["sHover"], function() {
                var example1 = new sHover("example1", "intro1");
            });
        });
    </script>
    <style>
        .example1 {
            width: 300px;
            height: 300px;
            background: powderblue;
        }
        .intro1 {
            background: firebrick;
            line-height: 200px;
            color: white;
            text-align: center;
        }

    </style>
</head>
<body>
    <div class="example1">
        <span class="intro1">shover effect</span>
    </div>


</body>
</html>

配置参数

设置滑动速度 悬浮层滑入滑出的速度，默认值为5，取值范围0-10

example1.set({
    speed:7
});

设置透明度 设置悬浮层的最终透明度，默认值为100，取值范围0-100

example1.set({
   opacity:80
});

是否开启滑动时淡入淡出 默认值为false，可设为true

example1.set({	
   opacityChange:true
});

shover.js 自动感应鼠标方向悬浮层进入特效插件

网友评论0

jquery.sliphover.min.js

tilt.js

sHover.js

tippy.js

sticky-sidebar.js

stickybits.js

tooltip.js

tipso.min.js

html5tooltips.js

atropos.min.js