鼠标打击图片在原图上放大，在点击返回原图

                      如何实现鼠标打击图片在原图上放大，在点击返回原图的js特效.

解决方案 »

  1.   

    JQ代码   图片id为img$("#img").toggle(
        function(){
            $(this).css({"width":"300px","height":"300px"});//第一次点击方放大
        },
        function(){
            $(this).css({"width":"200px","height":"200px"});//原始大小为200*200
        }
    );
      

  2.   

     html:
    <div>
     <img id="image1"  src="images/love.png" class="image1" ></img>
     </div>css样式:
     .image1
       {
            width:100px;
     height:100px;
       }   .image2
       {
            width:200px;
     height:200px;
       }jqury代码:$(document).ready(function(){
    $("#image1").click(function(){
      $(this).toggleClass("image2");
    });});
      

  3.   

    完整的代码来啦，楼上都是JQuery的，人家楼主问的是JS的呵呵：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style title="text/css">
    .img1{
    }
    .img2{
    width:200px;
    height:200px;
    }

    </style>
    <script type="text/javascript">
    function toggleit(){
    var img1=document.getElementById("img1");
    if(img1.className=="img1"){
    img1.className="img2";
    }
    else{
    img1.className="img1";
    }
    }
    </script>
    </head><body>
    <img id="img1" src="a.png" class="img1" onclick="toggleit()" />这里是其它内容。
    </body>
    </html>
      

  4.   

    完整代码来啦，楼上都是jQuery的，我就来JS的吧，再说人家楼主问的是JS的：
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style title="text/css">
    .img1{
    }
    .img2{
    width:200px;
    height:200px;
    }

    </style>
    <script type="text/javascript">
    function toggleit(){
    var img1=document.getElementById("img1");
    if(img1.className=="img1"){
    img1.className="img2";
    }
    else{
    img1.className="img1";
    }
    }
    </script>
    </head><body>
    <img id="img1" src="a.png" class="img1" onclick="toggleit()" />这里是其它内容。
    </body>
    </html>
      

  5.   

    改 className属性值=“class类的名字”、
      

  6.   

    document.getElementById("imgId").onclick = function() {
        if(this.style.width == beforeWidth && this.style.height = beforeHeight) {
            this.style.width == newWidth;
            this.style.height = newHeight
        }
        else {
            this.style.width == beforeWidth;
            this.style.height = beforeHeight
        }
    }