jquery图片对联广告制作jQuery侧面浮动图片广告



120 476 159



特效描述:图片对联广告 侧面浮动图片 侧面浮动图片广告,jquery浮动对联图片广告制作一个侧面浮动图片广告特效,类似滚屏效果的图片广告。jQuery下载。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

2. HTML代码

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.fixediv{position:fixed;top:140px;z-index:9999;width:140px;height:216px;background:#ddd;}
.fixediv img{float:left;}
.fixediv a.close{display:block;height:30px;line-height:30px;background:#fff;font-size:14px;padding:0 10px;color:#5e5e5e;text-decoration:none;text-align:center;}
.leftadv{left:0px;}
.rightadv{right:0px;}
</style>
<div class="fixediv leftadv">
	<a href="http://www.17sucai.com/"><img src="images/180.jpg" width="140" height="186" alt="性感美女" /></a>
	<a class="close" href="javascript:void(0);">关闭广告</a>
</div>
<div class="fixediv rightadv">
	<a href="http://www.17sucai.com/"><img src="images/280.jpg" width="140" height="186" alt="清纯美女" /></a>
	<a class="close" href="javascript:void(0);">关闭广告</a>
</div>
<div style="height:1200px;"></div>
<script type="text/javascript">
$(document).ready(function(){
	$(".fixediv a").click(function(){
		$(".fixediv").fadeOut(400);
	});
	$(".fixediv").floatadv();
});
jQuery.fn.floatadv = function(loaded) {
	var obj = this;
	body_height = parseInt($(window).height());
	block_height = parseInt(obj.height());
	top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop());
	if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };
	if(!loaded) {
		obj.css({'position': 'absolute'});
		obj.css({ 'top': top_position });
		$(window).bind('resize', function() { 
			obj.floatadv(!loaded);
		});
		$(window).bind('scroll', function() { 
			obj.floatadv(!loaded);
		});
	} else {
		obj.stop();
		obj.css({'position': 'absolute'});
		obj.animate({ 'top': top_position }, 400, 'linear');
	}
}
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 浮动 悬浮 悬浮层 悬浮框 浮动层 浮动框 浮动插件 悬浮插件 浮动提示框 图片广告

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到