jquery.backgroundMove.js 是一款根据鼠标位置移动背景图片 jquery 插件。该 jquery 插件么一根据鼠标的当前位置来移动元素的背景图片,兼容 ie8 浏览器。
在页面中引入 jquery 和 jquery.backgroundMove.js 文件。
<script type="text/javascript" src="path/to/js/jquery.min.js"></script>
<script type="text/javascript" src="path/to/js/jquery.backgroundMove.js"></script>
可以使用一个<div>元素作为容器。
<div class="box"></div>
为<div>元素设置宽度和高度,以及背景图片。
.box {
height: 400px;
max-width: 600px;
text-align: center;
line-height: 400px;
background-image: url(bg.jpg);
background-repeat: no-repeat;
}
在页面 DOM 元素加载完毕之后,可以通过下面的方法来初始化该 jquery 插件。
$('.box').backgroundMove();
或者在插件初始化时传入配置参数。
$('.box').backgroundMove({
movementStrength:'50'
});
Github 地址:https://github.com/supunsameera/jquery.backgroundMove.js
演示地址 | 下载地址 |
专业提供WordPress主题安装、深度汉化、加速优化等各类网站建设服务,详询在线客服!