jquer项目总结

                                 服装商城项目

1:  头部换肤

$(function(){                      $("#skin li").click(function(){                     $(this).addClass("selected").siblings().removeClass("selected");                                     var cssName = $(this).attr("id");                     //alert(cssName)                     $("#cssfile").attr("href","styles/skin/"+cssName+".css")                 })                })

 

给商品评分

$(function() {                     $(".rating li a").click(function() {                         var title = $(this).attr("title");                         alert("你给出的评分是" + title);                         var cl = $(this).parent().attr("class");                         $(this).parent().parent().removeClass().addClass("rating " + cl + "star")                     })                 })

产品简介切换

$(function(){                     var $div_li =$("div.tab_menu ul li");                     $div_li.click(function(){                         $(this).addClass("selected")            //当前<li>元素高亮                                .siblings().removeClass("selected");  //去掉其他同辈<li>元素的高亮                         var index =  $div_li.index(this);  // 获取当前点击的<li>元素 在 全部li元素中的索引。                         $("div.tab_box > div")       //选取子节点。不选取子节点的话，会引起错误。如果里面还有div                                  .eq(index).show()   //显示 <li>元素对应的<div>元素                                 .siblings().hide(); //隐藏其他几个同辈的<div>元素                     }).hover(function(){                         $(this).addClass("hover");                     },function(){                         $(this).removeClass("hover");                     })                                                       })     $(function(){                         $(".imgList img").click(function(){                             var img=$(this).attr("src");                             var arr=img.split(".jpg");                             var newsrc=arr.join("_small.jpg");                             var src=arr.join("_big.jpg")                             $(".jqzoom img").attr("src",newsrc).attr("jqimg",src);                             $("#thickImg").attr("href",src)                         })                     })

衣服换色

$(function() {                     $(".color_change>ul>li>img").click(function() {                         var a = $(this).attr("src");                         var color = $(this).attr("alt");                         /*alert(color);*/                         var src = a.split("img/");                         /*alert(src[1]);*/                         var b = src[1].split(".jpg");                         /*alert(b[0]);*/                              //更换大图                         $(".jqzoom>img").attr("src", "images/pro_img/" + b[0] + "_one_small.jpg");                         $(".jqzoom>img").attr("jqimg", "images/pro_img/" + b[0] + "_one_big.jpg");                         //更换字体                          $(".color_change:first strong").html(color);                              //更换下面三张图片                         $(".imgList li img:eq(0)").attr("src", "images/pro_img/" + b[0] + "_one.jpg");                         $(".imgList li img:eq(1)").attr("src", "images/pro_img/" + b[0] + "_two.jpg");                         $(".imgList li img:eq(2)").attr("src", "images/pro_img/" + b[0] + "_three.jpg");                              //绿色只有两张  如果绿色 把第三个隐藏掉                         if (b[0] == "green") {                             $(".imgList li img:eq(2)").hide();                         } else {                             $(".imgList li img:eq(2)").show();                         }                          })                 })  

尺寸的选择

$(function(){                 $(".pro_size li span").click(function(){                     $(this).parents("ul").siblings("strong").text(  $(this).text() );                 })             })

 

购物车

$(function(){             var $product = $(".pro_detail_right");             $("#cart a").click(function(){                 var pro_name = $product.find("h4:first").text();                 var pro_size = $product.find(".pro_size strong").text();                 var pro_color =  $(".color_change strong").text();                 var pro_num = $product.find("#num_sort").val();                 var pro_price = $product.find(".pro_price span").text();                 var dialog = " 感谢您的购买。\n您购买的\n"+                         "产品是："+pro_name+"；\n"+                         "尺寸是："+pro_size+"；\n"+                         "颜色是："+pro_color+"；\n"+                         "数量是："+pro_num+"；\n"+                         "总价是："+pro_price +"元。";                 if( confirm(dialog) ){                     alert("您已经下单!");                 }                 return false;//避免页面跳转             })          })          

 

 

$(function() {                 var index = 0;                 var timeId;                 //获取图片滚动的高度                 var height = $(".ad").height();                 //页面加载完毕让其下标为1的li高亮显示                 $(".num li:first").addClass("on");                 //当鼠标移动到li元素上时，当前li元素高亮显示                 $(".num li").mouseover(function() {                     //获取当前鼠标放入的li元素所在的索引位置                     index = $(".num li").index($(this));                     //执行滚动方法，传index进来就是当用户滑到第几张的时候就显示第几张                     showImg(index);                 });

                //轮播图

                //当鼠标放入图片上时，停止滚动（清除定时器），鼠标离开，开始滚动（启动定时器）                 $(".ad").hover(function() {                     //清除定时器                     clearInterval(timeId);                 }, function() {                     //启动定时器                     timeId = setInterval(function() {                         index++;                         if (index == 5) {                             index = 0;                         }                         showImg(index);                     }, 2000);                 }).trigger("mouseout");

                function showImg(index) {                     //获取图片滚动高度                     var height = $(".ad").height();                     //根据当前索引使图片移动到对应的距离高度                     $(".slider").animate({                         top: -index * height                     }, 1000);                     $(".num li").eq(index).addClass("on").siblings().removeClass("on");                 }

                //头部颜色切换

                  $(function(){                                                  $("#skin li").click(function(){                                   $(this).addClass("selected").siblings().removeClass("selected");                                                   var cssName = $(this).attr("id");                                   //alert(cssName)                                   $("#cssfile").attr("href","styles/skin/"+cssName+".css")                               })                              })                 /* $(function () {                     //给头部颜色的方块进行打勾，当前打勾，其余项打勾移除                     $("#skin li").click(function () {                         $(this).addClass("selected").siblings().removeClass("selected");                                  var cssName = $(this).attr("id");                         //$("#cssfile").attr("href", "style/skin/" + cssName + ".css");                         changeSkin(cssName);                              });                     if ($.cookie("MyCookie")) {                         var cssName = $.cookie("MyCookie");                         changeSkin(cssName);                         $("#" + cssName).addClass("selected").siblings().removeClass("selected");                     }                     function changeSkin(cssName) {                         $("#cssfile").attr("href", "styles/skin/" + cssName + ".css");                         $.cookie("MyCookie", cssName, { expires: 7, path: '/' });                     }                 }) */

                //最新动态  新闻滚动                 $(function() {                     var $this = $(".scrollNews");                     var scrollTimer;                     $this.hover(function() {                         clearInterval(scrollTimer);                     }, function() {                         scrollTimer = setInterval(function() {                             scrollNews($this);                         }, 1000);                     }).trigger("mouseleave");                 });

                function scrollNews(obj) {                     var $self = obj.find("ul:first");                     var lineHeight = $self.find("li:first").height(); //获取行高                     $self.animate({                         "marginTop": -lineHeight + "px"                     }, 600, function() {                         $self.css({                             marginTop: 0                         }).find("li:first").appendTo($self); //appendTo能直接移动元素                     })                 }

                function sp() {                     scroolNews($this);                 }

                /* //导航菜单收起                 $(function(){                          $(".module_up_down").toggle(function(){                                     var $self = $(this);                                     $self.prev().slideToggle(600,function(){                                           $("img",$self).attr("src","img/up.gif");                                     });                              },function(){                                     var $self = $(this);                                     $self.prev().slideToggle(600,function(){                                           $("img",$self).attr("src","img/down.gif");                                     });                          })                 }) */

            //列表收起             $(function(){                 //新闻最新动态                 $(".module_up_down img").click(function(){                     var  $this=$(this);                     $(".scrollNews").slideToggle(1000,function(){                         var img =$this.attr("src")                         console.log(img);                         if (img=="images/up.gif") {                             img="images/down.gif";                         }                         else{                             img="images/up.gif";                          }                                                  $this.attr("src",img);                     })                 })                                               })                          //产品分类             $(function(){                                                   $(".procatalog img").click(function(){                     var  $this=$(this)                     $(".m-treeview").slideToggle(1000,function(){                         var img =$this.attr("src")                         console.log(img);                         if (img=="images/up.gif") {                             img="images/down.gif";                         }                         else{                             img="images/up.gif";                          }                         $this.attr("src",img)                      })                 })                              })             //寸衫               /* $(function () {                        $("#laqi").click(function () {                            $("#laqi ul").slideToggle(1000);                                                    })                    })                    //卫衣                    $(function () {                            $("#wy").click(function () {                                $("#wy ul").slideToggle(1000);                            })                        })                    //裤子                                        $(function () {                            $("#kz").click(function () {                                $("#kz ul").slideToggle(1000);                            })                        }) */                        $(function() {                                        $(".m-treeview > li").click(function() {                                            var c = $(this).attr("class");                                            if (c == "m-collapsed")                                                $(this).attr("class", "m-expanded");                                            else if (c == "m-expanded")                                                $(this).attr("class", "m-collapsed");                                        })                                    })              //新款上市              $(function(){                  var page = 1;                  var i = 4; //每版放4个图片                  var len = $(".prolist_content ul li").length;                  var page_count = Math.ceil(len / i) ;   //只要不是整数，就往大的方向取最小的整数                  var none_unit_width = $(".prolist").width(); //获取框架内容的宽度,不带单位                  var $parent = $(".prolist_content");                   //向右 按钮                  $(".goRight").click(function(){                       if( !$parent.is(":animated") ){                          if( page == page_count ){  //已经到最后一个版面了,如果再向后，必须跳转到第一个版面。                              $parent.animate({ left : 0}, 800); //通过改变left值，跳转到第一个版面                              page = 1;                          }else{                              $parent.animate({ left : '-='+none_unit_width}, 800);  //通过改变left值，达到每次换一个版面                              page++;                          }                      }                 });                  //往左 按钮                  $(".goLeft").click(function(){                      if( !$parent.is(":animated") ){                          if( page == 1 ){  //已经到第一个版面了,如果再向前，必须跳转到最后一个版面。                              $parent.animate({ left : '-='+none_unit_width*(page_count-1)}, 800); //通过改变left值，跳转到最后一个版面                              page = page_count;                          }else{                              $parent.animate({ left : '+='+none_unit_width }, 800);  //通过改变left值，达到每次换一个版面                              page--;                          }                      }                  });              });                           })