Jquery+html+css实现广告条

来源：互联网发布：淘宝领的话费券在哪编辑：程序博客网时间：2024/05/17 23:08

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> 广告滚动条 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">


<style type="text/css">
*{margin:0px; padding:0px;}

body{height:5000px;}

.d{width:120px; height:270px;background:url('./img/duilian.jpg') no-repeat; position:absolute; top:200px; display:none;}
.l{left:6px;}
.r{right:6px;}
.close{position:absolute; top:1px; right:1px; font-size:12px; color:#fff;}
</style>


<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript">
$(function(){
var d = $(".d");
var close = $(".close");

//屏幕分辨率
var SW = screen.width;
if(SW > 1024){
d.show();
}

//广告条滚动
$(window).scroll(function(){
var ST = $(window).scrollTop();
d.stop().animate({top:ST+200});
});

//关闭广告
close.click(function(){
$(this).parent().hide();
return false;
});

});
</script>

</head>

<body>
<div class="d l"><a href="" class="close">X关闭</a></div>
<div class="d r"><a href="" class="close">X关闭</a></div>
</body>

</html>

0 0