QQWorldOpen 案例图片
QQWorldOpen 案例图片

昨天网上有朋友询问本站右侧边栏顶部的广告在鼠标经过后的滑动效果如何实现,我整理了一下,分享给大家:

准备工作

一、引用脚本

<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层叠样式表

#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'
});

插件脚本参数详细解释

参数名数据类型默认值解释
itemTagStringli单位的标签名
openClassString.open浮动层的选择器
speedInt500动画播放速度,以毫秒(ms)为单位
directionstringrandom滑动方向,默认值是"random", 还包括 "up", "down", "left", "right", 'right_up', 'right_down', 'left_down', 'left_up'
easingstringrandom滑动的特效,可选值有:"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"

范例下载

QQWorldOpen

喜欢这篇文章吗,不妨分享给朋友们吧!