頁面常用程式碼整理

鰻魚烤麵包發表於2018-04-18

在頁面不夠高的時候，footer永遠保持在底部的css程式碼

html {
   height: 100%;
}

body {
   min-height: 100%;
}

body {
   position: relative;
}

.footer {
    height: 100px;
    background: red;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
複製程式碼

導航欄的active的js程式碼

$(document).ready(function () {
    var a = document.URL;
    $(".nav ul li").each(function () {
        var b = $(this).children("a")[0].href;
        if (a == b) {
            $(this).children("a").parent().addClass("active");
        }
        else {
            $(this).children("a").parent().removeClass("active");
        }
    })
})
複製程式碼

banner大圖的自適應js程式碼

$(function(){
    $(".bd img").css("display","none")
    $(".bd li").each(function(e){
	$(".bd li:eq("+e+")").css("backgroundImage", "url(" + $(".bd li:eq("+e+")").find("img").attr("src") + ")");
    });
})
複製程式碼

PC站跳轉移動站

<script type="text/javascript">
    function browserRedirect() {
        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
            window.location.href = 'm/index.html';
        } else {
            
        }
    }
    browserRedirect();  
</script>  

請將以上程式碼裝到pc站首頁檔案中<head>後面  
m資料夾直接上傳至pc站空間根目錄
複製程式碼

清除浮動

.clearfix:after {
    content: "\0020";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}

複製程式碼

錨連結加動畫

$('#twoNav a').click(function(){
    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
    return false;
});
複製程式碼

新增active

$('.nav li').eq(0).find('a').addClass('active').siblings("a").removeClass("active");
複製程式碼

JQ無縫滾動

$(function() {
    var length=$('#fourcolsUl li').length;
    $('#fourcolsUl').html($('#fourcolsUl').html()+$('#fourcolsUl').html())
    var num = 0;
    function goLeft() {
        //245是一個li標籤的寬度
    	if (num == -245*length) {
    		num = 0;
    	}
    	num -= 1;
    	$("#fourcolsUl").css({
    		left: num
    	})
    }
    //設定滾動速度
    var timer = setInterval(goLeft, 20);
    //設定滑鼠經過時滾動停止
    $("#fourcolsUl").hover(function() {
    	clearInterval(timer);
    },
    function() {
    	timer = setInterval(goLeft, 20);
    })
})
複製程式碼

相關文章