zoukankan      html  css  js  c++  java
  • 用js实现的一个小程序(对一块区域的放大,缩小)

    //css

    <style type="text/css">

    #enlarge1{position:absolute;100px; height:100px; border:1px solid #000;}
    #enlarge2{position:absolute; top:100px; 100px; height:200px ;margin-top:20px; border:1px solid #000; }
    #enlarge3{position:absolute; top:10px; left:110px;200px; height:312px; margin-left:10px; margin-top:-2px; border:1px solid #000; }
    </style>

    //html

    <div id="enlarge1"></div>
    <div id="enlarge2"></div>
    <div id="enlarge3"></div>

    //js

    <script type="text/javascript">
    function enlargeFc(id,x,y){
    var option=document.getElementById(id);
    var optionWidth=option.clientWidth;
    var optionHeight=option.clientHeight;

    option.onmouseover=function(){
    this.style.width=optionWidth*x+"px";
    this.style.height=optionHeight*y+"px";
    this.style.background="#0f0";
    this.style.zIndex=100000;
    }
    option.onmouseout=function(){
    this.style.width=optionWidth+"px";
    this.style.height=optionHeight+"px";
    this.style.background="";
    this.style.zIndex="auto";
    }

    }
    enlargeFc("enlarge2",1,1);
    </script>

    //效果

  • 相关阅读:
    多线程与多进程
    Socket网络编程
    Python之路【第五篇】:面向对象及相关
    python 面向对象(进阶篇)
    面向对象
    day1
    day3
    day2
    黑马程序员--C语言中的指针(6)
    黑马程序员--C语言中的指针(5)
  • 原文地址:https://www.cnblogs.com/fangdx/p/3645386.html
Copyright © 2011-2022 走看看