jquery酷炫分体广告插件

写了个广告插件,我把它弄成屏蔽ie6的功能了。

点击以查看效果

以下是我的博客源码,假如只想给你的博客添加个ie6屏蔽的话直接拷贝就ok了。

css文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
#hBg {
	width: 100%;
	background: #000;
	display: none;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 998;/*关键,设置层级*/
}
.bar, .bar a {
	width: 160px;
	height: 142px;
	position: absolute;
	display: block;/*关键,设置a标签为块状显示*/
}
.bar {
	background: #000 url('ie6.jpg') no-repeat 0 0;
	display: none;
	z-index: 999;/*关键,设置层级比背景高一级*/
}

js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
function ie6H(){
	var browser=[
		{title:'chrome',url:'google.com/chrome/?hl=zh-CN'},
		{title:'Mozilla Firefox ',url:'mozillaonline.com/'},
		{title:'opera',url:'opera.com/'},
		{title:'safari',url:'apple.com.cn/safari/'}
	];
	var str='<div id="hBg"></div>';//创建字符串
	for(var i=0;i<4;i++){
		str+='<div id="ab'+i+'" class="bar" style="background-position: '+i*(-160)+'px 0"></div>';
	}
	for(var l=0;l<4;l++){
		str+='<div id="ab'+(l+4)+'" class="bar" style="background-position: '+l*(-160)+'px -142px"><a href="http://www.'+browser[l].url+'" title="'+browser[l].title+'" target="_blank"></a></div>';
	}//之所以使用两个for循环是为了减少计算次数,这样只计算8次,而使用for里嵌套if的话会计算12次,为什么是12?
	$('body').append(str);//构建好字符串后加入文档流最后
	var $left=($(document).width()-640)/5;
	var $leftlist=[$left,$left*2+160,$left*3+320,$left*4+480];//计算各元素开始时的横向位置
	$left=$left*2.5;
	var $leftli=[$left,$left+160,$left+320,$left+480];//结束时的横向位置
	var $topli=[150,150,150,150,292,292,292,292];//结束高度,全部计算出来列入也是为了减少计算次数
	var $toplist=[50,50,50,50,392,392,392,392];//开始高度
	$('html,body').animate({scrollTop: 0});//强制浏览器滚动到文档顶部
	$('#hBg').height($(document).height()).fadeTo("slow", 0.8,function(){//背景设置为文档高度并渐显
		for(var li=0;li<8;li++){
			$('#ab'+i).css({left:$leftlist[li%4],top:$toplist[li]}).animate({left:$leftli[li%4],top:$topli[li],opacity:'show'},'slow')
		}//通过css给予初始位置,然后animate动画进行到结束位置并显示
	}).click(function(){
		for(var lio=0;lio<8;lio++){
			$('#ab'+i).stop().animate({left:$leftlist[lio%4],top:$toplist[lio],opacity:'hide'},'1000',function(){
				$(this).remove();
			});
		}
		$(this).remove();
	})//添加背景点击事件,点击后动画到开始位置并remove移除
}
$(function(){//文档加载完成后执行
	if($.browser.msie&&parseInt($.browser.version,10)<7)//判断ie6
		ie6H();
})

静态页面源文件下载: 屏蔽ie6源文件

但是这样并不能重用,每次使用还要修改一次代码,所以需要把它修改成插件形式,

2011-01-20更新:减少了代码量以及循环次数,采用了jquery1.4新增的添加dom方法。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$.showad=function(src,width,height,num,top,distance){
	var i,m,l,t;
	var dw=width/num;
	height=height/2;
	distance=distance/2;
	var left=($(document).width()-width)/(num+1);
	var leftl=left*(num+1)/2;
	var $l=new Array();
	var $t=new Array();
	$('html,body').animate({scrollTop: 0});
	$('<div></div>',{
		id:'hBg',
		css:{
			width:'100%',
			height:$(document).height(),
			background:'#000',
			display:'none',
			position:'absolute',
			left:0,
			top:0,
			zIndex:998
		}
	}).appendTo('body').fadeTo("slow", 0.8,function(){
		for(i=0;i<2;i++){
			for(m=0;m<num;m++){
				l=left*(m+1)+dw*m;
				t=top-distance+i*(height+2*distance);
				$('<div></div>',{
					id:'adb'+(m+i*num),
					width:dw,
					height:height,
					css:{
						position:'absolute',
						background:'#000 url(\''+src+'\') no-repeat '+m*(-dw)+'px '+(-i*height)+'px',
						display:'none',
						zIndex:'999',
						left:l,
						top:t
					}
				}).appendTo('body').animate({left:leftl+dw*m,top:top+height*i,opacity:'show'},'slow');
				$l.push(l);
				$t.push(t);
			}
		}
	}).click(function(){
		num=num*2;
		for(i=0;i<num;i++){
			$('#adb'+i).stop().animate({left:$l[i],top:$t[i],opacity:'hide'},'1000',function(){
				$(this).remove();
			});
		}
		$(this).remove();
	})
}

这个看着就复杂了,但真用起来很简单,插件有如下几个参数:

1、src:图片链接;

2、width:图片宽度;

3、height:图片高度;

4、num:图片分离数量,只是横向的,所以总共分离数量是num×2;

5、top:图片所处位置高度;

6、distance:图片动画运行的距离;

使用的时候挨个写进去就OK啦,比如可以这样:

1
2
3
$(function(){
	$.showad('ie6.jpg',640,284,16,150,200);
})

它就会展示一个链接为ie6.jpg,宽为640;高为284;居中150高度,动画距离200的广告。

更新源码及示例下载: jquery分体广告插件

你可以下载后修改最后一行代码以测试效果,假如你的机器很nb的话,不妨尝试下数百块的分离效果,很考验cpu的哦 :c5

39 条评论在 “jquery酷炫分体广告插件

  1. 已经用上,不过让我郁闷了一阵子。开始无法达到你的网站一样的效果,出不了黑色背景。后来才发现你调用的JS版本是1.4.4,我的是 1.2.6~呵呵,升级下了版本 ,完美实现~ :a1

    • 以前版本的jquery当css设定为display:none时,运行fadeto并不会显示元素,后来才改过来的,
      另外你不需要把c.js全部拷过去,其中有一段代码是我博客右上角的动画代码,对你来说是没用的,第11行else后面的东西完全可以删掉,或者把上面那段有注释的代码拷下来压缩使用

  2. 去掉了,这个我知道滴。 :b5 不过很可惜,知更鸟的那个主题加载了不少JS,很复杂。我换成1.4.4,侧边栏有冲突。只好换回原主题JS版本。不过准备应用到另外一个站上去~! :b4

  3. Pingback引用通告: 让我们酷酷滴干掉IE6 | 恋上苹果

  4. Pingback引用通告: IE6,谁不恨? | 凡夫俗子

  5. 我很喜欢你这个主题,能共享一下吗!谢谢.到时我用给你留链接.帮你宣传一下.这样可以带来流量

    • 很抱歉,如果你喜欢的话可以自己扒,这个主题被我改的过于深入,没办法单独打包了,只给你主题文件的话是没法运行的

  6. 博主你好,用了你的这个代码,真的很酷。因为我技术有限,写的CSS只能IE9才能支持~幸亏你这个代码才让我不那么尴尬,多谢~

发表评论

电子邮件地址不会被公开。 必填项已用*标注