html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法
本文实例讲述了jQuery实现Tab菜单滚动切换的方法。分享给大家供大家参考。具体如下:
这是一款jQuery实现让你的Tab菜单滚动的代码,先运行一下看看效果咋样?是不是超不错,让你的网页变得灵动起来,不再静止,学习jquery的朋友也可作为范例来参考吧.
运行效果截图如下:
在线演示地址如下:
具体代码如下:
/p>
"http://www.w3.org/TR/html4/strict.dtd">
jQuery 让你的Tab菜单滚动的代码
body {
font-family:arial;
font-size:12px;
}
a {
color:#333;
text-decoration:none;
display:block;
}
a:hover {
color:#888;
text-decoration:none;
}
#moving_tab {
overflow:hidden;
width:300px;
position:relative
border:1px solid #ccc;
margin:0 auto;
}
#moving_tab .tabs {
position:relative;
height:30px;
padding-top:5px;
cursor:default;
}
#moving_tab .tabs .item {
position:relative;
z-index:10;
float:left;
display:block;
width:150px;
text-align:center;
font-size:14px;
font-weight:700;
}
#moving_tab .tabs .lava {
position:absolute;
top:0; left:0;
z-index:0;
width:150px;
height:30px;
background:#abe3eb;
}
#moving_tab .content {
position:relative;
overflow:hidden;
background:#abe3eb;
border-top:1px solid #d9fafa;
}
#moving_tab .panel {
position:relative;
width:600px;
}
#moving_tab .panel ul {
float:left;
width:300px;
padding:0;
margin:0;
list-style:none;
}
#moving_tab .panel ul li {
padding:5px 0 5px 10px;
border-bottom:1px dotted #fff;
}
$(document).ready(function () {
$('.lava').css({left:$('span.item:first').position()['left']});
$('.item').mouseover(function () {
$('.lava').stop().animate({left:$(this).position()['left']}, {duration:200});
$('.panel').stop().animate({left:$(this).position()['left'] * (-2)}, {duration:200});
});
});
Popular Posts
Recent Posts
- Panel 01 Item 01
- Panel 01 Item 02
- Panel 01 Item 03
- Panel 01 Item 04
- Panel 01 Item 05
- Panel 02 Item 01
- Panel 02 Item 02
- Panel 02 Item 03
- Panel 02 Item 04
- Panel 02 Item 05
希望本文所述对大家的jQuery程序设计有所帮助。
html上下滚动切换顶端tab,jQuery实现Tab菜单滚动切换的方法相关推荐
- 水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
- html屏幕滚动事件监听,JQuery监听页面滚动事件
1.当前滚动的地方的窗口顶端到整个页面顶端的距离: var scrollTop = $(window).scrollTop(); 2.获取指定元素的页面位置: $(obj).offset().top; ...
- html土图片滚动特效,jQuery实现图片左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止 ...
- 一个非常超级可爱的滚动到顶端(Back to top)的jQuery插件- jQuery Back to Top
日期:2011/11/17 来源:GBin1.com 今天介绍一个非常可爱漂亮的滚动到顶端的插件,无需设置.它能快速的将页面里的元素添加滚动到顶端的功能.而且只在滚动时才出现,当滚动到顶端自动消失. ...
- 基于jquery的tab切换
一款基于jquery的tab切换哦 转载于:https://blog.51cto.com/11670972/1943140
- jQuery特效Tab切换栏选项卡demo
在建站过程中,有时候需要有效利用页面空间,需要将多个模块的链接.图片.视频等网站资源放在一个div中,实现点击或者滑动实现展示多个模块,多用在侧边栏展示网站最新更新.最热文章,或者是展示顶级频道页面下 ...
- html tab切换jquery,jQuery版Tab标签切换
鼠标移入Tab的时候会有一定的延时才会切换到相应的项,防止用户不经意的鼠标操作,点击相应的项也可以切换 效果图: 源代码: Tab标签切换 body{ background:#fff;} *{ mar ...
- jQuery实现自动左右滚动效果的代码实例
2019独角兽企业重金招聘Python工程师标准>>> jQuery实现自动左右滚动效果的代码实例 思路: 点击滚动模式下,是为点击(向前/向后/数字)添加click事件,通过控制展 ...
- jquery实现的视差滚动教程(视差大背景效果)
视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验.作为今年网页设计的热点趋势,越来越多的网站应用了 这项技术.现在越来越多的网 ...
最新文章
- 隐藏SSID无线网络ID 你的无线网络真的安全吗?
- CRF++:一个 CRF 工具包
- 剑桥大学工程硕士的安排
- javascript中清空数组的两种方式
- 电脑反应慢卡怎么解决_电脑开不了机怎么解决?
- 机器学习实战-逻辑回归-19
- C# .net core 使用自定义的WebProxy
- c语言用命令行编译运行程序_使用C程序执行系统命令
- Redis面试 - 如何保证 redis 的高并发和高可用?
- [转]简明 Nginx Location Url 配置笔记
- Python_字符串
- linux配置NFS系统
- .Net Pet Shop 4 初探之一:初识PetShop4
- Hadoop启动jobhistoryserver
- 宝塔面板部署网易云api
- 毕向东java ppt下载_毕向东Java基础ppt课件
- Ansible之管理windows主机
- 使用Mybatis相关类生成sql语句
- QAxObject保存Excel表格
- Springboot物资发放管理系统
热门文章
- jert oracle 统计说明,Oracle JET简单入门(一)Oracle JET介绍
- http 路径 |_HTTP 请求與响应的格式及 curl 命令使用
- antd Table/ProList中rowClassName用法(补充记录)
- JS ES6中的箭头函数(Arrow Functions)使用
- 采访田飞师兄有感 ——by 李皈颖
- PAT_B_1012 数字分类 (有待改进)
- H3C 单区域OSPF配置示例二
- JavaScript DOM介绍
- 利用爬虫模拟网页微信wechat
- 实现字符串的编码转换,用以解决字符串乱码问题