首页 > web前端 > js教程 > 正文

仿百度联盟对联广告实现代码_广告代码

php中文网
发布: 2016-05-16 16:38:30
原创
2241人浏览过

源码如下:

<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px; _position:absolute; background:url(http://files.jb51.net/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
.flAd{left:0;}
.frAd{right:0;}
</style>
<div class="floatAd flAd">
<a href="#" target="_blank"><img src="#"    style="max-width:90%"  style="max-width:90%" alt="第1张图"></a>
<span class="closeAd"></span>
</div>
<div class="floatAd frAd">
<a href="#" target="_blank"><img src="#"    style="max-width:90%"  style="max-width:90%" alt="第2张图"></a>
<span class="closeAd"></span>
</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(this).parent(".floatAd").hide();
})
/*for ie6*/
function scrollAd(obj) {
	var obj = "." + obj;
	var adTop = $(".floatAd").offset().top;
	//alert(adTop);
	$(window).scroll(function () {
		$(".floatAd").css({
			top : $(window).scrollTop() + adTop
		})
	})
}
$(function () {
	//针对ie6,模拟position:fixed效果
	if ($.browser.msie && parseInt($.browser.version) == 6) {
		scrollAd("floatAd");
	}
})
</script>
登录后复制

我们还可以改下代码,实现“单边展示飘浮广告,多个广告轮播展示”的效果,更改后的源代码:

可关闭与展开的对联广告代码
可关闭与展开的对联广告代码

可关闭与展开的对联广告代码是一款JS实现的可点击关闭与展开的对联广告代码。

可关闭与展开的对联广告代码 123
查看详情 可关闭与展开的对联广告代码
<style type="text/css">
*{margin:0;padding:0;}
body{height:2000px;}
.floatAd{width:124px;height:299px; text-align:center; position:fixed;margin-left:0;top:109px;right:0; _position:absolute; background:url(http://files.jb51.net/demoimg/2014/bg_slide2_120_270.png) no-repeat;}
.floatAd a{display:block;}
.floatAd img{border:none;}
.floatAd .closeAd{width:50px; height:20px; display:block; cursor:pointer;margin:9px 0 0 auto;}
</style>
<div class="floatAd">
<a href="#" target="_blank"><img src="#"    style="max-width:90%"  style="max-width:90%" alt="第3张图"></a>
<a href="#" target="_blank" style="display:none;"><img src="#"    style="max-width:90%"  style="max-width:90%" alt="第4张图"></a>
<span class="closeAd"></span>
</div>
<script type="text/javascript">
$(".closeAd").click(function(){
 $(".floatAd").hide();
})
/*隔时切换飘浮广告*/
function changePic(obj,times){
	var num=0,
		obj =$("." + obj+" >a"),
		times=times*1000,
		len=obj.length;
	//alert(len);
	setInterval(function(){
		num++;
		num=num>len-1&#63;0:num;//console.log(num);
		$(obj).eq(num).show().siblings("a").hide();
		},times)
	}
/*for ie6*/
function scrollAd(obj) {
	var obj = "." + obj;
	var adTop = $(".floatAd").offset().top;
	//alert(adTop);
	$(window).scroll(function () {
		$(".floatAd").css({
			top : $(window).scrollTop() + adTop
		})
	})
}
$(function () {
	//针对ie6,模拟position:fixed效果
	if ($.browser.msie && parseInt($.browser.version) == 6) {
		scrollAd("floatAd");
	}
	//执行定时切换图片广告
	changePic("floatAd",2);//每隔2秒切换一次广告图片展示,间隔时间可控
})
</script>
登录后复制
最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号