昨天网上有朋友询问本站右侧边栏顶部的广告在鼠标经过后的滑动效果如何实现,我整理了一下,分享给大家:
准备工作
一、引用脚本
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script> <!-- qqworld_open --> <script src="js/jquery.qqworld_open-min.js"></script> <!-- /qqworld_open -->
二、编写HTML代码
<ul id="open">
<li class="qqworld-open-container">
<div class="content"><img src="images/05.jpg" width="400" height="200" /></div>
<div class="cover"><img src="images/01.jpg" width="400" height="200" /></div>
</li>
<li class="qqworld-open-container">
<div class="content"><img src="images/06.jpg" width="400" height="200" /></div>
<div class="cover"><img src="images/02.jpg" width="400" height="200" /></div>
</li>
<li class="qqworld-open-container">
<div class="content"><img src="images/07.jpg" width="400" height="200" /></div>
<div class="cover"><img src="images/03.jpg" width="400" height="200" /></div>
</li>
<li class="qqworld-open-container">
<div class="content"><img src="images/08.jpg" width="400" height="200" /></div>
<div class="cover"><img src="images/04.jpg" width="400" height="200" /></div>
</li>
</ul>
三、编写CSS层叠样式表
<?php
#open {
margin: auto;
width: 850px;
height: 420px
}
#open li {
float: left;
margin: 7px;
list-style: none;
width: 400px;
height: 200px;
border: 5px solid #fff;
background: #fff;
}
四、调用QQWorldOpen插件
jQuery('#open').QQWorldOpen({
itemTag: 'li',
openClass: '.cover',
speed: 500,
direction: 'random',
easing: 'easeInOutExpo'
});
插件脚本参数详细解释
参数名 | 数据类型 | 默认值 | 解释 |
---|---|---|---|
itemTag | String | li | 单位的标签名 |
openClass | String | .open | 浮动层的选择器 |
speed | Int | 500 | 动画播放速度,以毫秒(ms)为单位 |
direction | string | random | 滑动方向,默认值是"random", 还包括 "up", "down", "left", "right", 'right_up', 'right_down', 'left_down', 'left_up' |
easing | string | random | 滑动的特效,可选值有:"swing", "easeInQuad", "easeOutQuad", "easeInOutQuad", "easeInCubic", "easeOutCubic", "easeInOutCubic", "easeInQuart", "easeOutQuart", "easeInOutQuart", "easeInQuint", "easeOutQuint", "easeInOutQuint", "easeInSine", "easeOutSine", "easeInOutSine", "easeInExpo", "easeOutExpo", "easeInOutExpo", "easeInCirc", "easeOutCirc", "easeInOutCirc", "easeInElastic", "easeOutElastic", "easeInOutElastic", "easeInBack", "easeOutBack", "easeInOutBack", "easeInBounce", "easeOutBounce", "easeInOutBounce" |