幻想指点江山,梦中激扬文字(飞天小肥猪的简单人生 Register | Login

为JQuery的cycle插件作图片自动缩放

获取 @neatdns.com 的免费邮箱
JavaScript代码
  1. function showImg(){   
  2.     pw = parseInt( $(this).parent().css('width') );   
  3.     ph = parseInt( $(this).parent().css('height') );   
  4.     showImage = new Image();   
  5.     showImage.src = $(this).children('a').children('img').attr('src');   
  6.     sw = showImage.width;   
  7.     sh = showImage.height;   
  8. //原先这些sw是直接用 $(this).width()来判断,但实际上很多时间都取回的是pager里面的图片大小属性,或者取回来有不正常的时候,这是cycle的BUG,没有时间却验证了,因此,只有用Image类来进行处理,这样取回来的就是图片真正的大小   
  9.     idx = $('#bigPic li').index( $(this) );   
  10.     alert(showImage.src+' - '+sw+' - '+sh);   
  11.     if (sw > pw || sh > ph){   
  12.         if (sw > sh ){   
  13.             sh = Math.floor(sh * ( pw / sw ));   
  14.             sw = pw-10;   
  15.         }else {   
  16.             sw = Math.floor(sw * ( ph / sh ));   
  17.             sh = ph-10;   
  18.         }   
  19.         //实在不知道这里为什么会多出16px,如果不减6,就会每次缩小   
  20.         //这里的长宽比例会不正确。。。   
  21.         $(this).children('a').children('img').css({'width': sw,'height':sh,'paddingTop':3});   
  22.     }   
  23.     if (sh <= ph){   
  24.         $(this).css('marginTop',(ph - sh)/2).css('verticalAlign','middle');   
  25.     }   
  26.     if (sw <= pw){   
  27.         $(this).css('marginLeft' , (pw - sw)/2).css('textAlign','center');   
  28.     }   
  29.     if( idx == 0 ){   
  30.         $('#thumbnail a').trigger('click');   
  31.     }   
  32. }   

Mark it ,and update it on work time...



本站采用创作共享版权协议, 要求署名、非商业和保持一致. 本站欢迎任何非商业应用的转载, 但须注明出自" 膘叔  簡單人生", 保留原始链接, 此外还必须标注原文标题和链接.

Tags: jquery, cycle

« 上一篇 | 下一篇 »

只显示10条记录相关文章

JQuery学习第一天 (浏览: 3511, 评论: 3)
推荐一个Jquery插件:autoComplete (浏览: 3205, 评论: 0)
jQuery一些插件的链接[转] (浏览: 3179, 评论: 2)
jquery radio,checkbox,select操作 (浏览: 2678, 评论: 2)
jQuery的bind函数 (浏览: 2464, 评论: 0)
[转载]超强大的jquery formValidator (浏览: 2351, 评论: 0)
好东西,不得不贴,继续上传两个文件 (浏览: 1808, 评论: 0)
jQuery Plugins -- JQzoom (浏览: 1577, 评论: 3)
JS取当时间的一个很妖的方法 (浏览: 1188, 评论: 0)
祝贺:微软也开源 将采用jQuery JavaScript库 (浏览: 1113, 评论: 0)
为JQuery的cycle插件作图片自动缩放 - Javascript,jquery,cycle,gouki,简单人生|PHP开发|架构研究 JavaScript代码

发表评论

评论内容 (必填):