jQuery跟随鼠标移动弹出层jquery.followPopup.js(原创)

所属分类:UI,媒体-悬停,弹出层,图片展示

 14817  214  查看评论 (0)
分享到微信朋友圈
X
jQuery跟随鼠标移动弹出层jquery.followPopup.js(原创) ie兼容7

更新时间:2020-01-05 11:32:21

更新说明:插件改名为jquery.followPopup.js


更新时间:2019-08-12 15:00:30

mousefollow.js

默认参数:

html: '',                // 插入的html
speed: 200,              // 淡出速度
x: 20,                   // 距离鼠标的水平距离
y: 20,                   // 距离鼠标的垂直距离
zIndex: 999,             // 插入html的层级
onEnter: function(e) {}, // 鼠标进入回调
onMove: function(e) {},  // 鼠标移动回调
onOut: function(e) {}    // 鼠标移除回调

html:

<ul class="demo-1">
    <li data-imgurl="images/1.jpg"><a href="#"></a></li>
    <li data-imgurl="images/2.jpg"><a href="#"></a></li>
    <li data-imgurl="images/1.jpg"><a href="#"></a></li>
</ul>
<ul class="demo-2">
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
    <li><a href="#"></a></li>
</ul>

js:

<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.mousefollow.js"></script>
<script tpye="text/javascript">
    $(function() {
        $('.demo-1 li').mousefollow({
            html: '<img src="" alt="">',
            onEnter: function(e) {
                var url = $(this).data('imgurl');
                // 或者 var url = $(e.currentTarget).data('imgurl');
                $('.js-follow').find('img').attr('src', url);
            },
            onMove: function(e) {},
            onOut: function(e) {}
        });
        $('.demo-2 li').mousefollow({
            html: '<div class="hidden-box"><img src="images/2.jpg" alt=""><p>图片1</p></div>',
            speed: 0
        });
    });
</script>
相关插件-悬停,弹出层,图片展示

js鼠标滑过方向感效果

js鼠标滑过方向感知三维立方体动画
  悬停
 28051  458

响应式网站图标

悬停变换效果
  悬停
 31283  353

9种CSS3 blend模式制作的鼠标滑过图片标题特效

9种CSS3 blend模式制作的鼠标滑过图片标题特效
  悬停
 27636  421

JS超酷图片翻动展示效果

JS超酷图片翻动展示效果
  悬停
 33380  572

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复