图片/图形

根据鼠标位置移动背景图片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

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

已有 532 人购买
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

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