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

jx370

于 2015-12-06 17:47:11 发布

阅读量365

点赞数

本文链接：https://blog.csdn.net/jx370/article/details/50196643

版权

代码来袭

<!DOCTYPE>

<head>

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

</head>

* {

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;
}

<!--      /*ie6 hack*/

* html, * html body {
            background-image: url

(about:blank);
background-attachment: fixed;
}

* html #menu {

/*position: fixed;*/

position: absolute;
top: expression

(((e=document.documentElement.scrollTop)?

e:document.body.scrollTop)+100+'px');
}

-->

</style>

$(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>

<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 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>

</body>

</html>

jx370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
南大软院大神养成计划第二十一天

代码来袭http://www.w3.org/1999/xhtml">/>混合布局编程挑战* { margin: 0; padding: 0; }body { font-size: 12px; line-height:
复制链接

扫一扫