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>

    //效果

  • 相关阅读:
    运算符重载
    责任链模式
    MFC一些常见面试问题
    浅拷贝&深拷贝
    下雨的效果
    本地时间使用与倒计时
    钟表效果
    一种水纹波浪效果
    一个相册效果
    在Flash中管理鼠标右键
  • 原文地址:https://www.cnblogs.com/fangdx/p/3645386.html
Copyright © 2011-2022 走看看