为了账号安全,请及时绑定邮箱和手机立即绑定

求zen coding,dw或者notepad++或者sublime能用的都可以,万分感谢

求zen coding,dw或者notepad++或者sublime能用的都可以,万分感谢

2018-10-07 源自:网页定位导航特效 4-1 602 浏览 1 回答

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>网页定位</title>

<style>

*{

margin:0;

padding: 0;

}

body{

font-size: 12px;

line-height: 1.7;

}

li{

list-style: none;

}

#content{

width: 800px;

margin :0 auto;

padding: 20px;

}

#content h1{

color: #0088bb;

}

#content .item{

padding:20px;

margin-bottom: 20px;

border: 1px dotted #0088bb; 

}

#content .item h2{

font-size: 16px;

font-weight: bold;

border-bottom: 2px solid #0088bb;

margin-bottom: 10px;

}

#content .item li{

display: inline;

margin-right: 10px;

}

#content .item li a img{

width: 230px;

height: 230px;

border:none;

}

#menu{

position: fixed;

top:100px;

left: 50%;

margin-left: 400px;

width: 80px;

}


#menu ul li a{

display: block;

margin:5px 0;

font-size: 14px;

font-weight: bold;

color: #333;

width: 80px;

height: 50px;

line-height: 50px;

text-decoration: none;

text-align: center;

}


#menu ul li a:hover,

#menu ul li a.current{

color: #fff;

background: #0088bb;

}

</style>

<script src="https://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

<script>

/*运用JQuery实现


$(document).ready(function(){

//滚动条发生滚动

$(window).scroll(function(){


                  var top = $(document).scrollTop();

                  var menu = $("#menu");

                  var items = $("#content").find(".item");


                  var currentId = "";//当前所在的楼层id

                  items.each(function(){

                  var m = $(this);

                  var itemTop = m.offset().top;

                    if (top > itemTop -200) {

                         currentId = "#" + m.attr("id");

                    }else {

                    return false;

                    }

                  });

                  

                  //给相应的楼层的a设置current,取消其他链接的current

                  var currentLink = menu.find(".current");

                  if (currentId && currentLink.attr("href")!=currentId) {

                  currentLink.removeClass("current");

                  menu.find("[href=" + currentId + "]").addClass("current");

                  }

                  //console.log(top)

});

});

*/

//运用js原生代码


      //根据class name 获取元素

function getByClassName(obj, cls){

var elements = obj.getElementsByTagName("*");

var result = [];

for ( var i = 0;i< elements.length; i++) {

if (elements[i].className == cls) {

result.push(elements[i]);

   }

    }

return result;

}

function hasClass( obj, cls){

return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));

}


function removeClass( obj , cls){

if( hasClass( obj, cls )){

//remove

var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");

obj.className = obj.className.replace(reg, "");

}


}


function addClass( obj , cls ){

if( !hasClass( obj , cls)){

obj.className += " " +cls;

}

}





        window.onload = function(){

            window.onscroll = function(){


var top = document.documentElement?document.documentElement.scrollTop:document.body.scrollTop;


var menus = document.getElementById("menu").getElementsByTagName("a");


var items = getByClassName(document.getElementById("content"),"item");


var currentId = "";


for( var i=0; i< items.length; i++){

var _item = items[i];

var _itemTop = _item.offsetTop;

if (top >_itemTop -200) {

currentId = _item.id;

}else{

break;

}

}

if (currentId) {

//给正确的menu下的a元素class赋值

for (var j = 0; j <menus.length; j++) {

var _menu = menus[j];

var _href = _menu.href.split("#");


if( _href[_href.length - 1] != currentId ){

removeClass(_menu, "current");

} else{

addClass(_menu, "current");

}  

}

}

}

}

</script>

</head>

<body>

<div id="menu">

<ul>

<li><a href="#item1" class="current">1F 小猫</a></li>

<li><a href="#item2">2F 小狗</a></li>

<li><a href="#item3">3F 老虎</a></li>

<li><a href="#item4">4F 狮子</a></li>

<li><a href="#item5">5F 大象</a></li>

</ul>

</div>

<div id="content">

<h1>购物网</h1>


<div id="item1" class="item">

<h2>1F 小猫</h2>

<ul>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

<li><a href="#"><img src="1.jpg" alt=""/></a></li>

</ul>

</div>

<div id="item2" class="item">

<h2>2F 小狗</h2>

<ul>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

<li><a href="#"><img src="2.jpg" alt=""/></a></li>

</ul>

</div>

<div id="item3" class="item">

<h2>3F 老虎</h2>

<ul>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

<li><a href="#"><img src="3.jpg" alt=""/></a></li>

</ul>

</div>

<div id="item4" class="item">

<h2>4F 狮子</h2>

<ul>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

<li><a href="#"><img src="4.jpg" alt=""/></a></li>

</ul>

</div>

<div id="item5" class="item">

<h2>5F 大象</h2>

<ul>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

<li><a href="#"><img src="5.jpg" alt=""/></a></li>

</ul>

</div>

</div>

</body>

</html>


2018-10-11
回复 0

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信