<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>透明度</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    #div1{width:200px;height:200px;background: red;filter:alpha(opacity:30);opacity: 0.3;}

</style>

<script>

    window.onload=function(){

        var oDiv=document.getElementById('div1');

        oDiv.onmouseover=function(){

            movestar(100);

        }

        oDiv.onmouseout=function(){

            movestar(30);

        }

    }

    var timer=null;

    var alpha=30;

    function movestar(iTarget){

            var oDiv=document.getElementById('div1');

            clearInterval(timer);

            timer=setInterval(function(){

                var speed=0;

                if(alpha<iTarget){

                    speed=10;

                }else{

                    speed=-10;

                }

                if(alpha==iTarget){

                   clearInterval(timer);

               }else{

                alpha+=speed;

                oDiv.style.filter='alpha(opacity:'+alpha+')';

                oDiv.style.opacity=alpha/100;

               }

            },30)

        }

</script>

</head>

<body>

    <div id="div1"></div>

</body>

</html>

js操作元素透明度以及浏览器兼容性的更多相关文章

  1. vue.js操作元素属性

    vue动态操作div的class 看代码: <!doctype html> <html lang="en"> <head> <meta c ...

  2. 前端研究CSS之文字与特殊符号元素结合的浏览器兼容性总结

    页面布局里总是会有类似 “文字 | 文字” 的设计样式,不同的浏览器存在严重偏差. 有兼容问题就要解决,下面总结了3种解决方案,分享给大家: 一.系统默认的样式 1.元素换行的段落 <div c ...

  3. JS——操作元素属性

    属性的操作包括:读和写 方法: 1)”.“操作 2)”[ ]“操作 eg: var oDiv = document.getElementById('div1'); var attr = 'color' ...

  4. js操作元素导致元素错位和大小改变

    使用js循环的方式批量控制元素的大小时结果往往不尽如人意. 我总结了一条规律 在一个循环体内不可以同时存在一下两种操作,否则容易导致元素错位或大小改变: 1.对元素的offsetWidth.offse ...

  5. [置顶] js操作iframe兼容各种浏览器

    在做项目时,遇到了操作iframe的相关问题.业务很简单,其实就是在操作iframe内部某个窗体时,调用父窗体的一个函数.于是就写了两个很简单的htm页面用来测试,使用网上流行的方法在谷歌浏览器中始终 ...

  6. js 一个不得不注意的浏览器兼容性问题 进制转换

    写几行JS代码 var num = '022'; alert(num+' '+parseInt(num)+' '+parseInt(num,10)); 不同的浏览器将会得到不同的结果在谷歌浏览器下的结 ...

  7. Js操作DOM及获取浏览器高度以及宽度

    1.获取网页可见区域的宽度:document.body.clientWidth ; 2.获取网页可见区域的高度:document.body.clientHeight; 3.获取 网页可见区域宽:doc ...

  8. Selenium with Python 005 - 调用js操作页面元素

    WebDriver提供了execute_script()方法来执行JavaScript方法,格式如 driver.execute_script(script,*args) 执行js一般有两种场景,一是 ...

  9. webdriver与JS操作浏览器元素

    1.JQuery的选择器实例 语法 描述 $(this) 当前 HTML 元素 $("p") 所有 <p> 元素 $("p.intro") 所有 c ...

随机推荐

  1. delphi的一些语法知识 以及参数传递问题，按引用方式传递参数，按值方式传递参数

    //delphi中exit,abort,break,continue 的区别 exit: 退出函数体abort: 遇到异常,安静处理,就是不显示不提示break: 退出当前循环体,包括for ,whi ...

  2. 手动安装Firefox Linux

    (2015-06-05 17:22:19)[编辑][删除] 转载▼ 标签: 股票 Firefox 下载文件以.tar和.bz2格式保存,必须从这些压缩包中提取文件.不想删除当前安装的 Firefox, ...

  3. android几个高速打包命令

    在MTK  android4.4 上,有几条命令能够高速打包system uaserdata bootimage,可提高效率. snod:这个命令是能够高速打包system.是不会运行android各 ...

  4. 用jquery给元素动态绑定事件及样式

    网页输出的时候,可以用jquery给各种元素绑定事件,或设置样式. 之所以这样做,好处是节省代码,尤其适合元素很多,并且元素的事件对应的函数雷同的情况. 看看以下代码: <div id=&quo ...

  5. Genymotion模拟器连接不上开发服务器解决办法

    问题截图: 问题原因:虚拟机没有联网.可以打开虚拟机的浏览器随便打开一个网站试一下能不能正常上网.如果不能正常上网. 第一步: 打开VirtualBox 点击确定.重启Genymotion.

  6. Mac下搭建react native开发环境

    安装必需软件 Homebrew Homebrew, Mac系统的包管理器,用于安装NodeJS和一些其他必需的工具软件. /usr/bin/ruby -e "$(curl -fsSL htt ...

  7. UIColor与十六进制字符串互转

    UIColor转十六进制字符串 方法一:经过测试发现部分颜色会转化为#fffff(五个f),转化残缺导致最后颜色无法还原,不推荐使用. // UIColor转#ffffff格式的字符串 + (NSSt ...

  8. 混淆时报：Proguard returned with error code 1. See console

    发生这个错误是因为打包混淆时找不到我们的引用包,有的人可能说我没有引用什么Library啊,事实上,我们现在的项目创建时就默认有v4包,这是google提供的兼容包,主要为了应对Android3.0以 ...

  9. Tensorflow学习笔记——占位符和feed_dict（二）

    创建了各种形式的常量和变量后,但TensorFlow 同样还支持占位符.占位符并没有初始值,它只会分配必要的内存.在会话中,占位符可以使用 feed_dict 馈送数据. feed_dict是一个字典 ...

  10. 偏差（bias）和方差（variance）及其与K折交叉验证的关系

    先上图: 泛化误差可表示为偏差.方差和噪声之和 偏差(bias):学习算法的期望预测与真实结果(train set)的偏离程度(平均预测值与真实值之差),刻画算法本身的拟合能力: 方差(varianc ...