zoukankan html css js c++ java

图片等比例缩放、小图看大图、及图片加载的一些总结

</body>

Note：

　　1 发现 visibility属性在safari浏览器中不支持，所以改用display来控制显示、隐藏

　　2 DrawImage(iwidth,iheight)｛//方法体｝ //iwidth 在页面显示的Width，iheight 在页面显示的height

把代码的重要部分写出来， body 的onload事件，以及多个图片的代码

　　下边是js代码：

　　　　　　function DrawImage(iwidth,iheight){
                $('img[class=bigimage]').each(function(){
                    var image=new Image();
                    image.src=this.src;
                    if ($.browser.safari) { 
                    //如果是 safari浏览器，则要设置image的Width和height，
                    //经过测试 发现safari浏览器   如果不设置图片大小<img src="a.jpg">
                    //得到的Width和height 都是0 
                    //其他浏览器得到的则是原始Width和height
                        image.width=this.width;
                        image.height=this.height;
                    }
                    var bl=image.width/image.height;   //得到原始图片Width和height的比例
                    $(this).attr('width',iwidth); // 设置显示图片的Width
                    //alert($(this).attr('width')); //在ie中 此方法无效，在safari，FF，谷歌浏览器中都可以得到正确值
                    //alert(this.width);
                    //alert($(this).width());   //此方法通用
                    $(this).attr('height',iwidth/bl);  //根据Width和比例（bl）设置height
                    $(this).show();
                });
            }

该方法主要实现了图片可以等比例显示。

因为是改写别人的方法，所以实现的时候没仔细研究，不过在写这篇文章的时候，仔细看了代码，

我就在纳闷，为什么要创建image对象？这个对象的作用是什么？

好像仅仅是为了那句 var bl=image.width/image.height;

而image对象的src，Width，height都是原始图片的属性，那为什么还要创建一个新对象？

以下是我修改后的代码：

　　　　　　function DrawImage(iwidth,iheight){
                $('img[class=bigimage]').each(function(){
                   /* var image=new Image();
                    image.src=this.src;
                    if ($.browser.safari) { 
                    //如果是 safari浏览器，则要设置image的Width和height，
                    //经过测试 发现safari浏览器   如果不设置图片大小<img src="a.jpg">
                    //得到的Width和height 都是0 
                    //其他浏览器得到的则是原始Width和height
                        image.width=this.width;
                        image.height=this.height;
                    }*/
                    var bl=this.width/this.height;  //得到原始图片Width和height的比例
                    $(this).attr('width',iwidth); // 设置显示图片的Width
                    //alert($(this).attr('width')); //在ie中 此方法无效，在safari，FF，谷歌浏览器中都可以得到正确值
                    //alert(this.width);
                    //alert($(this).width());   //此方法在ie、safari、FF、谷歌浏览器中通用
                    $(this).attr('height',iwidth/bl);  //根据Width和比例（bl）设置height
                    $(this).show();
                });
            }

修改之后发现图片不显示了，具体原因，因为能力有限，还希望看到的高手可以解释一二，大家一起学习。

细心的人应该也发现了 body中包含的<div>、及img标签中 onmouseover 和onmouseout事件，其主要实现了小图看大图的效果（有点粗糙）

先贴代码：

　　　　　　function showimage(thi){
                var temp=thi.width/thi.height;
                $("#m img:first-child").attr('src',thi.src);
                $("#m img:first-child").attr('width',thi.width*3); //设置图片为原来的3倍
                $("#m img:first-child").attr('height',(thi.width*3)/temp); //通过Width和比例设置height
                $("#m img:first-child").attr('title','');
                $("#m").show();  //显示图片
                $("#m").css('top',event.clientY);     //通过Jquery对象设置Div的top
                //$("#m")[0].style.top=event.clientY; //通过Dom对象设置Div的top
                
                $("#m").css('left',event.clientX);     //通过Jquery对象设置Div的left
                //$("#m")[0].style.left=event.clientX; //通过Dom对象设置Div的left
            }

            function pichide(){
                $("#m").hide();   //隐藏Div 也就是隐藏图片
            }

综上所述，基本把等比例缩放，以及小图看大图的功能实现了，但还是有点粗糙（Div的位置没有很好的控制），以后有时间的话会慢慢的改进。

有什么不同的看法、或者不同的想法，欢迎大家拍砖、灌水，当然更欢迎高手的指导，目的只有一个，那就是大家一起讨论、学习。

查看全文

相关阅读:
springcloud(3)consul
springcloud(2)服务提供者配置及集群和信息显示改善
 springcloud(1)Eureka配置及集群
 Git操作和配合GitHub进行代码托管
 GitHub的基本使用
 关于mybatis的各种绑定（bind）错误，找不到类的情况
 springboot整合thymeleaf视图解析器
 spring boot 源码分析-------ApplicationContext
https原理
 单例模式

原文地址：https://www.cnblogs.com/AaronLi/p/2063600.html

图片等比例缩放、小图看大图、及图片加载 的一些总结

图片等比例缩放、小图看大图、及图片加载的一些总结