图片的点击放大

$(function() {
            //三个目标图片,添加单击事件
            $(".color_change ul li img").click(function () {
                //split分割符,前后分割
                var str = $(this).attr("src").split(".jpg");
                //str[0]获取分割后索引0的字符进行拼接
                //定义左上角大图片
                var img_small = str[0] + "_one_small" + ".jpg";
                var img_big = str[0] + "_one_big" + ".jpg";
                //在事件内,获取当前的src和alt->显示颜色
                //attr改变属性值     放大镜属性"jqimg": img_big   获取左上角大图片"src": img_small
                $("#bigImg").attr({ "src": img_small, "jqimg": img_big });
                //放大图片属性
                $("#thickImg").attr("href", img_big);
                //attr改变(.imgList li:eq(0) img)属性
                //左下角小图
                $(".imgList li:eq(0) img").attr("src", str[0] + "_one.jpg");
                $(".imgList li:eq(1) img").attr("src", str[0] + "_two.jpg");
                $(".imgList li:eq(2) img").attr("src", str[0] + "_three.jpg");
                //定义并获取当前图片颜色text属性
                var alt = $(this).attr("alt");
                $(".color_change strong").text(alt);
                //判断第三张图片是否存在
                if (alt == "粉绿") {
                    $(".imgList li:eq(2) img").hide();
                }
                else {
                    $(".imgList li:eq(2) img").show();
                }
            })
                    

//左下方小图点击放大

         $(".imgList li img").click(function () {
                //获取当前图片并分割字符
                var strArray = $(this).attr("src").split('.jpg');
                var imgSrc_small = strArray[0] + "_small" + ".jpg";
                var imgSrc_big = strArray[0] + "_big" + ".jpg";
                $("#bigImg").attr({ "src": imgSrc_small, "jqimg": imgSrc_big });
                $("#thickImg").attr("href", imgSrc_big);
            })
        })

猜你喜欢

转载自blog.csdn.net/Charles_hui/article/details/108940455
今日推荐