KISSY对大小图片的切换功能--20131024 -

xjwolaile

浏览: 343600 次
性别:
来自: 杭州

最近访客更多访客>>

waylon33

Cyoooa

h06910101

androidHua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

KISSY对大小图片的切换功能--20131024

博客分类：

1、效果及功能说明

当鼠标点击小图片的时候可以切换到大图片上来放大图片，后小图片的也会更新到大图片上

2、实现原理

首先定义一个大图片的默认路径是什么图片这是为了当一开打的时候就有图片在上面，然后定义获得小图片的路径，小图片定义个默认路径就是一直显示哪张图片后定义一个可以给大图片获得的路径通过往小图片添加data-href="11111"属性来让大图片获得链接路径这样就实现了链接地址的互换

主要的方法

//这里告诉大图片要从哪里获得小图片
Event.on("#imgList img", 'click', function () {
        var data = DOM.attr(this, 'data-ks-imagezoom');
        var link = DOM.attr(this, 'data-href');
        m.set('hasZoom', DOM.attr(this, 'data-has-zoom'));
        m.set('imageSrc', data + '_310x310.jpg');
        if (data && m.get('hasZoom')) {
            m.set('bigImageSrc', data);
            //这里是获得小图片链接的方法 当小图片更换了以后链接地址也随之更换但是点击小图片的时候是不会触发链接效果的，因为只有大图片有a标签
            m.set("bigImageWidth", parseInt(DOM.attr(this, 'data-bigimagewidth')));
            m.set("bigImageHeight", parseInt(DOM.attr(this, 'data-bigimageheight')));
            S.all("#view-good-detail").attr('href',link);
        }

3、效果图

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>��װ��ĩ��</title>
<script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script> 
<style>

</style>
</head>

<body>
<div class="demo">
    <a id="view-good-detail" href="#"><img id="multi" data-ks-imagezoom="http://img03.taobaocdn.com/bao/uploaded/i3/T1fftwXf8jXXX7ps79_073021.jpg" src="../˫ʮһ��װ3D����᳡/images/by-max.jpg" width="470" height="250"></a>
</div>
<ul id="imgList">

    <li>
        <img data-href="11111" data-has-zoom="true" data-ks-imagezoom="http://gtms01.alicdn.com/tps/i1/T1dxH5FXhcXXceEzHy-470-250.jpg" src="http://gtms01.alicdn.com/tps/i1/T1dxH5FXhcXXceEzHy-470-250.jpg" width="40" height="40">
    </li>
    <li>
        <img data-href="22222"  src="http://img06.taobaocdn.com/imgextra/i6/354823861/T2vWNlXbFdXXXXXXXX_!!354823861.jpg_40x40.jpg" data-has-zoom="true" data-ks-imagezoom="http://img06.taobaocdn.com/imgextra/i6/354823861/T2vWNlXbFdXXXXXXXX_!!354823861.jpg">
    </li>
    <li>
        <img data-href="33333"  src="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg_40x40.jpg"data-has-zoom="true"data-ks-imagezoom="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg">
    </li>
    <li>
        <img data-href="444444"  src="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg_40x40.jpg"data-has-zoom="true"data-ks-imagezoom="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg">
    </li>
    <li>
        <img  data-href="666666"  src="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg_40x40.jpg"data-has-zoom="true"data-ks-imagezoom="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg">
    </li>
    <li>
        <img  data-href="77777"  src="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg_40x40.jpg"data-has-zoom="true"data-ks-imagezoom="http://img05.taobaocdn.com/imgextra/i5/T1DERIXmXsXXa26X.Z_031259.jpg">
    </li>
</ul>


</div>
</body>
<script>
KISSY.use("dom,event,imagezoom", function (S, DOM, Event, ImageZoom) {
    var m = new ImageZoom({
        imageNode: "#multi",
        align: {
            node: "#multi",
            points: ["tr", "tl"],
            offset: [0, 0]
        },
    });


    // �л�ʱ, ��̬���ô�ͼ·��
	Event.on("#imgList img", 'click', function () {
        var data = DOM.attr(this, 'data-ks-imagezoom');
        var link = DOM.attr(this, 'data-href');
        m.set('hasZoom', DOM.attr(this, 'data-has-zoom'));
        m.set('imageSrc', data + '_310x310.jpg');
        if (data && m.get('hasZoom')) {
            m.set('bigImageSrc', data);
            m.set("bigImageWidth", parseInt(DOM.attr(this, 'data-bigimagewidth')));
            m.set("bigImageHeight", parseInt(DOM.attr(this, 'data-bigimageheight')));
            S.all("#view-good-detail").attr('href',link);
        }
    });
});
</script>
</html>

查看图片附件

分享到：

KISSY对大小图片的切换功能2--20131026 | 浮动定位的学习-20131023

2013-10-24 23:08
浏览 922
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

KISSY对大小图片的切换功能--20131024

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

KISSY对大小图片的切换功能--20131024

评论

发表评论

相关推荐

Zepto

node.js的学习-20140611

node.js的学习-20140609

git的学习-20140604

PC和移动端的页面的一些差距-20140525

Bootstrap排版基础样式和响应式图片-20140521

Bootstrap特性、设计和组件-20140519

Bootstrap流式布局-20140515

Bootstrap的宽度和分辨率的差别-20140514

Bootstrap的认识-20140513

jquery初步认识-20140123

html5的特殊标签作用-20140114

ie下的指定样式-20140106

margin-left在IE6下左浮动加倍-20140102

浮动存在的问题-20131229

在ie6下同张图片不能外面包有a标签后在画热区-20131223

ie6下导航存在的问题和-2013-12-20

按比例展示的小js-20131217

定位需要注意-20131214

flash在Safari下的BUG-20131212

最近访客更多访客>>