【12/13】JQuery学习笔记-产品图片放大，颜色选中，尺码选中，评分

 

1，live()绑定事件，页面加载后动态创建的元素，普通的方式Bind则无法生效。同时也可以通过delegate（"id/class……","事件"，function(){}）来委派新加载元素的事件。

2，对于显示产品图片放大效果，可以使用Jquery插件jquery.zoom.js。

<script src = "./scripts/jquery.jqzoom.js" type="text/javascript">
    $(".jqzoom").jqzoom({
        zoomType: "standard",
        lens: true,
        preloadImages: false,
        alwaysOn: false,
        zoomWidth:340,
        zoomHeight:340,
        xOffset: 10,
        yOffset: 0,
        position:"right"
    });
</script>

产品图片遮罩层效果，可以使用Jquery插件jquery.thickbox.js

<link rel="stylesheet" href="./styles/thickbox.css">
<script src = "./scripts/jquery.thickbox.js" type="text/javascript"/>

单击产品小图片切换大图，在小图上定义一个rel属性，其值为gallery。

<li class="imgList_blue">
<a href='javascript:void(0);'
 rel="{
gallery: 'gal1', 
smallimage: 'images/pro_img/blue_one_small.jpg',
largeimage: 'images/pro_img/blue_one_big.jpg'
}">                       
<img src='images/pro_img/blue_one.jpg' alt=""/>
</a>
</li>

gallery是小图切换大图的钩子。

 $("#jdProitem ul.imgList li a").bind("click",function () {
        var imgSrc = $(this).find("img").attr("src");
        var i = imgSrc.lastIndexOf(".");
        var unit = imgSrc.substring(i);
        imgSrc = imgSrc.substring(0,i);
        var imgSrc_big = imgSrc + "_big" + unit;
        $("#thickImg").attr("href",imgSrc_big);
    });

产品属性类介绍之类的选项卡

var $div_li=$(".tab .tabMenu ul li");
    $div_li.click(function () {
        $(this).addClass("seleted")
            .siblings().removeClass("seleted");
        var index= $div_li.index(this);

        $("div.tab_box > div")
            .eq(index).show()
            .siblings().hide();
    }).hover(function () {
        $(this).addClass("hover");
    },function () {
        $(this).removeClass("hover");
    });

产品颜色切换

HTML部分：

 <li class="color_change">
                        <span>颜&#12288;&#12288;色：</span>
                        <strong>蓝白</strong>
                        <ul>
                            <li><img alt="蓝白" src="images/pro_img/blue.jpg" /></li>
                            <li><img alt="黄白" src="images/pro_img/yellow.jpg" /></li>
                            <li><img alt="粉绿" src="images/pro_img/green.jpg" /></li>
                        </ul>
                    </li>

Script部分：

$(function () {
    $(".color_change ul li img").click(function () {
       $(this).addClass("hover")
           .parent().siblings().find("img").removeClass("hover"); //为选中的颜色添加效果
       var imgSrc = $(this).attr("src");
       var i = imgSrc.lastIndexOf(".");
       var unit = imgSrc.substring(i);
       imgSrc = imgSrc.substring(0,i);
       //将当前图像最后一个.之前的字符保存为imgSrc,将.之后的字符保存为unit
       var imgSrc_small = imgSrc + "_one_small" + unit;
       var imgSrc_big = imgSrc + "_one_big" + unit;
       $("#bigImg").attr({"src": imgSrc_small});//将大图的显示内容来源替换为所选颜色_one_small的图片
       $("#thickImg").attr("href",imgSrc_big);//将点击查看大图的图片替换为所选颜色_one_big的图片
       var alt = $(this).attr("alt");
       $(".color_change strong").text(alt);//显示的ALT值替换为当前选中的颜色
       var newImgSrc = imgSrc.replace("../images/pro_img/","");
       $("#jdProitem .imgList li").hide();
       $("#jdProitem .imgList").find(".imgList_"+newImgSrc)
           .eq(0).find("a").click();
    });
})

产品尺寸切换，同理：

HTML部分：

<li class="pro_size">
                        <span>尺&#12288;&#12288;寸：</span>
                        <strong>未选择</strong>
                        <ul>
                            <li>S</li>
                            <li>L</li>
                            <li>SL</li>
                            <li>LL</li>
                        </ul>
                    </li>

Scripts： 

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

产品数量和价格联动：

$(function () {
    var $span = $(".pro_price strong");
    var price = $span.text();  //获取单价
    $("#num_sort").change(function () { //下拉框每次变动都进行一次保存数量到num值里，并输出总价；
        var num=$(this).val();
        var amount = num*price; 
        $span.text( amount );
    }).change();
})

给产品评分：

静态HTML：

<div class="pro_rating">
                    给商品评分：
                    <ul class="rating nostar">
                        <li class="one"><a title="1分" href="#">1</a></li>
                        <li class="two"><a title="2分" href="#">2</a></li>
                        <li class="three"><a title="3分" href="#">3</a></li>
                        <li class="four"><a title="4分" href="#">4</a></li>
                        <li class="five"><a title="5分" href="#">5</a></li>
                    </ul>
                </div>

CSS：

.rating{
    overflow:hidden;
    width:80px;
    height:16px;
    margin:0 0 20px 0;
    padding:0;
    list-style:none;
    clear:both;
    position:relative;
    background: url(../images/star-matrix.gif) no-repeat 0 0;
}
.nostar {background-position:0 0}
.onestar {background-position:0 -16px}
.twostar {background-position:0 -32px}
.threestar {background-position:0 -48px}
.fourstar {background-position:0 -64px}
.fivestar {background-position:0 -80px}
ul.rating li {
    cursor: pointer;
    float:left;
    text-indent:-999em;
}
ul.rating li a {
    position:absolute;
    left:0;
    top:0;
    width:16px;
    height:16px;
    text-decoration:none;
    z-index: 200;
}
ul.rating li.one a {left:0}
ul.rating li.two a {left:16px;}
ul.rating li.three a {left:32px;}
ul.rating li.four a {left:48px;}
ul.rating li.five a {left:64px;}
ul.rating li a:hover {
    z-index:2;
    width:80px;
    height:16px;
    overflow:hidden;
    left:0;
    background: url(../images/star-matrix.gif) no-repeat 0 0
}
ul.rating li.one a:hover {background-position:0 -96px;}
ul.rating li.two a:hover {background-position:0 -112px;}
ul.rating li.three a:hover {background-position:0 -128px}
ul.rating li.four a:hover {background-position:0 -144px}
ul.rating li.five a:hover {background-position:0 -160px}

使用的图片为：

通过改变<ul>元素的class属性就能实现评分效果。

Script部分：