大概过了一遍jquery
以为自己差不多问题不大,所以就想找个小实例练一下
做个购物网站 一晚上连个css都没写完 觉得自己笨笨的
尤其是css写出来 然后没有反应的时候
都想哭了。。。
最后找到问题后,发现自己
啊,这都能有问题!!!
哎,不积跬步无以至千里
慢慢来,比较快
今天的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shopping web</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
line-height: 1.7;
}
li{
list-style: none;
}
#content{
width: 800px;
margin: 0 auto;
padding: 20px;
margin-bottom: 20px;
}
#content .item{
padding: 20px;
border: 1px dotted red;
margin-bottom: 30px;
}
#content .item li{
display: inline;
}
#content .item li a img{
width: 230px;
height: 230px;
margin: 10px;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">1F 男装</a></li>
<li><a href="#">2F 女装</a></li>
<li><a href="#">3F 美妆</a></li>
<li><a href="#">4F 数码</a></li>
<li><a href="#">5F 母婴</a></li>
</ul>
</div>
<div id="content">
<h1>shopping web</h1>
<div id="item1" class="item">
<h2>1F 男装</h2>
<ul>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
<li><a href="#"><img src="image/1F.jpg"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>2F 女装</h2>
<ul>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
<li><a href="#"><img src="image/2F.jpg"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>3F 美妆</h2>
<ul>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
<li><a href="#"><img src="image/3F.jpg"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>4F 数码</h2>
<ul>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
</ul>
</div>
<div id="item1" class="item">
<h2>5F 母婴</h2>
<ul>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
<li><a href="#"><img src="image/4F.png"></a></li>
</ul>
</div>
</div>
</body>
</html>
注意:
1.html没什么大问题,但是那个ul>li*9那个还没学会 明天安插件吧
2.line-height 行间距 新技能get!
3.我发现
*{
margin: 0;
padding: 0;
}
这真是万能的
有了这个之后,list的样式都没了!
4.今天又感受到了margin的神奇,外框外框
5.那个css选择器太坑爹了 要有空格!!!#content .item空格啊空格
6.我直接用margin: 0 auto;是没有效果的,要先给个宽度width: 800px; 这个要记住啊 直接用没有效果
7.九个图片放上去就不太好看,padding让它们9个距离散开 神奇!
css真的是要多练才能发现问题啊
---------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------
今天终终终于学完了jquery的第一个实例 哭
理论永远看起来简单~
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var top=$(document).scrollTop();
var menu=$("#menu");
var items=$("#content").find(".item");
var currentId="";
items.each(function(){
var m=$(this);
var itemTop=m.offset().top;
if(top+400>itemTop){
currentId="#"+m.attr("id");
}else{
return false;
}
});
var currentLink=menu.find(".current");
if(currentId&¤tLink.attr("href")!=currentId){
currentLink.removeClass("current");
menu.find("[href="+currentId+"]").addClass("current");
}
});
})
</script>
这一小段代码看似简单,但真的需要想很久呢,用几行代码就能完成很多事情,这或许就是编程的魅力所在吧
注意:
1.scroll是实际的偏移量,而offset是相对偏移量
这里就是获取m.offset().top来获取items的相对偏移量再去比较实际Top与它的大小,来改变id的值,从而达到变换的效果
2.其实效果好像并没有那么高大上,就是removeClass和addClass而已啊 easy!不要害怕
3.大概思路就是:遍历每一个item,比较top与m.offset().top,从而获得currentid,我就知道了当前位置需要哪一个id
然后就要改变item的class,我先看看现在拥有current类的是哪个item,默认是1楼,这里有一些边缘值的考虑:如果不是空,也不是应该有的id,那我就开始改变class。currelink保存了当前拥有current类的代码,我先把currentlink那行代码removeclass,之后给currentid的那行代码addclass就大功告成啦
4.top-400那里是要考虑到用户体验,我希望快到4楼了就换到4楼,而不是顶格写
5.多动手多动手多动手!!!
---------------------------------------------------------------------------------------------分割线-----------------------------------------------------------------------------------
注意:
1.自己写了一遍,竟然写出来了!!开心
2.卡壳在两个地方:attr竟然写成了att 哭。第二个&&写成了$$我是有多蠢啊啊啊啊