I think we are all successful people.

怕让父母失望,怕让自己后悔。最近大火的一句话不外乎“你还年轻,怕什么来不及。”是啊,我们还年轻,怕什么来不及,可是亲爱的,我们是怕父母等不及。等不到看到我们成材的一天,等 不到为我们自豪的一天,等不到我们为他们撑起一片天的一天。小时候我们渴望长大,像大人一样可以决定自己的生活,可是后来当我们真的长大了,我们却发现长大的世界和我们想的不一样,而且随着我们长大的同时,随之 而来的是对现实的无奈。我们开始意识到,我们长大了父母也老了,我们开始恐慌害怕,怕他们看不到我们变优秀的那一天,怕自己无法为他们创造一下安心的晚年, 怕他们老了之后还在为我们担忧。

   如果我们现在不去努力,等以后都没有能力去带父母各地旅游散心,品尝各地美食。我们努力的意义是让他们可以衣食无忧,可以尽情享受生活的美好,而不是在 晚年还替我们的生活工作担心,还要把自己的养老钱拿出来给你。所以我们成功的速度一定要超过父母老去的速度。

短文欣赏完了,是不是该努力了呢。小编今天带来的是关于当当网的首页特效及完成重要的代码

先给大家展示下华丽的页面:

难点一和难点二是贯穿的,当鼠标在1时图片会跟着切换,当你移开图片会自动切换。

难点三循环滚动。

难点四书的分类做出正确的显示。

难点五鼠标移在上面会变颜色。

难点一难点二解析及代码:

解析:每张图片都有索引,所以在这里图片的索引会和按钮123..6绑定在一起,让两者关联。

情况一:当你的鼠标移动到按钮上时,寻找到哪个按钮,(红色代码部分

情况二:在不移动按钮时自动切换,(橙色代码部分

当你移动到按钮上,只要当前的图片的效果,其余的效果全部淡出(也就是取消其他的效果)

以下是关键代码:

 1     //轮换图片
 2     function changeimg() {
 3         //图片的索引为0
 4         var index = 0;
 5         //图片轮换为false
 6         var stopp = false;
 7         var $li = $("#content").find("#scroll_img").children("li");
 8         var $page = $("#content").find("#scroll_number").children("li");
 9         //找到当前的index并且添加样式删除其他样式
10         $page.eq(index).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");
11         //当鼠标在$page上
12         $page.mouseover(function () {
13             //确定停留
14             stopp = true;
15             //获取当前的index
16             index = $page.index($(this));
17             $li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
18             $(this).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");
19         }).mouseout(function () {
20             stopp = false;
21         });
22         //自动切图
23         setInterval(function () {
24             if (stopp) return;
25             index++;
26             if (index >= $li.length) {
27                 index = 0;
28             }
29             $li.eq(index).stop(true, true).fadeIn().siblings().fadeOut();
30             $page.eq(index).addClass("scroll_number_over").stop(true, true).siblings().removeClass("scroll_number_over");
31         },3000);
32     }

难点三解析及代码:

解析:首先假设一种情况,它是鼠标停留的。另一种情况就是自动滚动,用一个定时器让它每隔多少毫秒改变。

 1  function movedome(){
 2         var marginTop=0;//外边距
 3         var stop=false;//是否停留 这里为false 
 4         var interval=setInterval(function(){
 5             if(stop) return;
 6             $("#express").children("li").first().animate({"margin-top":marginTop--},0,function(){
 7                 var $first=$(this);
 8                 if(!$first.is(":animated")){
 9                     if((-marginTop)>$first.height()){
10                         $first.css({"margin-top":0}).appendTo($("#express"));
11                         marginTop=0;
12                     }
13                 }
14             });
15         },50);
16         $("#express").mouseover(function(){
17             stop=true;
18         }).mouseout(function(){
19             stop=false;
20         });
21     }
22     movedome();

 

难点四解析及代码:

解析:首先找到每个功能块的id,并且寻找到符合该模块的书。当寻找到符合该模块的书,其他模块的书使用hide()方法隐藏不可见。

1   $("#bookTab").children(".book_new").find("[id]").mouseover(function () {
2         var id = "#book_" + $(this).attr("id");
3         $("#bookTab").children(".book_class").find("[id]").hide();
4         $(this).addClass("book_type_out").siblings().removeClass("book_type_out");
5         $(id).show();
6     });

难点五解析及代码:

解析:总体来说这个功能点是比较简单的,只需要设置当鼠标移动在某一块上面时变下颜色即可,在这里不多做解释了

1   $("#bookTab").children(".book_class").find("dd").mouseover(function () {
2         $(this).css("border", "2px solid #F96");
3     }).mouseout(function () {
4         $(this).css("border", "2px solid #fff");
5     });

以上就是小编本期带来的知识内容,你门看完有没有收获呢,如果有问题可以在下面提问,小编会很快做出答复哦~

posted on 2016-05-30 17:43  张BC  阅读(478)  评论(0编辑  收藏  举报
We are all best creamIT.