怕让父母失望，怕让自己后悔。最近大火的一句话不外乎“你还年轻，怕什么来不及。”是啊，我们还年轻，怕什么来不及，可是亲爱的，我们是怕父母等不及。等不到看到我们成材的一天，等 不到为我们自豪的一天，等不到我们为他们撑起一片天的一天。小时候我们渴望长大，像大人一样可以决定自己的生活，可是后来当我们真的长大了，我们却发现长大的世界和我们想的不一样，而且随着我们长大的同时，随之 而来的是对现实的无奈。我们开始意识到，我们长大了父母也老了，我们开始恐慌害怕，怕他们看不到我们变优秀的那一天，怕自己无法为他们创造一下安心的晚年， 怕他们老了之后还在为我们担忧。
如果我们现在不去努力，等以后都没有能力去带父母各地旅游散心，品尝各地美食。我们努力的意义是让他们可以衣食无忧，可以尽情享受生活的美好，而不是在 晚年还替我们的生活工作担心，还要把自己的养老钱拿出来给你。所以我们成功的速度一定要超过父母老去的速度。
短文欣赏完了，是不是该努力了呢。小编今天带来的是关于当当网的首页特效及完成重要的代码
先给大家展示下华丽的页面：
难点一和难点二是贯穿的，当鼠标在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 });
以上就是小编本期带来的知识内容，你门看完有没有收获呢，如果有问题可以在下面提问，小编会很快做出答复哦~
