图片/图形

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

创客主机

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

使用方法

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

也想出现在这里?联系我们
WordPress 主题
  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)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!