分類  >  Web前端 >

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

tags:    時間:2013-12-09 23:34:03
KISSY對大小圖片的切換功能2--20131026
1、效果及功能說明

當滑鼠點擊小圖片的時候可以切換到大圖片上來放大圖片,后小圖片的也會更新到大圖片上

2、實現原理

在這邊進行了修改就是上一個版本顯示出html5的圖片但是在線圖片沒有效果現在這個版本是直接取得 src裡面的地址大小圖片也只有一個地址,這樣就簡化了很多,只是在做圖片的上面有一些要求就是所有的圖片都是以大圖片為準,小圖片的坑也是填入大圖片,因為都是一個地址當小圖片放到大圖片上就會失真所以小圖片其實也是 大圖片的尺寸只是在小圖片上定義了大小所以顯示出來的是 小圖片當點擊后被大圖片獲取到了路徑那麼就變成了圖片原來的尺寸就不會失真了,而且還加入的循環在後台通過tms循環的時候是每個.jh-by-nr1都是獨立的互不干擾。



3、主要的方法


 (function(S){         //定於獲得圖片和鏈接的地址的方法下面是循環整個div 	var DOM=S.DOM; 	var $=S.all; 	var Event=S.Event; 	S.use("sizzle",function(){ 		var length=$(".jh-by-nr1").length; 		for(var i=1;i<=length;i++){                                 //定義點擊事件當點擊小圖片后大圖片獲得小圖片方法 				Event.on('.imgList_'+i+' li img','click',function(){                                 //獲得小圖片的地址 				var oImgSrc=DOM.attr(this,"src");                                 //將循環的這個div包括裡面的內容顯示到頁面上 				var oHref=DOM.attr(this,"data-href");                                 //獲得當前的屬性 				var parent=DOM.parent(DOM.parent(this));                                 //獲得循環后的值 				var index=DOM.attr(parent,"index");                                 //循環后的class 裡面包含了獲得圖片的方法 				DOM.attr($('.multi_'+index),{src:oImgSrc});                                 //循環后的class 裡面包含了獲得連接地址的方法 				DOM.attr($('.imglj_'+index),{href:oHref}); 			}) 		} 	}) })(KISSY) 


4、全部語句
  <script src="http://a.tbcdn.cn/s/kissy/1.3.0/kissy-min.js"></script>   <div class="demo"> 	<a class="xxx" href="xxx" target="_blank"> 		#if($item.imgUrl_1)<img class="multi_$velocityCount" src="$item.imgUrl_1" width="470" height="250" /> 	</a> </div> <ul class="imgList_$velocityCount" index="$velocityCount"> ($item.imgUrl_2)<li><img data-href="$item.linkUrl_1"  src="$item.imgUrl_2" width="75" height="75" /></li> <li><img data-href="$item.linkUrl_2"  src="$item.imgUrl_3" width="75" height="75" /></li> <li><img data-href="$item.linkUrl_3"  src="$item.imgUrl_4" width="75" height="75" /></li> <li><img data-href="$item.linkUrl_4"  src="$item.imgUrl_5" width="75" height="75" /></li> <li><img data-href="$item.linkUrl_5"  src="$item.imgUrl_6" width="75" height="75" /></li> <li><img data-href="$item.linkUrl_6"  src="$item.imgUrl_7" width="75" height="75" /></li> </ul>                  <script> (function(S){ 	var DOM=S.DOM; 	var $=S.all; 	var Event=S.Event; 	S.use("sizzle",function(){ 		var length=$(".jh-by-nr1").length; 		for(var i=1;i<=length;i++){ 				Event.on('.imgList_'+i+' li img','click',function(){ 				var oImgSrc=DOM.attr(this,"src"); 				var oHref=DOM.attr(this,"data-href"); 				var parent=DOM.parent(DOM.parent(this)); 				var index=DOM.attr(parent,"index"); 				DOM.attr($('.multi_'+index),{src:oImgSrc}); 				DOM.attr($('.imglj_'+index),{href:oHref}); 			}) 		} 	}) })(KISSY)  </script> 

推薦閱讀文章

Bookmark the permalink ,來源:互聯網