作为程序员一定要保持良好的睡眠,才能好编程

图片点击以中心向四周放大

发布时间:2017-03-28


此项目基于base.js 框架:

放大.gif

当鼠标放在图片上,并点击后的一个效果,




<html>
    <head>
        <meta charset="utf-8">
        <title>点击图片放大</title>
        <script type="text/javascript" src="js/base.js"></script>
        <script type="text/javascript" src="js/dragImgChange.js"></script>
        <style type="text/css">
             body,ul,li,img{margin:0px;padding:0px;}

             #img1{position: absolute;top:100px; left:100px;width:400px;height:400px;}
            
        </style>
        <script type="text/javascript">
                    window.onload=function(){
                        var img=document.getElementById("img1");
                        img.onclick=function(){
                            startMove(img,{"width":500,"height":500,"marginLeft":-50,"marginTop":-50},"jiasu");
                        }
                    }
            </script>
         
    </head>
    <body>

    <img src="images/1.jpg" id="img1">

    </body>
</html>




点击图片方法,这里使用了startMove这个方法,  运动的方式有两种  buffer  和  jiasu  这两种方式,到时候可以根据自己的需求去填写。