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

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

 13648  200  查看评论 (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>
相关插件-悬停,弹出层,图片展示

css鼠标悬停效果,自适应页面大小

网站常用功能展示,css鼠标悬停效果
  悬停
 14052  239

60种css3鼠标悬停效果

一款使用的效果,数遍悬停会出现相应图片的简介
  悬停
 51722  879

jQuery鼠标悬停图片分享按钮动画

这款jQuery插件可以实现鼠标滑过图片时在图片上方创建任意的元素,包括分享按钮和图片文字描述等。这些按钮和文字可以悬浮在图片的任意位置,同时你也可以自己定义这些图片上方的元素出现时的动画特效。
  悬停
 36549  474

js鼠标滑过方向感效果

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

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

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