怎么用js实现图片点击时放大，再点击恢复
0
悬赏园豆：50
[已解决问题]
解决于 2012-12-04 10:35
我想用js实现图片点击时放大，再点击恢复，急求！！！！！！
最佳答案
0
最简单的一个方法例子：
<html> <head> <meta charset="utf-8" /> <script type="text/javascript" src='jquery-1.8.0.js'></script> </head> <body> <img id="img1" src="11.jpg" style="width:100px;height:150px" alt="" /> </body> <script type="text/javascript"> $(function(){ $("#img1").click(function(){ var width = $(this).width(); if(width==100) { $(this).width(200); $(this).height(300); } else { $(this).width(100); $(this).height(150); } }); }); </script> </html>
收获园豆：20
其他回答(9)
0
引用jquery
$("img").click(function(){$(this).style("height",$(this).style("height")==="小的值"?"大的值":"小的值");});
收获园豆：10
0
改变img的height和width属性
有具体的代码吗
0
原始的js办法：document.getElementById('xxxx').style.width='800px';将这里封装成方法
jquery办法：$("#xxx").bind("click",function(){
if($(this).style("width")==最小值)
{
$(this).css({width:'800px',height:'800px'});
}else{
$(this).css({width:'100px',height:'100px'});
}
});
收获园豆：10
0
0
有个jquery插件叫zoomy
你可以直接用。
0
mark一下
0
为了 不失真，推荐用两个图片进行替换显示
$("img0").click(function(){$(this).style("display","none");$("img1").style("display","")};
$("img1").click(function(){$(this).style("display","none");$("img0").style("display","")};
收获园豆：10
0
如果用纯JS写 获取图片DOM对象 按照比例改变图片大小，用全局变量控制 变大还是变小
0
如果是手机浏览器呢，会不会影响效果
