zoukankan      html  css  js  c++  java
  • 弹窗 漂浮锚点

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

  • 相关阅读:
    python-禅
    学习思路(待完善)
    思考-想法-研究生
    五一前随笔
    监督学习,非监督学习和半监督学习
    第二章maven的安装和配置
    maven实战 第一章
    常用接口测试工具
    jmeter监控服务器性能(转载)
    数据库操作
  • 原文地址:https://www.cnblogs.com/yp11/p/6347106.html
Copyright © 2011-2022 走看看