作網站常常會用到的一些js效果

 

 

 1.返回頂部

   $(function(){
        $('.top').hide();
        $(window).scroll(function() {       
             if($(window).scrollTop() >= 100){
                $('.top').fadeIn(300); 
                 }else{  $('.top').fadeOut(300);  }  
         });
        $('.top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
     })；
2.點擊錨點移動到對應的位置
   $(".aa").click(function(event){
        event.preventDefault(); //取消事件的默認動做。
        $('html,body').animate({scrollTop:$(this.hash).offset().top},800);
   });
3.判斷頁面加載是否完成
   document.onreadystatechange = loadingChange;//當頁面加載狀態改變的時候執行這個方法.  
        function loadingChange() {   
            if(document.readyState == "complete"){ //當頁面加載狀態爲徹底結束時進入   
                $(".loading").hide();//當頁面加載完成後將loading頁隱藏  
                window.location.href="http://www.baidu.com";
            }   
        }
4.禁止鼠標右鍵
   $(document).ready(function(){
        $(document).on("contextmenu",function(e){
             return false;
         });
    });
5.判斷是pc端仍是移動端
    function getClientInfo(){  
         var banner=document.getElementById('banner');
         var userAgentInfo = navigator.userAgent;  
         var Agents = new Array("Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod");  
         var agentinfo = null;  
         for (var i = 0; i < Agents.length; i++) {  
                   if (userAgentInfo.indexOf(Agents[i]) > 0) { agentinfo = userAgentInfo; break; }  
         }  
         if(agentinfo){
                   $('.banner').css('height','auto');
                    banner.style.height='auto'
                   }else{
                        $('.banner').css($(window).height());
                        banner.style.height=document.body.clientHeight
                   }     
        }
6.判斷是不是ie瀏覽器
   function isIE() { //ie?    
       if (!!window.ActiveXObject || "ActiveXObject" in window){
              return true;
         }else{}         
          return false;  
     } 
七、返回上一頁
     方法1、以按鈕點擊的方式實現：
                   <input type="button" name="Submit" value="返回上一頁" onclick="javascript:window.history.back(-1);">
                   或者
                   <input type="button" name="Submit" value="返回上一頁" onclick="javascript:history.back(-1);">
     方法2、以圖片點擊的方式實現：
                   <img src="圖片的路徑" onclick="javascript:window.history.back(-1);" title="返回上一頁" alt="返回點擊圖片" />
                   或者
                   <img src="圖片的路徑" onclick="javascript:history.back(-1);" title="返回上一頁" alt="返回點擊圖片" />
     方法3、文字點擊的方式實現：
                   <a href="javascript:history.back(-1)">返回上一頁</a>
                  或者
                  <a href="#" onClick="javascript:history.back(-1);">返回上一頁</a>

     方法4、圖片連接的方式實現：
                  <a href="javascript:window.history.back(-1)" target="_self"><img src="圖片的路徑" /></a>
                  或者
                 <a href="javascript:history.back(-1)" target="_self"><img src="圖片的路徑" /></a>
     方法5、過幾秒鐘後返回上一頁代碼：
                 <script language="javascript">setTimeout("window.history.go(-1)",3000)</script> 
                 或者
                <script language="javascript">setTimeout("history.go(-1)",3000)</script>

WEB前端互動交流羣434623999