zoukankan      html  css  js  c++  java
  • 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,{200,height:200,marginLeft:-50,marginTop:-50});/*margin = (变大的宽-原来的)/2*/
                };
                
                arrLi[i].onmouseout = function(){
                    perfectStartMove(this,{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>
  • 相关阅读:
    SQL学习之计算字段的用法与解析
    SQL学习之用通配符进行数据过滤
    SQL学习之高级数据过滤
    SQL学习之空值(Null)检索
    JavaScript之arguements对象学习
    django配置数据库
    django创建项目
    django安装
    Django套用现成模板,导入css,js,images等文件
    Nvidia显卡安装驱动
  • 原文地址:https://www.cnblogs.com/moon-yyl/p/9005405.html
Copyright © 2011-2022 走看看