分類  >  Web前端 >

KISSY對大小圖片的切換效能-20131024

tags:    時間:2013-12-09 23:39:54
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>  

推薦閱讀文章

Bookmark the permalink ,來源:互聯網