jQuery实现楼梯
2016-06-07 19:17
495 查看
用jQuery找到文档中的相应的div的top值,在赋值就可以实现楼梯效果了
</pre><pre name="code" class="html" style="color: rgb(43, 126, 195); font-size: 15px;"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery.js"></script> <style type="text/css"> #wra div{ width: 1028px; height: 726px; text-align: center; font-size: 100PX; line-height:726px; } #wra #div1{ background: red; } #wra #div2{ background: oldlace; } #wra #div3{ background: palegreen; } #wrap{ width: 100px; height: 300px; position: fixed; left: 1000px; top: 300px; background: oldlace; } #wrap div{ width:100px ; height: 100px; text-align: center; line-height: 100px; } </style> </head> <body> <div id="wra"> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> <div id="div4">div4</div> </div> <div id="wrap"> <div >1</div> <div >2</div> <div >3</div> </div> </body> <script type="text/javascript"> $(function(){ $('#wrap div').click(function(){ $(document).scrollTop($('#wra').children().eq($(this).index()).offset().top); }) }) </script> </html>
相关文章推荐
- jquery 变量和原生js变量的关系
- JqueryForm表单元素取值赋值的各种用法
- 选项卡jQuery实现
- jquery 获取 动态input等元素的id
- Jquery实现如何关闭离开页面时提醒
- Jquery-1实现简单的复选框删除增加操作
- jquery实现滚动到页面底部时无限加载内容的代码
- jquery控制复选框
- jquery为多个元素添加事件
- 11个好用的jQuery拖拽拖放插件
- [转]Hide or Remove jquery ui tab based on condition
- jQuery获取表格中一行的值和获取重复ID的值
- jquery给easyui-window的title赋值
- jquery实现返回顶部、底部功能
- 基于jQuery下拉选择框插件支持单选多选功能代码
- jQuery原理系列-css选择器的简单实现
- jQuery offset,position,offsetParent,scrollLeft,scrollTop html控件定位 css position
- jQuery深入之源码解析(四)——分离构造器
- web前端复习(一):jquery实现轮播
- jQuery 如何先创建、再修改、后添加DOM元素