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>
    html,body,ul{margin:0;padding:0;}
    ul{width:366px;position:relative;background:#666;height:500px;margin:0 auto;}
    li{width:100px;height:100px;border:1px solid #000;background:#CCC;float:left;margin:10px;display:inline;list-style:none;z-index:1;}
</style>
<script src='perfectMove.js'></script>
<script>
    window.onload = function(){
        var ul = document.getElementsByTagName('ul')[0];
        var arrLi = ul.getElementsByTagName('li');
        /*布局转换*/
        var minZindex = 2;
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].style.left = arrLi[i].offsetLeft+'px';
            arrLi[i].style.top = arrLi[i].offsetTop+'px';
        }
        //这个不能偷懒，和上面不能合成一个循环
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].style.position = 'absolute';
            arrLi[i].style.margin = 0;/*offset的时候已经赋值过margin*/
        }
        
        /*图片的缩放*/
        
        for(var i=0;i<arrLi.length;i++){
            arrLi[i].onmouseover = function(){
                this.style.zIndex = minZindex++;
                perfectStartMove(this,{width:200,height:200,marginLeft:-50,marginTop:-50});/*margin = （变大的宽-原来的）/2*/
            };
            
            arrLi[i].onmouseout = function(){
                perfectStartMove(this,{width:100,height:100,marginLeft:0,marginTop:0});
            };
        }
    };
</script>
</head>

<body>
<ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>
</body>
</html>

 

posted on 2018-05-07 22:25  朝颜陌  阅读(9562)  评论(0)  编辑  收藏  举报

导航