基于superslide的导航栏 效果切换
2024-04-12 17:42:03
# 1、SuperSlide - 带"更多"切换
- 1、悬浮切换
- 1、引用jQuery.js 和 jquery.SuperSlide.js
- 2、引入css
- 3、HTML部分
- 4、js部分 调用SuperSlide
- 1、引用jQuery.js 和 jquery.SuperSlide.js
- 2、基于http://www.edongeejiao.cn/灵感来源的效果
- 2、css部分
- 3、HTML部分
- 4、js部分 调用SuperSlide
1、悬浮切换
1、引用jQuery.js 和 jquery.SuperSlide.js
效果图预览：
<script type="text/javascript" src="../../jquery1.42.min.js"></script>
<script type="text/javascript" src="../../jquery.SuperSlide.2.1.1.js"></script>
2、引入css
<style type="text/css">/* css 重置 */*{margin:0; padding:0; list-style:none; }body{ background:#fff; font:normal 12px/22px 宋体; }img{ border:0; }a{ text-decoration:none; color:#333; }a:hover{ color:#1974A1; }/* 以上是CSS通用代码*/.js{width:90%; margin:10px auto 0 auto; }.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }.js p span{ float:right; }.js p span a{ color:#f00; text-decoration:underline; }.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }/* 本例子css */.hasMoreTab{ width:350px; font-family:"Microsoft YaHei"; border:1px solid #C8D1D5; }.hasMoreTab .hd{ line-height:24px; height:24px; border-bottom:1px solid #C8D1D5; background:url(images/btn_bg.gif) repeat-x; position:relative; padding-right:10px; }.hasMoreTab .hd .more{ float:right; }.hasMoreTab .hd ul{ z-index:5; position:absolute; height:26px; overflow:hidden; zoom:1; }.hasMoreTab .hd li{ float:left; padding:0 10px; cursor:pointer; margin-left:-1px; }.hasMoreTab .hd li.on{ font-weight:bold; height:25px; line-height:25px; background:#fff; border:1px solid #C8D1D5; border-top:0; border-bottom:1px solid #fff; font-weight:bold; color:#c00; }.hasMoreTab .bd{ padding:10px; clear:both; position:relative; }.hasMoreTab .bd h2{ font-size:14px; }.hasMoreTab .bd p{ color:#999; }.hasMoreTab .bd p a{ color:#c00; }.hasMoreTab .bd ul a{ color:#3E78B3; }</style>
3、HTML部分
<style type="text/css">/* css 重置 */*{margin:0; padding:0; list-style:none; }body{ background:#fff; font:normal 12px/22px 宋体; }img{ border:0; }a{ text-decoration:none; color:#333; }a:hover{ color:#1974A1; }.js{width:90%; margin:10px auto 0 auto; }.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }.js p span{ float:right; }.js p span a{ color:#f00; text-decoration:underline; }.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }/* 本例子css */.hasMoreTab{ width:350px; font-family:"Microsoft YaHei"; border:1px solid #C8D1D5; }.hasMoreTab .hd{ line-height:24px; height:24px; border-bottom:1px solid #C8D1D5; background:url(images/btn_bg.gif) repeat-x; position:relative; padding-right:10px; }.hasMoreTab .hd .more{ float:right; }.hasMoreTab .hd ul{ z-index:5; position:absolute; height:26px; overflow:hidden; zoom:1; }.hasMoreTab .hd li{ float:left; padding:0 10px; cursor:pointer; margin-left:-1px; }.hasMoreTab .hd li.on{ font-weight:bold; height:25px; line-height:25px; background:#fff; border:1px solid #C8D1D5; border-top:0; border-bottom:1px solid #fff; font-weight:bold; color:#c00; }.hasMoreTab .bd{ padding:10px; clear:both; position:relative; }.hasMoreTab .bd h2{ font-size:14px; }.hasMoreTab .bd p{ color:#999; }.hasMoreTab .bd p a{ color:#c00; }.hasMoreTab .bd ul a{ color:#3E78B3; }</style><div class="hasMoreTab" style="margin:0 auto"><div class="hd"><span class="more"><a href="#" target="_blank">更多1></a><a href="#" target="_blank">更多2></a><a href="#" target="_blank">更多3></a></span><ul><li>公司公告</li><li>媒体关注</li><li>产品动态</li></ul></div><div class="bd"><div class="conWrap"><div class="con"><h2>2012中秋、国庆节放假通知</h2><p>中秋、国庆双节临近，新网互联全体员工在此预祝各位亲爱的客户与<a href="#">[详细]</a></p><ul><li><a href="#" target="_blank">国内中英文域名注册系统升级维护通知</a></li><li><a href="#" target="_blank">有关2012年发票结余的通知</a></li><li><a href="#" target="_blank">中国域名拆分暨“英文/数字.中国”域名</a></li></ul></div><div class="con"><h2>“英文/数字.中国”域名优先升级上线</h2><p>接中国互联网络信息中心（CNNIC）通知，自2012年10月29日起，CNN<a href="#">[详细]</a></p><ul><li><a href="#" target="_blank">中国旅游客户端引领未来旅游行业信息化</a></li><li><a href="#" target="_blank">云邮四种终端访问方式 突破传统收发邮件</a></li><li><a href="#" target="_blank">云邮防垃圾反病毒网关 极致保护企业邮件</a></li></ul></div><div class="con"><h2>CNNIC关于“英文/数字.中国”域名优先</h2><p>接中国互联网络信息中心（CNNIC）通知，自2012年10月29日起，CNN<a href="#">[详细]</a></p><ul><li><a href="#" target="_blank">“.CN”“.中国”域名今起向自然人开放</a></li><li><a href="#" target="_blank">邮箱升级：[云邮]第二代企业邮箱 重装上</a></li><li><a href="#" target="_blank">关于尽快完成域名注册信息核对的通知</a></li></ul></div></div></div></div>4、js部分 调用SuperSlide
<script type="text/javascript">jQuery(".hasMoreTab").slide({ mainCell:".conWrap", targetCell:".more a", effect:"fold"});</script>
1、引用jQuery.js 和 jquery.SuperSlide.js
2、基于http://www.edongeejiao.cn/灵感来源的效果
效果图预览：
<script type="text/javascript" src="../../jquery1.42.min.js"></script>
<script type="text/javascript" src="../../jquery.SuperSlide.2.1.1.js"></script>
2、css部分
<style type="text/css">/* css 重置 */*{margin:0; padding:0; list-style:none; }body{ background:#fff; font:normal 12px/22px 宋体; }img{ border:0; }a{ text-decoration:none; color:#333; }a:hover{ color:#1974A1; }.js{width:90%; margin:10px auto 0 auto; }.js p{ padding:5px 0; font-weight:bold; overflow:hidden; }.js p span{ float:right; }.js p span a{ color:#f00; text-decoration:underline; }.js textarea{ height:100px; width:98%; padding:5px; border:1px solid #ccc; border-top:2px solid #aaa; border-left:2px solid #aaa; }/* 本例子css */.tabRank{ width:250px; margin:10px auto; border:1px solid #d8d8d8; }.tabRank .hd{ background-color:#e2e2e2; height:29px; line-height:28px; border-bottom:none;}.tabRank .hd h3 { float:left; width:124px; overflow:hidden; text-align:center;}.tabRank .hd h3 a { color:#333; font-size:14px; font-weight:bold;}.tabRank .hd h3.on { background-color:#f9f9f9; height:29px;}.tabRank .hd h3.on a { display:block; color:#e72410;}.tabRank .bd { height:424px; background-color:#f9f9f9; clear:both;}.tabRank .bd ul { padding:10px 8px;}.tabRank .bd .ulList li { border-bottom:1px solid #e5e5e5; height:42px; line-height:42px; width:232px !important;}.tabRank .bd .ulList li a { color:#333;}.tabRank .bd .ulList li .num { font-size:14px; font-weight:bold; color:#333; background:url(images/icons.png) no-repeat -50px 0; width:24px; height:20px; display:block; float:left; line-height:17px; text-align:center; margin-top:13px; padding-right:6px;}.tabRank .bd .ulList li.t .num { background-position:0 0; color:#fff;}.tabRank .bd .ulList li.t {line-height:42px !important;}.tabRank .bd .ulList li.on img {width:150px; height:94px; padding:4px; border:1px solid #d0d0d0; background-color:#fff;}.tabRank .bd .ulList li .pubtext {color:#777;display:none; }.tabRank .bd .ulList li .pubtext strong {color:#E72410;}.tabRank .bd .ulList li .pubtext a {color:#E72410;}.tabRank .bd .ulList li .pubpic{display:none;}.tabRank .bd .ulList li .pubtitle p{display:none;}.tabRank .bd .ulList li.on{height:180px;text-align:center;line-height:22px !important;}.tabRank .bd .ulList li.on .pubpic{display:block;padding-top:5px;}.tabRank .bd .ulList li.on .pubtext {color:#777;display:block; }.tabRank .bd .ulList li.on .pubtitle p{display:block;}.tabRank .bd .ulList2 .pic { float:left;}.tabRank .bd .ulList2 .con {float:right; width:160px;} .tabRank .bd .ulList2 li { clear:both; padding-top:8px;height:58px;border-bottom:1px solid #E5E5E5;}.tabRank .bd .ulList2 img {width:57px; height:47px; padding:1px; border:1px solid #d0d0d0; background-color:#fff; float:left;}</style>
3、HTML部分
<dl class="tabRank" id="tabRank"><dt class="hd"><h3 class="on"><a href="#">会员活动</a></h3><h3><a href="#">经验分享</a></h3></dt><dd class="bd"><ul class="ulList"><li class="t on"><span class="num">1</span><div class="c "><div class="pubpic"><a href="#"><img src="data:images/1.jpg"></a></div><div class="pubtitle"><a href="#">品桃花，赢好礼</a><p>2013/02/15—2013/03/15</p></div></div></li><li class="t"><span class="num">2</span><div class="c "><div class="pubpic"><a href="#"><img src="data:images/2.jpg"></a></div><div class="pubtitle"><a href="#">中华儿女孝心行动---“熬胶孝敬..</a><p>2012/02/02—2012/02/28</p></div></div></li><li class="t"><span class="num">3</span><div class="c "><div class="pubpic"><a href="#"><img src="data:images/3.jpg"></a></div><div class="pubtitle"><a href="#">中国贫血关爱行动——复方阿胶浆..</a><p>2012/09/01—2012/09/30</p></div></div></li><li><span class="num">4</span><div class="c"><div class="pubpic"><a href="#"><img src="data:images/4.jpg"></a></div><div class="pubtitle"><a href="#">阿胶糕进厨房，健康美丽吃出来</a><p>2012/10/15—2012/12/31</p></div></div></li><li><span class="num">5</span><div class="c "><div class="pubpic"><a href="#"><img src="data:images/5.jpg"></a></div><div class="pubtitle"><a href="#">桃花姬阿胶糕，阿胶达人免费申领..</a><p>2011/04/01—2011/04/25</p></div></li><li class=""><span class="num">6</span><div class="c "><div class="pubpic"><a href="#"><img src="data:images/6.jpg"></a></div><div class="pubtitle"><a href="#">秋冬滋补进行时，免费品尝东阿阿..</a><p>2012/09/16—2012/11/30</p></div></div></li></ul><ul class="ulList2"><li class="t"><div class="pic"><img src="data:images/1.jpg"></div><div class="con"><div class="title"><a href="#" >解密杨贵妃的倾城容颜，探寻阿胶文化的源远流长！</a></div></div></li><li class="n"><div class="pic"><img src="data:images/1.jpg"></div><div class="con"><div class="title"><a href="#" >阿胶文化之旅，探寻阿胶滋补的秘密！！</a></div></div></li><li class="n"><div class="pic"><img src="data:images/1.jpg"></div><div class="con"><div class="title"><a href="#" >天天吃鸡蛋不利女性健康</a></div></div></li><li class="n"><div class="pic"><img src="data:images/1.jpg"></div><div class="con"><div class="title"><a href="#" >樱桃可治疗贫血带来的妇科病</a></div></div></li><li class="n"><div class="pic"><img src="data:images/1.jpg"></div><div class="con"><div class="title"><a href="#" >桃花姬——吃出好身体，吃出好容颜</a></div></div></li><li class="n last"><div class="pic"><img src="data:images/1.jpg"></div><div class="con"><div class="title"><a href="#" >桃花伊面春常驻，阿胶养容润枯颜</a></div></div></li></ul></dd></dl>4、js部分 调用SuperSlide
<script type="text/javascript">/* 详简切换通过添加on类名和css控制 */$("#tabRank li").hover(function(){ $(this).addClass("on").siblings().removeClass("on")},function(){ });/* Tab切换 */$("#tabRank").slide({ titCell:"dt h3", mainCell:"dd",autoPlay:false,effect:"left",delayTime:300 });</script>
基于superslide的导航栏 效果切换相关推荐
- php点击切换图片的底部导航,如何优雅地使用BottomNavigationView实现底部导航栏+fragment切换效果...
BottomNavigationView.jpeg 引言 之前总是使用RadioButton+ViewPager来实现底部导航栏+fragment切换效果,总是繁琐地还需要写ViewPager的适配器 ...
- Android个性导航栏效果
分享一个导航栏效果的demo 源码下载 github 动图太快了, 效果就是 选中的tab永远都在中间的位置 可以无限循环滚动切换 源码下载 github
- Bootstrap网格系统工作原理、网格系统前缀、利用网格系统实现导航栏效果、栅格系统中的列嵌套、栅格系统中的列偏移、栅格系统中的自动布局列、栅格系统中的重排序、模仿淘宝网站商品展示的页面效果
Bootstrap 网格系统 1.Bootstrap网格系统工作原理 Bootstrap的网格系统是指将页面布局划分为等宽的列.随着屏幕或视口尺寸的增加,系统会自动分为1~12列. 网格系统用于通过一 ...
- java写左侧导航栏界面,jQuery----左侧导航栏面板切换实现
页面运行结果: 点击曹操 点击刘备 点击孙权 原图 需求说明:原图如上所示,点击一方诸侯的时候,显示该诸侯手下猛将,其他诸侯手下猛将隐藏 页面结构: 实现思路: ①给大的li注册鼠标点击事件 当鼠标点 ...
- Android导航栏高斯模糊,iOS 顶部高斯模糊导航栏 + 页面内容穿越底部导航栏效果...
(1)如果是使用系统导航栏则设置其translucent属性即可: [self.navigationController.navigationBar setBackgroundImage:[UIIma ...
- android仿咸鱼底部导航栏,Flutter沉浸式状态栏/AppBar导航栏/仿咸鱼底部凸起导航栏效果...
如下图:状态栏是指android手机顶部显示手机状态信息的位置. android 自4.4开始新加入透明状态栏功能,状态栏可以自定义颜色背景,使titlebar能够和状态栏融为一体,增加沉浸感. 如上 ...
- html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下 最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
- html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
- Android 底部导航栏+页面切换
lzyprime 博客 (github) 更新时间: 2020.12.21 创建时间:2020.11.25 qq及邮箱:2383518170 kotlin & android 笔记 更新 20 ...
- html如何设置中英导航,js怎么在导航栏互相切换中英文
这次给大家带来js怎么在导航栏互相切换中英文,js在导航栏互相切换中英文的注意事项有哪些,下面就是实战案例,一起来看一下. ul的高度为li的一半,ul{overflow:hidden} li:hov ...
最新文章
- Expectation Maximization-EM(期望最大化)-算法以及源码
- 分治算法-02凸包问题
- Autofac 依赖注入框架
- mysql参数配置调优详解配置（1）
- JVM整体架构与调优参数说明
- bz2005 2005: [Noi2010]能量采集 数学题
- 使用RPM安装Mysql5.5找不到配置文件My.cnf
- 解剖 RxJava 之过滤操作符
- 进阶13 Lambda表达式
- Thinkphp双轨直销系统源码
- u3d快速入门图文教程
- 关于华为设备远程登录telnet和ssh的配置
- 断点续传（视频进度条拖动以及flv.js需要断点续传）
- nuxt 引入第三方字体、艺术字效果
- JavaWebJavaEE重要基础知识
- 如何在网页中加入一条竖线
- 电脑扩展显示器启动后连接不上，需要重启才能连接
- 港股IPO，游艇巨头法拉帝的新市场、新机会
- 一篇文章带你玩转C语言基础语法。2：数据类型。千字总结
- Http1.0 , SPDY , Http2.0