<!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>

    div{width:100px;height:100px;font-size:14px;background:red;border:2px solid #000;margin-top:50px;filter:alpha(opacity:30);opacity:0.3;}

</style>

<script>

window.onload = function(){

    var arrDiv = document.getElementsByTagName('div');

    arrDiv[0].onmouseover = function(){

        startMove(this,'width',300);

    };

    arrDiv[1].onmouseover = function(){

        startMove(this,'height',300);

    };

    arrDiv[2].onmouseover = function(){

        startMove(this,'fontSize',100);

    };

    arrDiv[3].onmouseover = function(){

        startMove(this,'borderWidth',50); /*兼容性问题*/

    };

    arrDiv[4].onmouseover = function(){

        startMove(this,'opacity',100); /*兼容性问题*/

    };

    arrDiv[4].onmouseout = function(){

        startMove(this,'opacity',30); /*兼容性问题*/

    };

};

function getStyle(obj,attr){

    return obj.currentStyle ? obj.currentStyle[attr]:getComputedStyle(obj)[attr];

}

function startMove(obj,attr,target){

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        if(attr == 'opacity'){

            var iCur = parseInt(parseFloat(getStyle(obj,attr))*100); /*避免用到小数，alert(0.07*100) //7.000000001*/

        }else{

            var iCur = parseInt(getStyle(obj,attr));

        }

        var speed = (target-iCur)/8;

        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

        if(iCur == target){

            clearInterval(obj.timer);

        }else{

            if(attr == 'opacity'){

                obj.style[attr] = (iCur+speed)/100;

                obj.style.filter = 'alpha(opacity:'+(iCur+speed)+')';

            }else{

                obj.style[attr] = iCur+speed+'px';

            }

        }

    },30);

}

</script>

</head>

<body>

<div></div>

<div></div>

<div>esfdfd</div>

<div></div>

<div></div>

</body>

</html>

js 任意值变化封装的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. JS类的封装及实现代码

    js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样 用class来定义类, 但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类. 1. ...

  3. 【转】第7篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：全自动注册与反射方法分析

    作者: 牛A与牛C之间 时间: 2013-12-12 分类: 技术文章 | 2条评论 | 编辑文章 主页 » 技术文章 » 第7篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  4. 【转】第6篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+自动反射方法分析

    作者: 牛A与牛C之间 时间: 2013-11-21 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第6篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  5. 【转】第5篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：自动注册JS脚本+委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-19 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第5篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  6. 【转】第4篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：委托回调方法分析

    作者: 牛A与牛C之间 时间: 2013-11-18 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第4篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  7. 【转】3篇：Xilium CefGlue 关于 CLR Object 与 JS 交互类库封装报告：官方原生方法分析

    作者: 牛A与牛C之间 时间: 2013-11-17 分类: 技术文章 | 暂无评论 | 编辑文章 主页 » 技术文章 » 第3篇:Xilium CefGlue 关于 CLR Object 与 JS ...

  8. js返回顶部封装 简洁

    js返回顶部封装 简洁: 加入html页面body最后面即可. <script> a(); function a() { $(function() { if ($(".j-to- ...

  9. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

随机推荐

  1. C++逆序输出字符串

    使用库函数 //使用库函数 #include <iostream> #include <string> #include <algorithm> using nam ...

  2. cas单点登录打包时下载慢!

    环境:win10 百度网盘下载 版本:  cas-overlay-template-5.3  提取码    d1b6 添加阿里的到pom.xml    注意添加到第一列 <!--阿里云仓库--& ...

  3. 关于（Building tool）的认识以及当下流行的Building tool有哪些？

    1.Building tool是什么? (Building tool)构建工具是一种工具,它负责构建流程的所有内容,并自动化与构建项目相关的所有内容.它致力于以下任务: 生成源代码(如果在软件项目中使 ...

  4. Mybatis--映射器注解

    因为最初设计时,MyBatis 是一个 XML 驱动的框架.配置信息是基于 XML 的,而且 映射语句也是定义在 XML 中的.而到了 MyBatis 3,有新的可用的选择了.MyBatis 3 构建 ...

  5. JXJJOI2018_T1_market

    题目描述 某天Lemon去超市买柠檬,他发现货架上有N个柠檬,每个柠檬都有一个重量Wi和价格Ci. Lemon身上只带了S元钱,因此他想要买一个价格不超过S的柠檬回家,另外,他希望他买的那个柠檬的性价 ...

  6. 一下午简单写个搭建Flutter开发环境，dome跑起来！

    1.下载flutter包由于需要翻墙,国内下载会出现问题,所有需要先配置一下用户环境变量. export PUB_HOSTED_URL=https://pub.flutter-io.cn export ...

  7. 机器学习入门 - 逻辑(Logistic)回归（5）

    原文地址:http://www.bugingcode.com/machine_learning/ex7.html 把所有的问题都转换为程序问题,可以通过程序来就问题进行求解了. 这里的模拟问题来之于C ...

  8. Linux IO多路复用

    监听文件描述符的状态来进行相应的读写操作,3个函数: 123 selectpollepoll 123456789 int (int nfds, fd_set *readfds, fd_set *wri ...

  9. 由uploadfive看servlet

    一.uploadfive的使用 上传工具是程序设计中最常用的功能,其中,uploadfive插件使用比较多,此处该插件进行文件的上传操作.该插件是基于HTML5的,因此PC端和移动端都可以使用. 使用 ...

  10. Alberto Del Bimbo：为什么说研究员要有想象力？

    ​ Del Bimbo:为什么说研究员要有想象力?" title="Alberto Del Bimbo:为什么说研究员要有想象力?"> ​ 说到科研,与日本式的&q ...