弹窗 漂浮锚点

弹窗。。。。。。
<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

 

转载于:https://www.cnblogs.com/yp11/p/6347106.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值