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

程序员文章站 2022-07-12 21:34:48

...

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

2、实现原理

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

3、效果图

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

博客分类：前端技术学习jQuery clickdelayslideDownstopslideUp

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

博客分类：前端技术学习jQuery clickdelayslideDownstopslideUp

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>