总结几个实用的js/jq代码片段
来源:互联网 发布:蓝海文交软件下载 编辑:程序博客网 时间:2024/06/08 07:18
前言:众所周知,前端页面的动画效果的实现一般都是由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);})});
0 0
- 总结几个实用的js/jq代码片段
- 分享几个实用的JQ代码
- (转载)推荐几个非常实用的JQuery代码片段
- 实用的代码片段
- 实用的jQuery代码片段
- 实用的jQuery代码片段
- 实用的java代码片段
- 实用的PHP代码片段
- iOS实用的代码片段
- 实用的java代码片段
- 《超实用的代码片段》
- 实用的 jQuery 代码片段
- jq片段代码分析........
- jq片段代码分析
- BootStrap实用代码片段(持续总结)
- 一些实用的jQuery代码片段
- 一些实用的jQuery代码片段
- 一些实用的JQuery代码片段收集
- c++作业七
- 清除浮动的几种方式,各自的优缺点
- 自定义view实现水波纹效果
- c++作业7
- hibernate使用带有sum()的hql语句出错的问题
- 总结几个实用的js/jq代码片段
- EasyCamera配置文件
- 数据结构自学之路---单链表
- c++上机第七次实验
- C++第7次上机实验
- STM32实现Pixhawk PPM
- c++作业7t
- C++上机作业7
- php curl开启方法