jquery实现左右条幅广告效果

最新推荐文章于 2024-04-14 17:03:53 发布

ningyb

最新推荐文章于 2024-04-14 17:03:53 发布

阅读量1.4k

点赞数

分类专栏： JavaScript 文章标签： jquery border function class xhtml scroll

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>左右条幅广告</title>
<style type="text/css">   
        .ad-left{  
            background-image:url(couplet_left.gif);
            border: 1px solid #fcc;    
            position:absolute;    
            top:100px;    
            left:16px;    
            width:100px;    
            height:231px; 
     		z-index:1;   
			cursor:pointer;
        }    
        .ad-right{ 
            background-image:url(couplet_right.gif); 
            border: 1px solid #fcc;    
            position:absolute;    
            top:100px;    
            right:16px;    
            width:100px;    
            height:231px; 
			z-index:1;   
			cursor:pointer;
        }  
		.left-close{
	       position:absolute;
	       left: 17px;
	       top: 101px;
	       width: 11px;
	       z-index:2;
		   border:0px;
		   cursor:pointer;
		}  
		.right-close{
	      position:absolute;
	      z-index:3;
	      border:0px;
	      right: 16px;
	      top: 100px;
		  cursor:pointer;
		}
    </style>
<script src="jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript">   
        //页面scroll事件时触发   
        $(this).scroll(function() { 
            var bodyTop = 0;    
            if (typeof window.pageYOffset != 'undefined') {    
                bodyTop = window.pageYOffset;    
            } 
            else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') 
            {    
                bodyTop = document.documentElement.scrollTop;    
            }    
            else if (typeof document.body != 'undefined') {    
                bodyTop = document.body.scrollTop;    
            }    
			//设置层的CSS样式中的top属性,注意要是小写,要符合“标准”
            $(".ad-left,.left-close,.ad-right,.right-close").css("top", 100 + bodyTop);            
        });   
		//页面加载时发生
		$(document).ready(function(){
		   //点击关闭按钮时,两边条幅隐藏
		   $(".left-close,.right-close").click(function(){
		      $(".ad-left,.ad-right,.left-close,.right-close").hide();
		   });
		   //点击左右条幅时，跳到活动页面
		   $(".ad-left,.ad-right").click(function(){
              window.open("redJuly.html");
		   });
		});  
    </script>
</head>
<body>
<div class="left-close"><img src="close.gif" /></div>
<div class="ad-left"></div>
<div class="right-close"><img src="close.gif" /></div>
<div class="ad-right"></div>
</body>
</html>