jQuery商品图片标注

来源:https://www.sucaihuo.com/js/723.html 2016-01-30 19:22浏览(658) 收藏

国外很多购物网站常常会看到这样的应用,一张图片中显示多种商品,点击每个商品可以弹出对应商品的简单介绍,包括价格、标题、描述信息等等,瞬间让你的网站变得高大上。
jQuery商品图片标注
分类:图片代码 > 图片插件 难易:中级
查看演示 下载资源 下载积分: 20 积分

首先引入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ı');
    }
});
标签: 标签标注
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2