首页 新闻 搜索 专区 学院

怎么用js实现图片点击时放大,再点击恢复

0
悬赏园豆:50 [已解决问题] 解决于 2012-12-04 10:35

我想用js实现图片点击时放大,再点击恢复,急求!!!!!!

糖糖@ 一米阳光的主页 糖糖@ 一米阳光 | 初学一级 | 园豆:129
提问于:2012-11-14 22:05
< >
分享
最佳答案
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
chenping2008 | 大侠五级 |园豆:9836 | 2012-11-15 09:36
其他回答(9)
0

引用jquery

$("img").click(function(){$(this).style("height",$(this).style("height")==="小的值"?"大的值":"小的值");});

收获园豆:10
飞来飞去 | 园豆:2057 (老鸟四级) | 2012-11-14 23:41
0

改变img的height和width属性

田林九村 | 园豆:2367 (老鸟四级) | 2012-11-15 07:49

有具体的代码吗

支持(0) 反对(0) 糖糖@ 一米阳光 | 园豆:129 (初学一级) | 2012-11-15 09:25
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
az235 | 园豆:8283 (大侠五级) | 2012-11-15 10:02
0

楼主需要的是一个图片缩放组件吧,给你推荐一个:

https://github.com/krewenki/jquery-lightbox

拿铁狂热 | 园豆:238 (菜鸟二级) | 2012-11-15 10:44
0

有个jquery插件叫zoomy

你可以直接用。

undefined | 园豆:698 (小虾三级) | 2012-11-15 10:58
0

mark一下

羽商宫 | 园豆:2490 (老鸟四级) | 2012-11-15 14:25
0

为了 不失真,推荐用两个图片进行替换显示

$("img0").click(function(){$(this).style("display","none");$("img1").style("display","")};

$("img1").click(function(){$(this).style("display","none");$("img0").style("display","")};

收获园豆:10
夏小米_ | 园豆:220 (菜鸟二级) | 2012-11-15 14:33
0

如果用纯JS写 获取图片DOM对象 按照比例改变图片大小,用全局变量控制 变大还是变小

落幕残情 | 园豆:9 (初学一级) | 2012-11-26 17:37
0

如果是手机浏览器呢,会不会影响效果

紫泪QQ3079577974 | 园豆:202 (菜鸟二级) | 2017-09-11 10:05
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册