很简单的判断鼠标悬停位置控制图片左右移动

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

 33700  331  查看评论 (4)
分享到微信朋友圈
X
很简单的判断鼠标悬停位置控制图片左右移动 ie兼容8

使用方法

引用

<link rel="stylesheet" href="css/bgMove.css">
<script src="js/bgMove.js"></script>

CSS

#move {
    background: url(images/bg1.jpg);
}
//就是设置背景图片

html

<div id="move">
        <div id="moveL"></div>
        <div id="moveR"></div>
</div>

初始化

<script>
        bgMove({
            jump : 15,  //移动速度,非必须可省略,默认为10
            bgImgurl : "images/bg1.jpg" //背景图片的位置,就是中html图片路径,必须不可省略
        })
</script>

注意

  • moveL,moveR是定位的,z-index为1,如果页面上有需点击的元素,则其z-index>1方可; 

  • 背景图片,宽度要大于屏幕宽度才能有效果;

相关插件-悬停,图片展示

canvas鼠标追随效果

canvas鼠标追随粒子放射效果
  悬停
 38724  433

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

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

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

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

c的鼠标滑过图片遮罩层动画jQuery插件

nsHover是一款简单实用的鼠标滑过图片遮罩层动画jQuery插件。该插件可以在图片或块级元素上制作鼠标滑过时的遮罩层动画效果,它可以设置遮罩层的前景色和背景色,可以制作圆形图片等,非常实用。
  悬停
 33422  382

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

    其实地球没有你 0
    2017/11/22 17:31:05

    henhaohenhao

        zhe0
        2018/3/1 9:17:47
        谢谢 怎么都没人留言 哈哈
    回复
    .....clean 0
    2017/11/14 16:34:13

    bucuobucuo

        Katrina0
        2019/3/20 11:19:49
        巴拉巴拉
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复