tab 点击左侧导航,右侧对应内容上移顶部(动画)
2016-01-11 16:23
495 查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://code.jquery.com/jquery-1.8.0.min.js" type="text/javascript" charset="utf-8"></script> <title></title> </head> <style type="text/css"> .cp_mid { width: 1210px; margin: 0 auto; position: relative; height: 2000px; overflow: hidden; } .cp_leftnav { width: 200px; height: 60px; line-height: 60px; text-align: left; z-index: 129; padding-left: 10px; font-size: 16px; font-weight: bold; color: #333; } .cp_rightcont { margin-left: 15px; /*margin-bottom: 35px;*/ height: 255px; position: absolute; background: #FFF; z-index: 100; background: #CCCCCC; text-align: center; } .cp_rightp { width: 630px; } .cp_rightp p { line-height: 36px; color: #666; margin-left: 20px; font-size: 14px; } .cp_rightbtn { border-radius: 5px; background-color: rgb( 14, 110, 184); width: 98px; height: 30px; color: #FFFFFF; line-height: 30px; text-align: center; font-size: 14px; margin-left: 20px; z-index: 118; float: right; margin-right: 30px; } .cp_right { width: 970px; position: absolute; height: 2000px; left: 210px; margin-left: 30px; } .cp_left:hover .cp_leftnavact { cursor: pointer; } .cp_left:hover .cp_leftnav { cursor: pointer; } .hide { display: none; } .left { float: left; } .cp_rightcont { background: #CCC5C0 none repeat scroll 0 0; height: 255px; margin-left: 15px; position: absolute; width: 100%; line-height: 255px; font-size: 30px; } .clearfix { display: inline-block; } .cp_right { height: 2000px; left: 210px; margin-left: 30px; position: absolute; width: 970px; } .cp_leftnavact { background-color: rgb(239, 239, 239); } </style> <body> <div class="cp_mid"> <div class="cp_left left"> <div class="cp_leftnav cp_leftnavact"> 1 </div> <div class="cp_leftnav"> 2 </div> <div class="cp_leftnav"> 3 </div> <div class="cp_leftnav"> 4 </div> <div class="cp_leftnav"> 5 </div> <div class="cp_leftnav"> 6 </div> <div class="cp_leftnav"> 7 </div> </div> <div class="cp_right left"> <div class="cp_rightcont clearfix"> 1 </div> <div class="cp_rightcont clearfix"> 2 </div> <div class="cp_rightcont clearfix"> 3 </div> <div class="cp_rightcont clearfix"> 4 </div> <div class="cp_rightcont clearfix"> 5 </div> <div class="cp_rightcont clearfix"> 6 </div> <div class="cp_rightcont clearfix"> 7 </div> </div> </div> </body> </html> <script type="text/javascript"> var h2 = 0; for (var i = 0; i < 7; i++) { var h = $('.cp_rightcont').eq(i).height(); h2 = h2 + h; } for (var i = 0; i < 7; i++) { // alert('a'); $('.cp_right .cp_rightcont').eq(i).css('top', i * 156 + 'px').css('z-index', i + 1); // alert('a'); } $('.cp_left div').click(function() { var index = $(this).index(); $(this).addClass("cp_leftnavact").siblings('div').removeClass("cp_leftnavact"); $('.chanpin_cont').eq(index).show().siblings('.chanpin_cont').hide(); for (var i = 0; i < 7; i++) { if (!$(".cp_right .cp_rightcont").eq(i).is(":animated")) { //元素不处于动画中执行。 if (i < index) { $('.cp_right .cp_rightcont').eq(i).animate({ top: ((i - index) + 7) * 156 + "px" }, 700, 'swing'); } if (i >= index) { $('.cp_right .cp_rightcont').eq(i).animate({ top: (i - index) * 156 + "px" }, 700, 'swing'); } } } }); </script>
相关文章推荐
- js清除cookie
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
- 数据库按照指定顺序查询显示
- 分享经济,营造优雅便利的生活方式
- Android Matrix详解
- 内核文件打开读写操作代码
- git - Git远程操作详解
- sicily 1008. Robot
- UI控件监听
- 如何将域名指向本地服务器
- Makefile 初学
- java 正则(3) matches() / find() / lookingAt / start end / replaceAll / appendReplacement / group(int)
- 防止租用服务器数据丢失的方法
- [Python]网络爬虫(三):异常的处理和HTTP状态码的分类
- python小点心--globals函数
- 第1章第2节练习题8 奇偶拆分单链表
- Yocto开发笔记之《驱动调试-GPS数据采集》(QQ交流群:519230208)
- android:inputType参数类型说明
- Unity 3D 离线协议
- asp.net生成N组指定位数随机数都一样的解决办法