图片/图形

根据鼠标位置移动背景图片jQuery插件

创客主机


jquery.backgroundMove.js是一款根据鼠标位置移动背景图片jquery插件。该jquery插件么一根据鼠标的当前位置来移动元素的背景图片,兼容ie8浏览器。

使用方法

在页面中引入jquery和jquery.backgroundMove.js文件。

  1. <script type="text/javascript" src="path/to/js/jquery.min.js"></script>
  2. <script type="text/javascript" src="path/to/js/jquery.backgroundMove.js"></script>

HTML结构

可以使用一个<div>元素作为容器。

  1. <div class="box"></div>

CSS样式

为<div>元素设置宽度和高度,以及背景图片。

  1. .box {
  2.   height: 400px;
  3.   max-width: 600px;
  4.   text-align: center;
  5.   line-height: 400px;
  6.   background-image: url(bg.jpg);
  7.   background-repeat: no-repeat;
  8. }

初始化插件

在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该jquery插件。

  1. $('.box').backgroundMove();

或者在插件初始化时传入配置参数。

  1. $('.box').backgroundMove({
  2.   movementStrength:'50'
  3. });

Github地址:https://github.com/supunsameera/jquery.backgroundMove.js

(0)

本文由 创客云 作者:创客云 发表,转载请注明来源!

阿里云

热评文章

发表评论

嘿,欢迎咨询!