2020-10-07

 

 //添加购物车
        $(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;//避免页面跳转
            })
        })
 

 

 

<div class="pro_size">
                尺寸：<strong>未选择</strong>
                <ul>
                    <li><span>S</span></li>
                    <li><span>L</span></li>
                    <li><span>SL</span></li>
                    <li><span>LL</span></li>
                </ul>
            </div>
            <div class="pro_num">
                数量：
                <select id="num_sort" style="width:40px;" >
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                    <option value="5">5</option>
                </select>
            </div>
            <div class="pro_price">
                总计：<span>200</span>元
            </div>
            <div class="pro_rating">
                给商品评分：
                <ul class="rating nostar">
                    <li class="one"><a href="#" title="1分">1</a></li>
                    <li class="two"><a href="#" title="2分">2</a></li>
                    <li class="three"><a href="#" title="3分">3</a></li>
                    <li class="four"><a href="#" title="4分">4</a></li>
                    <li class="five"><a href="#" title="5分">5</a></li>
                </ul>
            </div>
            <div id="cart">
                <a href="#"><img src="images/btn_cart.png"/></a>
            </div>
        </div>

 

 

 

 

 

<script src="js/jquery.jqzoom.js" type="text/javascript" charset="utf-8"></script>

 

 

//放大镜
        $(function () {
            $(".jqzoom").jqueryzoom({
                xzoom: 300,
                yzoom: 300,
                offset: 10,
                position: "right",
                preload: 1
            })
        })

 

<div class="pro_detail_left">
            <div class="jqzoom"><img src="images/pro_img/blue_one_small.jpg" class="fs" alt=""  jqimg="images/pro_img/blue_one_big.jpg" id="bigImg"/></div>
            <span>
                <a href="images/pro_img/blue_one_big.jpg" id="thickImg" title="介绍文字" class="thickbox">
                   <img alt="点击看大图" src="images/look.gif" />
                </a>
            </span>