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