jQuery商品图片标注

收藏

国外很多购物网站常常会看到这样的应用，一张图片中显示多种商品，点击每个商品可以弹出对应商品的简单介绍，包括价格、标题、描述信息等等，瞬间让你的网站变得高大上。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

首先引入easing图片标记插件

<script src="js/jquery.easing.min.js"></script>
<script src="js/jquery.easypin.min.js"></script>

接着，我们准备一张图片，这是一张展示多个模特服装鞋子包包内的商品图片，ps:给图片一个easypin-id属性，它用来标记当前图片id，用于easing插件调用。

<img src="fashion.jpg" class="pin" width="900" easypin-id="demo_image_1" />

我们还需要制作一个用于弹出显示商品信息的隐藏层，使用属性easypin-tpl来标记弹出层。标签popover是弹出层元素，标签marker是标注点元素。再配合CSS来让弹出层有一个漂亮的外观。

<div style="display:none;" easypin-tpl>
    <popover>
        <div class="exPopoverContainer">
            <div class="popBg borderRadius"></div>
            <div class="popBody">
                <div class="arrow-down" style="top: 170px;left: 13px;"></div>
                <h1>{[name]}</h1>
                <div class="popHeadLine"></div>
                <div class="popContentLeft">
                    {[description]}
                    <br />
                    <br />
                    <a href="#">Buy</a>
                    &nbsp;
                    &nbsp;
                    <a href="#">More info</a>
                </div>
                <div class="popContentRight">{[price]}</div>
            </div>
        </div>
    </popover>

    <marker>
        <div class="marker2 element-animation">
            +
        </div>
    </marker>
</div>

插件提供了easypin()和easypinShow()两个方法，我们使用easypinShow()来展示图片标注效果，它有一个data选项，支持json格式，它定义标注点相关数据，包括坐标位置，商品名称、描述和价格，这些数据可以是后台统一生成。它还提供了很多其他选项和回调函数，请看下面的代码。

$('.pin').easypinShow({
    data: '{"demo_image_1":{"0":{"name":"商品名称","description":"商品描述信息. ","price":"$67","coords":{"lat":"800","long":"228"}},"1":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. ","price":"$98","coords":{"lat":"597","long":"357"}},"2":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ","price":"$100","coords":{"lat":"241","long":"352"}},"3":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ","price":"$54","coords":{"lat":"365","long":"283"}},"4":{"name":"Sweater","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ","price":"$32","coords":{"lat":"713","long":"276"}},"5":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ","price":"$123","coords":{"lat":"771","long":"510"}},"6":{"name":"Pierre Cardin","description":"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ","price":"$54","coords":{"lat":"496","long":"277"}},"canvas":{"src":"fashion.jpg","width":"1000","height":"625"}}}',
    responsive: false,
    variables: {
        firstname: function(canvas_id, pin_id, data) {
            //console.log(canvas_id, pin_id, data);
            return data;
        },
        surname: function(canvas_id, pin_id, data) {
            //console.log(canvas_id, pin_id, data);
            return data;
        }
    },
    popover: {
        show: false,
        animate: true
    },
    each: function(index, data) {
        return data;
    },
    error: function(e) {
        console.log(e);
    },
    success: function() {
        console.log('başarılı');
    }
});