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

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

 36634  332  查看评论 (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方可; 

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

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

CSS 3D动画字体翻转模仿开门效果

CSS 3D动画字体翻转模仿开门效果 字体翻转模仿开门效果
  悬停
 31616  367

JQuery 鼠标悬停放射出炫幻效果

JQuery 鼠标悬停放射出炫幻效果 CSS 里面还带字体哦
  悬停
 30388  379

CSS3圆形图片鼠标经过旋转效果

CSS3圆形图片鼠标经过旋转效果,图片上有简短标题和说明,兼容主流浏览器
  悬停
 33613  424

12种CSS3 hover效果插件

非常好看实用的CSS3的hover效果, 用transition 、amination 制造好看及实用的交互体验
  悬停
 60543  488

讨论这个项目(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
        巴拉巴拉
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复