jQuery根据图片长宽比动态横纵向显示

一、需要的包

        jquery-1.7.js

二、实现思路

         1、先用定义两个style,一个是横向显示的class，一个是纵向显示的class

           横向class

.imgHorizontalShow {

        width: 800px;

        height: 450px;

        border:1px solid #ccc;

}

纵向class

.imgVerticalShow {

        width: 450px;

        height: 800px;

        border:1px solid #ccc;

 }

默认是横向显示

2、在编写相应的js脚本

         1）得到图片的dom：

    var img = $("#img1");

        2） 创建一个临时Image对象

             var tempImage = new Image();

         3）得到图片src属性的值

             tempImage.src = img.attr("src");

         4）此时就可以得到图片的真实长和高了

             alert("width: " + theImage.width);

             alert("height: " + theImage.height);

         5）根据图片的 长宽大小来设置图片的 显示方式（横向或者纵向）

            

if(tempImage.width > tempImage.height) {        //横向显示

    img.removeClass("imgVerticalShow").addClass ("imgHorizontalShow");

} else {        //纵向显示

    img.removeClass("imgHorizontalShow").addClass("imgVerticalShow");

}

三、源代码

<script type="text/javascript" src="js/jquery-1.7.js"></script>

<script type="text/javascript">

    $(function() {

        var img = $("#img1");

        var tempImage = new Image();

        tempImage.src = img.attr("src");

        if(tempImage.width > tempImage.height) {        //横向显示

            img.removeClass("imgVerticalShow").addClass("imgHorizontalShow");

        } else {        //纵向显示

            img.removeClass("imgHorizontalShow").addClass("imgVerticalShow");

        }

        //alert("width: " + theImage.width);

        //alert("height: " + theImage.height);

            

    });

</script>