jQuery广告图片各大商城首页流行通栏广告图片-20130702 -

xjwolaile

浏览: 340417 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

jQuery广告图片各大商城首页流行通栏广告图片-20130702

博客分类：

前端技术
学习
jQuery

click delay slideDown stop slideUp

1、效果及功能说明
广告图片制作各大商城首页顶部通栏广告图片，默认下滑动展开广告图片大图，之后滑动收起展开广告小图

2、实现原理

定义图片隐藏图片和显示图片的时间1.5秒，在图片右上角的按钮上定义一定点击效果让点击了按钮后实现隐藏效果并在完全隐藏后显示原来图片的缩小版缩小版全部显示出来后显示出另外一个按钮就是重播在重播按钮上在定义一个点击效果这个效果是显示图片的效果当点击后原来的小图片会隐藏大图片会显示然后重播按钮隐藏，关闭按钮重新显示出来

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合

6、将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

7、代码[html5]

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* advbox */
.advbox{width:990px;margin:0 auto;}
.advbox .dt_small{width:990px;}
.advbox .dt_big{width:990px;}
.advbox .dt_toBig{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_showTL_1201.png");cursor:pointer;}
.advbox .dt_toSmall{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_closeTL_1201.png");cursor:pointer;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>			

<div class="advbox">

	<div class="dt_small" style="display:none;">
		<div class="dt_toBig" style="display:none;"></div>
		<a href="http://www.17sucai.com/" target="_blank"><img src="images/1325.jpg" width="990" height="60" alt="jquery广告图片缩略图" /></a>
	</div>
	
	<div class="dt_big">
		<div class="dt_toSmall"></div>
		<a href="http://www.17sucai.com/" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="990" height="500" alt="jquery广告图片大图" /></a>
	</div>
	
</div>

<script type="text/javascript">
function AdvClick(){
//定义方法
	var a=1500;
	//点击关闭后的的小图显示出来的时间
	$(".dt_toSmall").click(function(){
	//定义关闭按钮的点击
		$(".dt_small").delay(a).slideDown(a);
		//定义第二轮的点击关闭按钮以后显示出小图片和显示的时间
		$(".dt_big").stop().slideUp(a);
		//定义第二轮点击关闭按钮大图片向下移动并消失
		$(".dt_toBig").delay(a*2).fadeIn(0)
		//定义显示第二轮的在点击完关闭按钮以后显示出小图片后的小图片的坐上方的重播按钮的显示
	});
	$(".dt_toBig").click(function(){
	//定义重播按钮的事件
		$(".dt_big").delay(a).slideDown(a);
		//定义点击完第二轮的重播按钮让大图片显示出来的效果和时间
		$(".dt_small").stop().slideUp(a);
		//定义点击完第一轮的重播按钮隐藏小图片
	})
}
</script>

<script type="text/javascript">
$(document).ready(function(){
//函数规定当 ready 事件发生时执行的代码
	AdvClick();
	//实现AdvClick方法
});
</script>				

</body>
</html>

images.rar (224.8 KB)
下载次数: 1

查看图片附件

分享到：

jQuery侧面浮动图片广告或滚屏图片广告-2 ... | jQuery仿麦包包商城图片滑动伸缩图片广告 ...

2013-07-03 00:38
浏览 1141
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery广告图片各大商城首页流行通栏广告图片-20130702

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

jQuery广告图片各大商城首页流行通栏广告图片-20130702

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>