最新消息:

JQ应用第1款:基于jQuery的拉幕横幅广告效果-带重播带停顿

JQuery应用 杨红伟 2653浏览 0评论

原文地址:http://www.ijquery.cn/?p=637   作者:杨红伟  网名:子弹兄  工作室:宏威网站制作部 (http://www.360sites.cn )

一、特效介绍及制作过程

不想听我发牢骚的话,直接下拉到下边看demo或者下载看。想看的话继续看啊……

今天一个朋友让我给他做一个拉幕效果,自己想的网上那么多案例,随便下载一下得了,效果也不错。于是网上找了几个效果,都不是自己想要的效果。因为自己从没有做过,所以就拿下载的那个代码修改了一下,我去那代码乱七八糟的,本来几句,几分钟就实现了,没想到用了一个多甚至两个小时。

原理是这样的:一个图片在打开的时候,下拉幕布,然后停顿几分钟,然后再关闭,然后再下拉出一个小图片。

于是想了一想,需要这几个jquery代码来操作。

一:下拉-slidedown()
二:停顿-delay()
三:缩回-slideup()
四:再下拉-slidedown()

于是自己做了一个demo,部分代码如下:

$("#adBig").slideDown(2000).delay(1000).slideUp(2000,function(){
	$("#adSmall").slideDown(1000);
});

于是死活不能运行,弄不懂了,换种方法吧。后来换了各种,比如 JS 的 setTimeout 函数,但是这家伙的语法规则有些变态 setTimeout(code,millisec) ,中间必须加code,但是运行了一下,死活影响后来的 function回调函数的效果了!

TMD,于是各种翻书,把我的书都找遍了,也没有找到这个 delay ,看了一看,我的书也许有些旧了。

于是,在网上找到一篇文章说是 jquery1.4以后才引入了 delay这个参数,于是把jquery-.1.7.2.min.js 加入了,我的那行代码可以运行了!!

所以啊,以下总结:

一:以后自己写代码吧,要用也要用那些有影响力的文章或者代码;
二:delay 是 jquery1.4 才引用的,以后可别用旧的jquery——要用比较新的相关代码;
三:书籍是用来学习基本语法及结构的,一些时尚前沿的内容书籍里是找不到的,百度、谷歌吧……

二、DEMO及下载

HTML代码:

<span id="cb">重播</span>
<div id="" >
	<div id="adBig"  style="display: none">
		<a href='#'><img title="" src="images/big.jpg" border="0"/></a>
	</div>
	<div id="adSmall" style="display: none">
		<a href="#"><img src="images/small.gif" border="0"/></a>
	</div>
</div>

JS代码:

<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" >
function showImage()
{
	$("#adBig").slideDown(2000).delay(1000).slideUp(2000,function(){
		$("#adSmall").slideDown(1000);
	});
}
$(function(){
	//打开时加载图像
	showImage()	;
	//单击时处理的效果
	$("#cb").click(function(){
		$("#adSmall").css("display","none");
		showImage();
	});
});
</script>

扩展:当然呢,如果你不要重播按钮,代码会更简练!总共也没几句,所有代码如下:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>杨红伟制作-基于jQuery的拉幕横幅广告效果-不带重播带停顿</title>
		<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" >
			$(function(){
				$("#adBig").slideDown(2000).delay(1000).slideUp(2000,function(){
					$("#adSmall").slideDown(1000);
				});
			});
		</script>
	</head>
	<body>
		<div id="adBig"  style="display: none">
			<a href='#'><img title="" src="images/big.jpg" border="0"></a>
		</div>
		<div id="adSmall" style="display: none">
			<a href="#"><img src="images/small.gif" border="0"/></a>
		</div>
	</body>
</html>

DEMO: http://www.ijquery.cn/demojq/0001/demo2.html

下载: http://www.ijquery.cn/demojq/0001/0001.zip 中的demo2.html

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址