营销学堂 / MARKETING
互派环球-网络营销学堂
互派环球-网络营销学堂
互派环球注重每个网站的设计和营销能力,我们拥有多年的搜索引擎营销的经验,并对网站优化有深入的理解。
jquery 等比例缩放图片插件
编辑:互派环球浏览次数:10706发布时间:2012-06-17 03:44:14
【内容提要】jquery插件等比例缩放图片,使用只需在html的img标签上加上图片大小以及开启缩放属性和缩放相对位置参数即可
图片不经过服务器,直接用的是地址。但是他要求图片不能变形扭曲。这样就要在客户端用JS做。好在有了jQuery,这个做起来还比较方便。一个小小的插件autosize.
假设有这么个图片
<img src=uploads/hphq.jpg" width="200" height="300" />
图片的尺寸被强制的设为了200*300,如果这个地址的图片比例不是2:3的话,这张图片就会变形。所以我想办法,让他占据的大小依然是200*300,而且让图片等比例放大到最大限度。于是有了下面插件。
使用方法很简单。使用前必须在头部引入jquery库和我的image.js
<script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/image.js"></script>
然后我们在图片上加点料
<img src=uploads/hphq.jpg" width="200" height="300" autosize='yes' pos='0' />
这里的autosize=’yes’是默认的选择器,image.js已经绑定了在文档加载完毕的时候处理有这个标记的图片.
pos=’0’表示长图片居中显示,这个值有三种选择,如果不指定这个值,则居中显示,也为0 .
-1:居于顶部
0:居于中间
1:居于底部
水平方向始终居中显示.
其实这样就可以了,不用加任何其他的代码,我们上面的这张图片已经居中显示了。
我们也可以手动指定要处理的图片。
$(“img”).autosize(‘#999’);
这样就可以选择所有图片并处理它,那么这里有一个可选的参数,表示填充的背景色。如果不填写这个参数,默认填充为白色
附:image.js 源码
function ResizeImage(obj,color){ if(obj.length>1){alert('select error'); return ;} if(color==undefined){color='#ffffff';} var width=obj.attr('oldwidth'); var height=obj.attr('oldheight'); if(width==undefined){width=obj.attr('width');height=obj.attr('height');} var pos=obj.attr('pos'); if(pos==undefined){pos=0;} var src=obj.attr('src'); var img=new Image(); img.src=src; var oldwidth=img.width; var oldheight=img.height; var pw=width/oldwidth; var ph=height/oldheight; var left=0; var top=0; if(pw<ph){ img.width=width; img.height=oldheight*pw; top=parseInt((height-img.height)/2); }else{ img.height=height; img.width=oldwidth*ph; left=parseInt((width-img.width)/2); } obj.attr('width',img.width); obj.attr('height',img.height); obj.attr('oldwidth',width); obj.attr('oldheight',height); obj.attr('src',img.src); obj.css('position','absolute'); obj.css('left',left); if(pos==1){obj.css('bottom',0);} if(pos==0){obj.css('top',top);} if(pos==-1){obj.css('top',0)} //包裹 if(obj.parent("div[autosize='yes']").length==0){ var div=document.createElement('div'); $(div).css('width',width); $(div).css('height',height); $(div).css('position','relative'); $(div).css('border','none'); $(div).attr('autosize','yes'); $(div).css('background-color',color); obj.wrap(div); } delete img; } jQuery.fn.extend({ autosize:function(color){ this.each(function(){ ResizeImage($(this),color); }) } }); $(function(){ $("img[autosize='yes']").autosize('#999'); });
-
在这个新型的信息社会,网络营销已经慢慢的变成了企业必须要做的推广方式之一,一个企业网站,就等于企业在网上的家,而一个优秀的网站是什么样子的呢?一个具有营销性质的网站是什么样子的呢?
-