zoukankan      html  css  js  c++  java
  • 点滴积累【JS】---JS小功能(JS实现动态添加运动属性)

    效果:

    思路:

    首先遍历div挨个执行onmouseover事件,再设置获取非行间样式。然后编写setInterval计时器框架,框架内容是:将三个参数 div、div属性、div的目标点,分别获得,然后设置计时器,设置div的移动速度,然后进位转换,再判断什么时候停止,再进行移动。

    代码:

     1 <head runat="server">
     2     <title></title>
     3     <style type="text/css">
     4         div
     5         {
     6             width: 200px;
     7             height: 200px;
     8             background: #FF0000;
     9             margin: 10px;
    10             border: 5px solid black;
    11             float:left;
    12         }
    13     </style>
    14     <script type="text/javascript">
    15 
    16         window.onload = function () {
    17             var oDivAll = document.getElementsByTagName('div');
    18             for (var i = 0; i < oDivAll.length; i++) {      //遍历div触发事件
    19                 oDivAll[i].timer = null;
    20                 oDivAll[i].onmouseover = function () {
    21                     move(this, 'font-size', 50);      //添加【任意属性】进行改变
    22                 }
    23                 oDivAll[i].onmouseout = function () {
    24                     move(this, 'font-size', 20);
    25                 }
    26             }
    27         };
    28         function getStyle(obj, name) {       //获取非行间样式
    29             if (obj.currentStyle) {     //判断兼容性
    30                 return obj.currentStyle[name];  //兼容IE
    31             }
    32             else {
    33                 return getComputedStyle(obj, false)[name];  //兼容Chrome   FF
    34             }
    35         }
    36         function move(obj, attr, end) {     //框架部分
    37             clearInterval(obj.timer);       //清除之前计时器
    38             obj.timer = setInterval(function () {       //开始相应物体的计时器
    39                 var objStyle = parseInt(getStyle(obj, attr));       //该物体的属性参数
    40                 var speed = (end - objStyle) / 5;       //(终点-每次移动的距离)/缩放系数=要走的速度
    41                 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);   //小数取整,进位取整
    42                 if (objStyle == end) {          //如果距离到达终点那么就关闭计时器
    43                     clearInterval(obj.timer);
    44                 }
    45                 else {
    46 
    47                     obj.style[attr] = objStyle + speed + 'px';      //根据属性进行运动
    48                 }
    49             }, 30)
    50         }
    51     </script>
    52 </head>
    53 <body>
    54     <div id="div1">
    55     </div>
    56     <div id="div2">
    57     </div>
    58     <div>青苹果</div>
    59 </body>
  • 相关阅读:
    【ASP.Net MVC3 】使用Unity 实现依赖注入
    小菜学习设计模式(五)—控制反转(Ioc)
    ASP.NET MVC中使用Unity Ioc Container
    Unity依赖注入使用详解
    单例模式实现
    Oracle书籍资料链接——更新ing
    eclipse设置控制台字体大小
    eclipse——反编译插件
    java.lang.String里面的trim()方法——删除首尾空格
    java关键词整理——思维导图
  • 原文地址:https://www.cnblogs.com/xinchun/p/3450308.html
Copyright © 2011-2022 走看看