yp秋水伊人

导航

弹窗 漂浮锚点

弹窗。。。。。。
<center>
<script type="text/javascript">
var intervalId = null;    
function slideAd(id,nStayTime,sState,nMaxHth,nMinHth){    
  this.stayTime=nStayTime*1000 || 3000;    
  this.maxHeigth=nMaxHth || 330;    
  this.minHeigth=nMinHth || 2.5;    
  this.state=sState || "down" ;    
  var obj = document.getElementById(id);    
  if(intervalId != null)window.clearInterval(intervalId);    
  function openBox(){    
   var h = obj.offsetHeight;    
   obj.style.height = ((this.state == "down") ? (h + 2) : (h - 2))+"px";    
    if(obj.offsetHeight>this.maxHeigth){    
    window.clearInterval(intervalId);    
    intervalId=window.setInterval(closeBox,this.stayTime);    
    }    
    if (obj.offsetHeight<this.minHeigth){    
    window.clearInterval(intervalId);    
    obj.style.display="none";    
    }    
  }  
    
  function closeBox(){    
   slideAd(id,this.stayTime,"up",nMaxHth,nMinHth);    
  }  
   
  intervalId = window.setInterval(openBox,4);    
} 

  
</script> 
<div id="MyMoveAd" style="background:#fff;height:12px;overflow:hidden;">
<a href="alixixi.com" target="_blank"><img  src="../Static/images/ChEwolhzzUyAQlUWAAIFLG6d45407200.jpg" border="0" /></a>
</div>    
    
<script type="text/javascript">    

 slideAd('MyMoveAd',3);   
   
</script> 
<table width="100%"  border="0" cellspacing="0" cellpadding="0"  id="jueban" style="background:red;display: block; ">
</td></tr></table>
</center>

  

漂浮锚点。。。。。。。


<!--侧边漂浮边栏-->
    <div class="side_bar hide">
        <ul>
          
            <li><a href="#header" style="background-color:#3399FF; color:#FFFFFF;">回到首部</a> </li>
        </ul>
    </div>
	<script>
		$(window).scroll(function() {
			var scroll_len = $(window).scrollTop();
			if (scroll_len > 10) {
				$('.side_bar').fadeIn();
			} else {
				$('.side_bar').fadeOut();
			};
		});
    </script>


/*锚点开始*/
.hide {
	display: none
}
.side_bar {
	position: fixed;
	left: 50%;
	margin-left: 610px;
	bottom: 20px;
	width: 48px;
	z-index: 10000;
}
.side_bar li {
	margin: 3px 0;
}
.side_bar a {
	display: inline-block;
	padding: 10px 12px;
	line-height: 14px;
	color:#6699CC;
}
.side_bar a:hover {
	color:#3399FF;
}
/*锚点结束*/

  <a name="header"></a>

再引用一下jquery

 

posted on 2017-01-24 14:45  yp秋水伊人  阅读(166)  评论(0编辑  收藏  举报