总结几个实用的js/jq代码片段

前言：众所周知，前端页面的动画效果的实现一般都是由js/jq实现的（现在css3也可以实现很多很酷炫的页面特效，但是由于浏览器的兼容性问题，运用还不算太广泛，这里先不说css3对于实现页面特效的便利。），此前一直想总结些常用的比较实用的js代码方便自己也希望可以帮到有需要的童鞋。今天大概总结了几个，并贴出代码。如有纰漏，欢迎大家批评指正。

1.页面中指定某块（div）的内容随滚动条滚动到顶部时固定，反之不固定：

//当滚动条滚动到顶部时，#div固定在顶部
 $(function(){
 	//获取要定位的元素距离浏览器顶部的距离
 	var fixedContent = $("#div").offset().top;
 	//滚动条事件
 	$(window).scroll(function(){
 	//获取滚动条滚动的距离
 	  var srcollHeight=$(this).scrollTop();
 	//滚动条的滚动距离大于或等于定位元素距离浏览器顶部的距离时就固定，反之，就不固定
 	if(srcollHeight>=fixedContent){
 		$("#div").css({"position":"fixed","top":"0","margin-top":"0","background-color":"#fff","z-index":"80","min-width":"1200px","box-shadow":"2px 2px 2px #dbdbdb"});
 	}else if(srcollHeight<fixedContent){
 		$("#div").css({"position":"static","background-color":"#fbfbfb","margin-top":"30px","box-shadow":"none"});
 	}
 	});
 });



注：css（/**/）//这里添加你需要实现的css样式

2.鼠标滑过切换样式：

（1）html代码部分：

<div class="lease clearfix">           	
                <div class="leaop clearfix">
                    <a class="on fillet1">热门办公室</a>
                    <a>热门写字楼</a>
                    <a>热门商务中心</a>
                    <a class="fillet2">友情链接</a>
                </div>
                <div class="content-lists">
                	<ul class="clearfixx">
	                	<li>软件产业基地写字楼出租</li>
	                	<li>软件产业基地写字楼出租</li>
	                	
	                </ul>
	                <ul class="clearfixx dis_no">
	                	<li>软件产业基地写字楼出租</li>
	                	<li>软件产业基地写字楼出租</li>
	                	
	                </ul>
	                <ul class="clearfixx dis_no">
	                	<li>软件产业基地写字楼出租</li>
	                	<li>软件产业基地写字楼出租</li>
	                	
	                </ul>
	                <ul class="clearfixx dis_no">
	                	<li>软件产业基地写字楼出租</li>
	                	<li>软件产业基地写字楼出租</li>
	                	
	                </ul>
                </div>
            </div>

（2）css样式部分：

.lease{width:600px;float: left;position: relative;}
.leaop {width: 100%;}
.leaop a{margin-top: 32px; text-decoration: none;text-shadow: 1px 1px 0 #fff;width: 138px;height: 40px;float: left;display: block;color: #888888;line-height:42px;text-align: center; background-color: #eeeeee; }
.leaop a:hover,.on{background-color:#51a1d9!important;color: #ffffff!important;text-shadow: none;cursor: pointer;}
.leaop .on{text-shadow: none;}
.leaop .fillet1{border-top-left-radius: 4px;border-bottom-left-radius: 4px;}
.leaop .fillet2{border-top-right-radius: 4px;border-bottom-right-radius: 4px;}
.lesal{margin-top: 20px;}
.lesal div{display: none;}
.lesal div i{word-wrap: break-word;display: inline-block;margin-right: 15px;margin-bottom:11px;cursor: pointer; color:#777777;font-style: normal;font-size: 14px;}
.lesal div i:hover{color: #51a1d9;cursor: pointer;}

/*清除浮动*/
.clearfixx:before,
.clearfixx:after {
	display: table;
	content: '';
}

.clearfixx:after {
	clear: both;
}

（3）js代码部分：

$(document).ready(function(){
	//底部选项卡特效
     $(".leaop a").hover(function(){
        $(".leaop a").removeClass("on");
        $(this).addClass("on");
        $(".content-lists ul").hide();
        $(".content-lists ul").eq($(this).index()).show();
    });
});

3.点击打开弹出层：

（1）html代码：

<div class="theme-popover"> <!-- 整个弹出层-->
		<div class="theme-poptit">
          <a href="javascript:;" title="关闭" class="close">×</a>        <!--关闭按钮-->
     </div>
     <div class="theme-popover_main"></div><!--弹出层内容，例如做成弹出的登录或注册框，消息提示框等等-->					
</div>
<div class="theme-popover-mask"></div> <!--遮罩层 -->

（2）js代码:

$('.navright').click(function(){
			$('.theme-popover-mask').fadeIn(100);
			$('.theme-popover').slideDown(200);
		})
		$('.theme-poptit .close').click(function(){
			$('.theme-popover-mask').fadeOut(100);
			$('.theme-popover').slideUp(200);
		})
	
	});