(急,高手)js鼠标点击图片放大后再点击关闭代码

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了(急,高手)js鼠标点击图片放大后再点击关闭代码相关的知识,希望对你有一定的参考价值。

<script>
function clickImg(obj)


var dv=document.getElementById("div1");
dv.innerhtml="<img src="+obj.src+" width=500 height=400 />";


</script>

<img src=<%=rs_Product("CompVisualize")%> width="170" height="128" border=0 onClick="clickImg(this)"/>
<div id="div1" style="position:absolute">
</div> </a></td>

你的代码看起来太让人痛苦了。。。所以直接说思路吧。
onlick函数里面判断一下点击状态就行了。
方法1:用一个变量来存,clicktime = 0,还没点击,clicktime =1 点了一次,clicktime =2 点了两次,所以通过clicktime 的值来判断图片应该放大还是关闭。
方法2:通过图片自身来判断,if(document.getElementByid(imgid).width==100)那么它就放大,if(document.getElementByid(imgid).width==500)那么它就关闭。style.display设置为none就行了
参考技术A dv.innerHTML="<img src="+obj.src+" width=500 height=400 onclick=\"document.getElementById('div1').innerHTML='';\"/>";

怎么用js实现图片的缩小?

是用js实现的吗

  一般来说,实现图片的放大缩小功能都用到了比较大的封装插件,特别是以jQuery插件居多,而实际上单纯实现对原图本身的放大缩小,用简单几行原生JS代码就可以做到。在今天分享的这个实例中,点击放大按钮不松鼠标,图片会不断的逐渐放大,当然也可以点一下放大一点,点击缩小按钮则反之,有需要的朋友可以考虑收藏备用哦

  以下为全部代码:

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>javascript控制图片缩小或者放大</title>
    </head>
    <body>
        <script type="text/javascript">
            var oTime;
            function changeSize(id,action)
             var obj=document.getElementById(id);
             obj.style.zoom=parseInt(obj.style.zoom)+(action=='+'?+10:-10)+'%';
             oTime=window.setTimeout('changeSize(\\''+id+'\\',\\''+action+'\\')',100);
            
            document.onmouseup=function()
             window.clearTimeout(oTime);
            
        </script>
        <div style="height:350px; overflow: auto;">
        <img id="headImg" src="

        <button onmousedown="changeSize('headImg','+');" onmouseup="window.clearTimeout(oTime);">放大</button>
        <button onmousedown="changeSize('headImg','-');" onmouseup="window.clearTimeout(oTime);">缩小</button>
    </body>
</html>

参考技术A <input type="button" value="缩小" onclick="small1()">
<input type="button" value="放大" onclick="big1()">
<br>
<BR>
<img border="0" name=images1 src="图片路径" >
<script>
function small()
var height1=images0.height
var width1=images0.width
images0.height=height1/缩小的倍数
images0.width=width1/缩小的倍数
参考技术B 写 function得时候设定width,Height参数

以上是关于(急,高手)js鼠标点击图片放大后再点击关闭代码的主要内容,如果未能解决你的问题,请参考以下文章

javascript高手请进!关于就js控制网页图片放大缩小的问题

JS (随着鼠标的移动,旁边显示放大图)

鼠标移动到一图片上鼠标形状变成放大镜形状

求一个简单的点击图片放大缩小的JS代码

前端怎么实现点击图片将图片放大而且图片可以手势随意缩放,最好附上代码,非常感谢

js图片滚动鼠标移上去放大