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

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

 18464  227  查看评论 (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和Javript创建单个字母动画。
  悬停
 30096  349

jquery hover鼠标滑过图片半透明文字标题滑动显示隐藏

jquery hover鼠标滑过图片半透明文字标题滑动显示隐藏
  悬停
 45925  370

纯CSS3 可感知方向 3D盒子翻转动画(原创)

感应鼠标进入方向,向不同的方向翻转
  悬停
 24717  336

CSS3实现超酷的鼠标悬停效果

CSS3实现超酷的鼠标悬停效果
  悬停
 42666  592

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

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