图片随鼠标滑动效果

发表于2020-05-05更新于2020-05-05

原生js实现图片随鼠标滑动效果：mouse-slide

演示demo地址：鼠标滑动效果演示

项目地址：鼠标滑动效果

快速开始

CSS样式

1
<link rel="stylesheet" type="text/css" href="https://jeffrey-0.github.io/mouse-slide/index.css">

HTML结构

1
2
3
4
<div class="item">
  <img src="img/1.jpg" alt="">
  <div class="">显示标题</div>
</div>

JS脚本

1
2
3
4
5
6
7
8
<!-- 引入mouse-slide插件 -->
<script type="text/javascript" src="https://jeffrey-0.github.io/mouse-slide/index.js"></script>
<!-- 使用slider插件 -->
<script type="text/javascript">
  mouseSlide('item', 500)
  // 参数1： className 要滑动的div的父级类名，默认为item
  // 参数2： animationDuration 滑动的时间/单位毫秒，默认为500
</script>

第二种：建议下载本项目鼠标滑动效果到本地，再引入，加快速度

兼容性

  • 兼容谷歌、火狐、IE9+等主流浏览器(IE9及以下只显示不滑动)