基于superslide的导航栏 效果切换

最新推荐文章于 2024-04-17 10:01:50 发布
最新推荐文章于 2024-04-17 10:01:50 发布
阅读量777 收藏
点赞数
分类专栏： 前端实用插件 文章标签： javascript css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42250281/article/details/123369855
版权

# 1、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&gt;</a>
				<a href="#" target="_blank">更多2&gt;</a>
				<a href="#" target="_blank">更多3&gt;</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="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="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="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="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="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="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="images/1.jpg"></div><div class="con"><div class="title"><a href="#" >解密杨贵妃的倾城容颜，探寻阿胶文化的源远流长！</a></div></div></li>
						
						<li class="n"><div class="pic"><img src="images/1.jpg"></div><div class="con"><div class="title"><a href="#" >阿胶文化之旅，探寻阿胶滋补的秘密！！</a></div></div></li>
						
						<li class="n"><div class="pic"><img src="images/1.jpg"></div><div class="con"><div class="title"><a href="#" >天天吃鸡蛋不利女性健康</a></div></div></li>
						
						<li class="n"><div class="pic"><img src="images/1.jpg"></div><div class="con"><div class="title"><a href="#" >樱桃可治疗贫血带来的妇科病</a></div></div></li>
						
						<li class="n"><div class="pic"><img src="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="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>
四哥在努力
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
SuperSlide 知识点一
weixin_49982989的博客
02-17 501
SuperSlide 参数： 新手理解： 参数 版本 默认值 说明 type 2.1 slide 效果类型，可选"slide"||“menu”，引入type:“menu"专门处理菜单/导航效果 defaultPlay 2.1 true 默认是否执行效果（第一次运行是否执行效果）常用于导航/菜单 returnDefault 2.1 false 鼠标移出容器，是否返回默认状态，常用于导航/菜单 mouseOverStop 2.1 true 鼠标移到容器层（无缝滚动是mainCell）是否停止播放 playSta
js实现导航栏中英文切换效果
10-20
在JavaScript实现导航栏中英文切换效果的过程中，主要涉及到前端网页设计和交互的实现。这个功能通常用于多语言网站，使得用户能够轻松地在不同的语言版本之间进行切换。在这个示例中，虽然没有直接使用JavaScript来...
探索SuperSlide.js：一款轻量级的JavaScript滑动插件
最新发布
gitblog_00097的博客
04-17 426
探索SuperSlide.js：一款轻量级的JavaScript滑动插件 SuperSlide.jsA flexible, smooth, GPU accelerated sliding menu for your next PWA项目地址:https://gitcode.com/gh_mirrors/su/SuperSlide.js 项目简介 是一个由开发者 osrec 创建的高效、易用的Ja...
jquery.superslide.js使用方法
热门推荐
GQ_cyan的博客
12-10 2万+
一，superslide.js是轮播插件元素 二，必须参数设置（详细参数设置） 三，使用实例： SuperSlide - 实用焦点图 *{margin:0; padding:0; list-style:none; } body{ background:#fff; font:normal 12px/22px 宋体; } img{ bor
SuperSlide.js
huangbaokang的博客
07-01 2425
1、引用jQuery.js 和 jquery.SuperSlide.js 因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide <head> <script type="text/javascript" src="../jquery1.42.min.js"></script> <scr...
jQuery插件superslide.js源码片段分析记录
underdogs的博客
12-20 3808
//b为页面给slide()传参的对象{} return a.fn.slide.defaults = { type: "slide",//效果类型，可选"slide"||"menu"，引入type:"menu"专门处理菜单/导航效果 effect: "fade",//v1.0] fade：渐显； || top：上滚动；|| left：
纯CSS实现导航栏Tab切换效果
09-27
在当前网页设计中，实现Tab切换效果通常需要借助JavaScript等脚本语言，但是使用纯CSS同样能够完成这种效果。首先，要了解的关键概念是CSS3中的:target伪类。:target伪类是一个选择器，用于选取URL中ID与锚点匹配的...
JavaScript实现滑动导航栏效果
10-19
由于文档中并未完整展示JavaScript代码，这里我们将基于通常的做法来说明如何实现滑动导航栏的动态效果。在用户点击`.drop_down`元素时，我们需要通过JavaScript改变`.tabUl.clearFix`类的`display`属性值，以此来...
jQuery全屏页面滚动导航切换效果
06-05
**jQuery全屏页面滚动导航切换效果详解** 在网页设计中，全屏页面滚动导航是一种流行的交互方式，它能提供沉浸式的用户体验，使用户在浏览网站时感到更加舒适和流畅。结合jQuery实现的导航切换效果，可以提升网站的...
导航栏效果，实现简单的导航栏效果切换
06-01
在网页设计中，导航栏是不可或缺的一部分，它帮助用户轻松地在网站的各个部分之间进行切换。本项目旨在实现一个具有动画特效的简单导航栏效果，以提升用户体验。我们将主要探讨如何利用HTML、CSS和JavaScript这三种...
jquery基于SuperSlide 包含大部分标签切换、焦点图切换等效果的Demo
05-22
SuperSlide 是致力于实现网站统一特效调用的函数，能解决大部分标签切换、焦点图切换等效果，还能多个slide组合创造更多的效果。（兼容ie内核(包括无敌的ie6)、webkit内核、ff、opera等主流浏览器）。
jQuery基于SuperSlide制作响应式导航菜单和轮播图特效
06-05
jQuery基于SuperSlide插件制作的一款响应式导航菜单和轮播图特效，自适应PC端和移动端访问，PC端还有左侧分类菜单布局效果。
Android实现底部导航栏切换
02-01
1实现安卓底部导航栏切换及一个Activity多个Fragment 2 解决底部导航栏fragment切换时会反复加载网络数据，最终造成网络阻塞甚至崩溃的问题 3 去掉了BottomNavigationMenuView的默认动画效果
3D导航栏效果
07-14
3D导航栏效果的实现通常基于HTML5、CSS3以及JavaScript等前端技术。HTML5提供了更多的结构化元素，如用于定义导航链接，而CSS3则引入了新的选择器、过渡、动画和3D变换等功能，让设计师可以创建出复杂的动态效果。...
Android开发基于ScrollView实现的渐变导航栏效果示例
08-28
总的来说，实现基于ScrollView的渐变导航栏效果，主要步骤包括： 1. 自定义ScrollView并监听滚动事件。 2. 实现回调接口，处理滚动事件，动态调整导航栏的透明度。 3. 根据业务需求设置合适的高度阈值和透明度变化...
SuperSlide.js产品信息tabs切换
ICode联盟
08-30 110
SuperSlide.js产品信息tabs切换，jquery实现卡片信息轮播特效代码。
SuperSlide插件的用法
m0_52173534的博客
08-10 2975
SuperSlide是基于JQuery的一个轮播图插件，使用它可以便捷使用各种样式的轮播图 1.首先使用SuperSlide需要下载js文件 可以通过网址下载： http://www.superslide2.com/index.html 2.下载完成后解压，会有一个文件夹 3.将里面的js文件导入项目， 代码： <script src="js/SuperSlide2.1-demo-00/jquery1.42.min.js"></script> <script src="
使用SuperSlide 实现标签切换
weixin_30721077的博客
11-30 365
小颖之前还写过一篇jquery实现标签切换的文章 jquery实现Tab选项卡菜单 今天小颖逛博客园时看到了用SuperSlide 实现标签切换的文章，所以小颖就自己试了下，试了后发现SuperSlide真的很不错，只有一行js代码，哈哈哈，简单方便，下面跟着小颖学习起来！ 先看看效果图吧嘻嘻 目录： ············SuperSlide ············...
superslide.js 多种网页组合效果
cc蒲公英的博客
08-16 1494
简介 SuperSlide 致力于解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新。 网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等只需要一个SuperSlide即可解决！还可以多个SuperSlide组合创造更多效果哦~ （兼容包括ie6的绝大部分浏览器）    使用方法 参数：http://www.sup
基于Vue实现实现tab栏切换效果
05-31
好的，下面是基于Vue实现tab栏切换效果的代码： ```vue (item, index) in tabs" :key="index" :class="{ active: activeIndex === index }" @click="activeIndex = index">{{ item.title }} <slot></...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值