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

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

很简单的判断鼠标悬停位置控制图片左右移动 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方可; 

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

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

纯css3鼠标悬停hover按钮动画事件插件

css3 transition属性制作多种按钮悬停动画特效,css3悬停按钮、CSS3过渡效果、CSS3点击按钮过渡效果
  悬停
 4255  139

js鼠标滑过方向感效果

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

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

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

30种炫酷CSS鼠标滑过按钮特效

这是一组使用CSS3制作的炫酷鼠标滑过按钮动画特效。这30种鼠标滑过按钮的动画特效分别使用CSS3 transition和transform属性来制作按钮边框,文本动画以及流光动画效果,各种效果都非常有创意。
  悬停
 10037  164

讨论这个项目(1)回答他人问题或分享插件使用方法奖励jQ币

    .....clean 0
    2017/11/14 16:34:13
取消回复