导航原理小白求帮忙分析。

djkloop555 2016-07-29 07:51:04
http://huil.com.cn/


今天浏览网站看到的这个想问下各位大神这个网页的导航的原理是什么？
我用fullpage那个插件只能把ul li那个做出来 但是我看这个网站上面还动态加载了个<i>标签
这个标签的实现原理是什么


截图不全 以防万一说是打广告嫌疑了- -。

...全文
128 10 打赏 收藏 转发到动态 举报
写回复
用AI写文章
10 条回复
切换为时间正序
请发表友善的回复…
发表回复
djkloop555 2016-08-02
  • 打赏
  • 举报
 回复
......好多啊。我以为很简单呢.原来还要封装啊。。 我再仔细看看您给的代码~ 帖子结过了给不了分了。。。下次吧- -。
cocotsau 2016-08-02
  • 打赏
  • 举报
 回复
我感觉是不是你的逻辑错了，请看下面的代码 

//升级版，自动计算顶部标记i的宽度和位置
<style>
html,body{width:100%;height: 100%;}
body,ul,li{margin:0;padding:0;}
body{background-color: #ccc;font-family: "Microsoft Yahei";}
ul{list-style-type:none;}
.list-inline{
	width: 800px;
	margin: 0 auto;
	position: relative;
	padding-top: 30px;
	overflow: hidden;
}
.list-inline>li{float: left;margin: 0 15px;text-align: center;cursor: pointer;}
.list-inline>li:hover a{color:red;}
.list-inline>li.active a{color:red;}
.list-inline>.line{
	position:absolute;
	top:0;
	left:15px;
	height:3px;
	background-color:red;
	display:block;
	transition: left .3s ease-in-out,width .3s ease-in-out;
}
</style>
<ul class="list-inline">
	<li class="active"><a>首页</a></li>
	<li><a>业务咨询</a></li>
	<li><a>案例</a></li>
	<li><a>客户</a></li>
	<li><a>品质</a></li>
	<li><a>增值</a></li>
	<li><a>关于产品的介绍</a></li>
	<li><a>联系我们</a></li>
	<i class="line"></i>
</ul>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {

	function getLeftW(nodes,index){//封装一个函数来计算i的left值
		var totalW = 0;
		if(index > nodes.length)return;
		for(var i=0;i<index;i++){
			totalW += $(nodes).eq(i).width()
			+ parseInt($(nodes).eq(i).css("marginLeft"))
			+ parseInt($(nodes).eq(i).css("marginRight"));
		}
		return totalW;
	}
	var liNodes = $(".list-inline>li"),
		list_active = $(".list-inline>li.active");
	$(".list-inline>.line").css({//初始化i的宽度和位置
		width: list_active.width(),
		left:  parseInt(list_active.css("marginLeft"))
	})
	liNodes.on("mouseover", function() {
        var index = $(this).prevAll().size(),
       		lineWidth = $(this).width();
        $(".list-inline>.line").css({
        	width: lineWidth,
            left: getLeftW(liNodes,index) + parseInt($(this).css("marginLeft"))
        });
    })

	$(".list-inline").on("mouseout", function() {
        var index = $(this).find("li.active").prevAll().size();
        $(".list-inline>.line").css({
        	width: $(liNodes).eq(index).width(),
            left: getLeftW(liNodes,index)
            + parseInt($(liNodes).eq(index).css("marginLeft"))
        });
    })

})
</script>
djkloop555 2016-08-02
  • 打赏
  • 举报
 回复
是不是作用域的问题。。。[img=https://forum.csdn.net/PointForum/ui/scripts/csdn/Plugin/003/monkey/19.gif][/img
$(".list-inline>li").on("mouseover", function() {//鼠标移入
                var index = $(this).prevAll().size();//计算出当前li节点的索引
]我alert第二个函数里面的那个index 没反应- -。
djkloop555 2016-08-02
  • 打赏
  • 举报
 回复 
<script type="text/javascript">
$(function() {
	 $('.list-inline li').each(function(){
	 	 var index = $(this).prevAll().size();
		 var iw = $(this).width();
		 var all_list = $(".list-inline>li").eq(index),//li节点
         perWidth = all_list.width(iw) + parseInt(all_list.css("marginLeft")) + parseInt(all_list.css("marginRight")),//li节点的宽度
         list_margin_left = parseInt(all_list.css("marginLeft"));
         
         

	},function(){
	$(".list-inline>li").on("mouseover", function() {//鼠标移入
	        	var index = $(this).prevAll().size();//计算出当前li节点的索引
	$(".list-inline>.line").css({
		        width : perWidth * index + list_margin_left,
	            left: perWidth * index + list_margin_left//计算出节点i移动的目标位置
	     });
    })
		
    $(".list-inline").on("mouseout", function() {//鼠标移出
        var index = $(this).find("li.active").prevAll().size();//计算出当前li.active节点的索引
        $(".list-inline>.line").css({
            left: perWidth * index + list_margin_left//当鼠标移出导航，节点i回到初始的位置
        });
    })
	})//li节点的左外边距
})
</script>
cocotsau 2016-07-30
  • 打赏
  • 举报
 回复
鼠标移动到导航上面的时候，计算位置，然后控制节点i移动到相应位置
djkloop555 2016-07-30
  • 打赏
  • 举报
 回复
谢谢~大神~
cocotsau 2016-07-30
  • 打赏
  • 举报
 回复 

//test demo

<style>
html,body{width:100%;height: 100%;}
body,ul,li{margin:0;padding:0;}
body{background-color: #ccc;font-family: "Microsoft Yahei";}
ul{list-style-type:none;}
.list-inline{width: 800px;margin: 0 auto;position: relative;padding-top: 30px;overflow: hidden;}
.list-inline>li{float: left;width: 50px;margin: 0 15px;text-align: center;cursor: pointer;}
.list-inline>li:hover a{color:red;}
.list-inline>li.active a{color:red;}
.list-inline>.line{
	position:absolute;
	top:0;
	left:15px;
	height:3px;
	width:50px;
	background-color:red;
	display:block;
	transition: left .3s ease-in-out;
}
</style>
<ul class="list-inline">
	<li class="active"><a>首页</a></li>
	<li><a>业务</a></li>
	<li><a>案例</a></li>
	<li><a>客户</a></li>
	<li><a>品质</a></li>
	<li><a>增值</a></li>
	<li><a>关于</a></li>
	<li><a>联系</a></li>
	<i class="line"></i>
</ul>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
$(function() {
	var first_list = $(".list-inline>li").eq(0),//第一个li节点
		perWidth = first_list.width()
		+ parseInt(first_list.css("marginLeft"))
		+ parseInt(first_list.css("marginRight")),//li节点的宽度，假设所有节点的宽度相等
		list_margin_left = parseInt(first_list.css("marginLeft"));//li节点的左外边距

	$(".list-inline>li").on("mouseover", function() {//鼠标移入
		var index = $(this).prevAll().size();//计算出当前li节点的索引
		$(".list-inline>.line").css({
			left: perWidth * index + list_margin_left//计算出节点i移动的目标位置
		});
	})
	$(".list-inline").on("mouseout", function() {//鼠标移出
		var index = $(this).find("li.active").prevAll().size();//计算出当前li.active节点的索引
		$(".list-inline>.line").css({
			left: perWidth * index + list_margin_left//当鼠标移出导航，节点i回到初始的位置
		});
	})
})
</script>
cocotsau 2016-07-30
  • 打赏
  • 举报
 回复
引用 3楼我是你的主体 的回复:
要设置一个index么？
原网页应该是一个基于jquery的插件，逻辑就是我楼上讲的，正好有空，帮你写个demo吧
djkloop555 2016-07-30
  • 打赏
  • 举报
 回复
要设置一个index么？
djkloop555 2016-07-29
  • 打赏
  • 举报
 回复
就是我的目的就是想要跟他弄出了一个差不多样子的导航，希望哪位大神给点思路或者小例子也行。。~
数据分析小白入门指南
数据分析的目的是把隐藏在一大批看来杂乱无章的数据中的信息集中和提炼出来，从而找出所研究对象的内在规律。在实际应用中，数据分析可帮助人们做出判断，以便采取适当行动。数据分析是有组织有目的地收集数据、分析数据，使之成为信息的过程。这一过程是质量管理体系的支持过程。在产品的整个寿命周期，包括从市场调研到售后服务和最终处置的各个过程都需要适当运用数据分析过程，以提升有效性。例如设计人员在开始一个新的设计以前，要通过广泛的设计调查，分析所得数据以判定设计方向，因此数据分析在工业设计中具有极其重要的地位。作为小白专享的课程，李宁老师深入浅出的介绍数据分析定义、流程、应用等，为同学们推开大门，打下坚实基础。
计算机视觉基础概念、运行原理和应用案例详解
点击上方“小白学视觉”，选择加"星标"或“置顶”重磅干货，第一时间送达这是一篇计算机视觉入门指南，从概念、原理、用例等角度介绍了计算机视觉。「机器能够模拟人类视觉系统」的幻想已经过时了。自 1960 年代第一批学术论文出现以来，计算机视觉已经走了很远，现代系统已经出现，且它们可以集成到移动应用中。今天，由于其广泛应用和巨大潜力，计算机视觉成为最热的人工智能和机器学习子领域...
小白如何学鸿蒙开发？
鸿蒙系统开发作为当下的一个风口，对于有志于投身技术领域的小白来说是一个难得的机遇。通过深入了解鸿蒙系统的技术优势和市场前景，你将能够做出明智的选择。记住，站在风口上，猪都能飞起来，而掌握鸿蒙开发技能，或许就是你起飞的翅膀。现在就开始行动吧！
原生HTML+CSS+JS制作自己的导航主页，35岁学习web前端开发
外链图片转存中…(img-ncrhayqF-1712014882034)][外链图片转存中…(img-OsSGhsVF-1712014882035)][外链图片转存中…(img-vVTAif2Z-1712014882035)][外链图片转存中…(img-a3s7coUz-1712014882036)][外链图片转存中…(img-76z2oKqT-1712014882036)][外链图片转存中…(img-PL7RLkMr-1712014882036)]
小白如何学鸿蒙开发？，架构 面试
因为Android 应用层开发的市场就是一个很好的例子，十几年前，各路开发一拥而上，后续有陆续转行，而且现在应用市场基本已饱和，成了定局，基本不会出现以前那种一天上线十几、二十个APP应用上线的情况出现，所以大家不要局限于鸿蒙应用层了。对鸿蒙了解的比较早的小伙伴估计有些已经把基础语言部分已经学完，但后续的学习却没有找到正确的学习方向，为此专门邀请了码牛课堂的几位大佬帮忙整理下面这份学习路线规划，针对了不同的阶段需要学习些什么？经历了前面两个阶段深入的了解，打好了牢固的基础，下面阶段就是学习。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章