最新活动温馨提示:99元终身VIP,整站资源免费下载!
头像

jQuery商品价格选择器

来源:http://www.erdangjiade.com/ 二当家的 2015-08-20 20:51浏览(1447)

今天分享一款购物商城常用的价格选择器表单,而且里面附带了放大镜和小图切换大图功能。

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,99元整站资源免费下载!3、充值VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:368848856 在线 充值

jQuery商品价格选择器
分类:图片代码 > 按钮控制 难易:中级
查看演示 下载资源: 108

关注微信号获取此Demo视频教程:

下载资源 下载积分: 30 积分

HTML

首先我们在.image 放置一个预览图片.preview、前后按钮.prev,.next,及缩略图.items li。

<div class="image">
    <div id="preview" class="spec-preview"><span class="jqzoom"><img alt="" jqimg="./images/f_5596346f0425d.jpg" src="images/f_5596346f0425d.jpg"></span>
    </div>
    <!--缩图开始-->
    <div class="spec-scroll">
        <a class="prev">&lt;</a>
        <a class="next">&gt;</a>
        <div class="items" id="items">
            <ul>
                <li class="current">
                    <img bimg="./images/f_5590a2953bc56.jpg" src="images/f_5590a2953bc56.jpg">
                </li>
                <li>
                    <img bimg="./images/f_5596346bb204e.jpg" src="images/f_5596346bb204e.jpg">
                </li>
                ......
            </ul>
        </div>
    </div>
    <!--缩图结束-->
</div>

引入jQuery库、放大镜jqzoom和base.js

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="./js/jquery.jqzoom.js"></script>
<script type="text/javascript" src="js/base.js"></script>

当鼠标悬浮缩略图,获取缩略图的图片地址,和原图片地址,并且在预览#preview展示。

$("#items").find("li").hover(function() {
    var img_small = $(this).children("img").attr("src");
    var img_big = $(this).children("img").attr("bimg");

    $("#preview .jqzoom img").attr("src", img_small);
    $("#preview .jqzoom img").attr("jqimg", img_big);
    $(this).addClass("current").siblings("li").removeClass("current");
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/327.html
评论0
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

1 2