zoukankan      html  css  js  c++  java
  • 上传图片之上传后查看大图

    将图片查询出来之后,还需要加一个查看大图的功能,于是就用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来。

    显示大图和隐藏大图的js代码:

    复制代码
    <script type="text/javascript">
       //显示图片
       function over(imgid,obj,imgbig)
       {
    //大图显示的最大尺寸  4比3的大小  400 300
    maxwidth=400;
    maxheight=300;
    
    //显示
            obj.style.display="";
            imgbig.src=imgid.src;
           
            
            //1、宽和高都超过了,看谁超过的多,谁超的多就将谁设置为最大值,其余策略按照2、3
            //2、如果宽超过了并且高没有超,设置宽为最大值
            //3、如果宽没超过并且高超过了,设置高为最大值
            
            if(img.width>maxwidth&&img.height>maxheight)
            {
                pare=(img.width-maxwidth)-(img.height-maxheight);
                if(pare>=0)
                    img.width=maxwidth;
                else
                    img.height=maxheight;
            }
            else if(img.width>maxwidth&&img.height<=maxheight)
            {
                img.width=maxwidth;
            }
            else if(img.width<=maxwidth&&img.height>maxheight)
            {
                img.height=maxheight;
            }            
       }
    
       //隐藏图片
       function out()
       {
    document.getElementById('divImage').style.display="none";
       }
    </script>
    复制代码

    显示小图的image和显示大图的image:

        <img id="img" src="你的图片地址" onmouseover="over(img,divImage,imgbig);" onmouseout="out()" width="100" alt="" height="100" />
            
        <%--显示大图标的区域--%>
        <div id="divImage" style="display: none; left: 120px;top:5px; position: absolute">
            <img id="imgbig" src="~/Images/noImage.gif" alt="预览" />
        </div>
  • 相关阅读:
    leetcode 337. House Robber III
    leetcode 366 Find Leaves of Binary Tree
    leetcode 250 Count Univalue Subtrees
    leetcode 132 Palindrome Pairs 2
    leetcode 131 Palindrome Pairs
    leetcode 336 Palindrome Pairs
    leetcode 214 Shortest Palindrome
    leetcode 9 Palindrome Number
    Socket编程
    Zookeeper
  • 原文地址:https://www.cnblogs.com/ld1022/p/3374557.html
Copyright © 2011-2022 走看看