欢迎莅临阿Q的项目

专业WP商业设计开发销售中心

QQWorldOpen - 开门的艺术

昨天网上有朋友询问本站右侧边栏顶部的广告在鼠标经过后的滑动效果如何实现,我整理了一下,分享给大家。
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层叠样式表

<?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"

范例下载

QQWorldOpen

如果喜欢本文,请分享给朋友们