[JS]js实现图片img宽度超出后自动缩小的源代码
[JS]js实现图片img宽度超出后自动缩小的源代码
[JS]js实现图片img宽度超出后自动缩小的源代码
- <script type="text/javascript" src="js/jquery.min.js"></script>
- <script type="text/javascript">
- jQuery.fn.LoadImage=function(scaling,width,height,loadpic){
- if(loadpic==null)loadpic="../img/loading.gif";
- return this.each(function(){
- var t=$(this);
- var src=$(this).attr("src")
- var img=new Image();
- img.src=src;
- //酷播cuplayer.com自动缩放图片
- var autoScaling=function(){
- if(scaling){
- if(img.width>0 && img.height>0){
- if(img.width/img.height>=width/height){
- if(img.width>width){
- t.width(width);
- t.height((img.height*width)/img.width);
- }else{
- t.width(img.width);
- t.height(img.height);
- }
- }
- else{
- if(img.height>height){
- t.height(height);
- t.width((img.width*height)/img.height);
- }else{
- t.width(img.width);
- t.height(img.height);
- }
- }
- }
- }
- }
- //酷播cuplayer.com处理ff下会自动读取缓存图片
- if(img.complete){
- autoScaling();
- return;
- }
- $(this).attr("src","");
- var loading=$("<img alt=\"酷播cuplayer.com加载中...\" title=\"图片加载中...\" src=\""+loadpic+"\" />");
- t.hide();
- t.after(loading);
- $(img).load(function(){
- autoScaling();
- loading.remove();
- t.attr("src",this.src);
- t.show();
- });
- } );
- }
- </script>
- <div id="content"><img src="img/20120518073933709.jpg"/></div>
- <script type="text/javascript">
- <!--
- $(window).load(function(){
- $('#content img').LoadImage(true, 600,500,'img/loading.gif');
- });
- //-->
- </script>
热门文章推荐
- [JS]window.location获取url各项参数详解
- [JS]jQuery,javascript获得网页的高度和宽度
- [JS]视频弹窗视频弹出层videoLightBox(含三种播放器的用法)
- [JS]JS提交中文encodeURI两次转码
- [JS]js版方面encodeURI转码和decodeURI解码的用法实例
- [JS]js取当前机子的时间戳实例
- [JS]AES加密(基于crypto-js)PHP后端解密
- [JS]data:image/png;base64写法的用途及说明
请稍候...