【程序猿分享】优秀的js插件分享

来源：互联网发布：手机对话翻译软件编辑：程序博客网时间：2024/05/16 19:01

写在前面的废话

ios-parallax.js是一款模拟苹果iOS10样式背景图片视觉差效果的jquery插件。该背景图片视觉差效果在用户移动鼠标时，背景图片会相应的摇晃，形成视觉差特效。

使用方法

在页面中引入jquery和ios-parallax.js文件。

<script src='path/to/jquery.min.js'></script><script src='path/to/ios-parallax.js'></script>

HTML结构

使用一个

元素来作为背景图片的容器。

<div id="top-image">    <div id="content" class="container center-block">        <!--放置内容-->    </div></div>

CSS样式

#top-image {  background: linear-gradient(      rgba(0, 0, 0, 0.2),      rgba(0, 0, 0, 0.2)  ), url('../images/bg.jpg') no-repeat fixed;  position:fixed ;  top:0;  width:100%;  z-index:0;  height:100%;}

初始化插件

在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该背景图片视觉差插件。

$('#myContainer').iosParallax({  // How fast the background moves  movementFactor: 50,  // How much to dampen the movement (higher is slower)  dampenFactor: 36});

阅读全文

0 0