页面常用代码整理

361 阅读1分钟

在页面不够高的时候,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);
    })
})