您的位置：首页 > 其它

南大软院大神养成计划第二十一天

2015-12-06 17:47 375 查看

代码来袭

<!DOCTYPE>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"

/>

<title>混合布局编程挑战</title>

</head>

<style type="text/css">

* {

margin: 0;

padding: 0;

}

body {

font-size: 12px;

line-height: 1.7;

background-color: #888;

margin:0; padding:0; font-size:30px; color:#fff }

.top{background-color:black;height:50px;}

.main{margin:auto;background-color:red;position:relative;}

.left{ background-color:blue;

float:left;width:200px;position:fixed;

top:100px;left:0;

}

.right{background-color:purple;float:right;

width:1000px;margin: 0 auto; padding-top: 100px;

padding-bottom: 300px;

}

.foot{background-color:orange;clear:both;height:50px;}

li {

list-style: none;

}

#content {

}

.right .item{

width: 100%;

height: 540px;

position: relative;

}

.right .item img {

position: absolute;

top:

100px;

left: 40px;

}

.right #item1 {

background: url

("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat

center top;

}

.right #item2 {

background: url

("http://img.mukewang.com/536c9ecd0001606d10000540.jpg") no-repeat

center top;

}

.right #item3 {

background: url

("http://img.mukewang.com/536c9f0a0001ccc310000540.jpg") no-repeat

center top;

}

.right #item4 {

background: url

("http://img.mukewang.com/536c9f6700012e9010000540.jpg") no-repeat

center top;

}

.right #item5 {

background: url

("http://img.mukewang.com/536c9f800001b28510000540.jpg") no-repeat

center top;

}

#menu{

}

.left h1 {

color: #fff;

font-size: 14px;

text-align: center;

background: #ee1111;

line-height: 30px;

}

.left ul li a {

display: block;

margin: 5px

0;

font-size: 12px;

color: #ccc;

width: 160px;

padding: 10px 20px;

text-

decoration: none;

text-align: left;

border-

bottom: 1px dashed #999;

}

.left ul li a strong {

color: #f1f1f1;

}

.left ul li a:hover,

.left ul li a.current {

color: #fff;

background: #666;

}



</style>

<script src="http://libs.baidu.com/jquery/1.10.2/jquery.js">

</script>

<script>

$(document).ready(function () {

$(window).scroll

(function () {

var top = $(document).scrollTop();//获取当前位置

var menu = $("#menu");

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

// 导航菜单实现在滚动条滚动的时候自动设置焦点

var

currentId = "";//当前所在楼层ID（item)

items.each

(function(){//当前位置和每个楼层的位置比较

var m

= $(this);

var itemTop = m.offset().top;

if(top > itemTop - 200){

currentId

= "#" + m.attr("id");//判断当前所在楼层

} else {

return false;

}

})

var currentLink = menu.find(".current");//找到

带有current属性的链接

if(currentId &&

currentLink.attr("href") != currentId){//如果currentId为空或链接位置

已经是当前楼层则不执行

currentLink.removeClass

("current");//删除带有current属性的链接的current属性

menu.find("[href=" + currentId + "]").addClass("current")//为当前

楼层的链接添加current属性

}

});

});

</script>

<body>

<div class="top">top</div>

<div class="main">

<div class="left">

<h1>正在首发</h1>

<ul>

<li>

<a href="#item1" class="current">

<strong>2014.04.09</strong><br>施华蔻0元赢Smart</a></li>

<li>

<a href="#item2">

<strong>2014.04.05</strong><br>alienware机皇限量抢</a></li>

<li>

<a href="#item3">

<strong>2014.04.04</strong><br>联想Miix2 3G平板电脑</a></li>

<li>

<a href="#item4">

<strong>2014.04.03</strong><br>御爵厨房垃圾处理器</a></li>

<li>

<a href="#item5">

<strong>2014.04.01</strong><br>中兴天机GRAND S II</a></li>

</ul>

</div>

<div class="right">

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

src="http://img.mukewang.com/536ca02800014e7105000400.jpg">

</div>

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

<img

src="http://img.mukewang.com/536ca04b0001dbeb04520519.jpg">

</div>

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

<img

src="http://img.mukewang.com/536ca06200016a4d03950387.jpg">

</div>

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

<img

src="http://img.mukewang.com/536ca0ab0001c89205000400.jpg">

</div>

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

<img

src="http://img.mukewang.com/536ca0830001b17f05000400.jpg">

</div>

</div>

</div>

<div class="foot">foot</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航