<!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. LeetCode 之 Longest Valid Parentheses（栈）

    [问题描写叙述] Given a string containing just the characters '(' and ')', find the length of the longest v ...

  2. LinQ开篇介绍

    语言集成查询(LINQ)是 Visual Studio2008中引入的一组功能. 可为 C# 和 Visual Basic 语言语法提供强大的查询功能. LINQ引入了标准易学的数据查询和更新模式,能 ...

  3. osg提前定义几何体设置颜色

    注意尽管osg::shape不能够设置颜色,可是osg::shapedrawable能够.

  4. Maven+Mybatis+Spring+SpringMVC实现分页查询（附源代码）

    以下小宝鸽将分享一篇Mybatis分页功能的博文,以下将给出具体的步骤.跟着博主的节奏肯定能实现.另外最后还会附上整个project的源代码.假设是没有使用过maven的猿友可自行下载相关的jar包就 ...

  5. SSH-struts2的异常处理

    在学习j2se的时候学习过利用java的exception类去处理异常.在struts2框架中也提供了对于异常的处理.简单说就是当Action发生异常时.能够在struts2.xml文件里进行配置,将 ...

  6. MySQL测试代码

    MySQL测试代码 # 注释内容 -- 注释内容 -- 创建maizi数据库 CREATE DATABASE IF NOT EXISTS `maizi` DEFAULT CHARACTER SET ' ...

  7. 图片存储系统TFS

    1 TFS和GFS比较 1.1 GFS的应用场景 第一,百万级别的文件,并且是大文件,文件都是100MB以上,1G级别的文件很常见. 第二,集群是建立在商业计算机之上,并不可靠,监控各个节点的状态,当 ...

  8. spring 之 IOC 依赖注入详解

    当我们对一个javaBean进行实例化时,在原本的情况下我们会选择新建一个接口,然后进行实例化,为了进一步降低耦合度我们还会使用工厂模式进行封装. 例: 当我们想要去造,Chinese.America ...

  9. codeforces 965E Trie+multiset

    E. Short Code time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. bzoj2521

    最小生成树+最小割 ...我太zz了,没看出来全体减1是一个加1,看见后就是sb题了... 我们发现根据克鲁斯卡尔的过程,我们把边从小到大加入,如果两点已经相连就跳过,那么我们把所有小于等于这条边的边 ...