1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6. <title>透明度</title>
  7. <meta name="description" content="">
  8. <meta name="keywords" content="">
  9. <link href="" rel="stylesheet">
  10. <style>
  11.     #div1{width:200px;height:200px;background: red;filter:alpha(opacity:30);opacity: 0.3;}
  12. </style>
  13. <script>
  14.     window.onload=function(){
  15.         var oDiv=document.getElementById('div1');
  16.         oDiv.onmouseover=function(){
  17.             movestar(100);
  18.         }
  19.         oDiv.onmouseout=function(){
  20.             movestar(30);
  21.         }
  22.     }
  23.     var timer=null;
  24.     var alpha=30;
  25.     function movestar(iTarget){
  26.             var oDiv=document.getElementById('div1');
  27.             clearInterval(timer);
  28.             timer=setInterval(function(){
  29.                 var speed=0;
  30.                 if(alpha<iTarget){
  31.                     speed=10;
  32.                 }else{
  33.                     speed=-10;
  34.                 }
  35.                 if(alpha==iTarget){
  36.                    clearInterval(timer);
  37.                }else{
  38.                 alpha+=speed;
  39.                 oDiv.style.filter='alpha(opacity:'+alpha+')';
  40.                 oDiv.style.opacity=alpha/100;
  41.                }
  42.             },30)
  43.         }
  44. </script>
  45. </head>
  46. <body>
  47.     <div id="div1"></div>
  48. </body>
  49. </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. 手把手教你编写一个简单的PHP模块形态的后门

    看到Freebuf 小编发表的用这个隐藏于PHP模块中的rootkit,就能持久接管服务器文章,很感兴趣,苦无作者没留下PoC,自己研究一番,有了此文 0×00. 引言 PHP是一个非常流行的web ...

  2. poj 2318 TOYS &amp; poj 2398 Toy Storage (叉积)

    链接:poj 2318 题意:有一个矩形盒子,盒子里有一些木块线段.而且这些线段坐标是依照顺序给出的. 有n条线段,把盒子分层了n+1个区域,然后有m个玩具.这m个玩具的坐标是已知的,问最后每一个区域 ...

  3. [AngularJS] Store the entry url and redirect to entry url after Logged in

    For example when a outside application need to visit your app address: https://www.example.com/#/lob ...

  4. yarn-cli 缓存

    yarn cache list Yarn 会在你的用户目录下开辟一块全局缓存用以保存下载的包.yarn cache list 用于列出所有已经缓存的包. yarn cache dir 执行 yarn ...

  5. poj 2728 最优比例生成树（01分数规划）模板

    /* 迭代法 :204Ms */ #include<stdio.h> #include<string.h> #include<math.h> #define N 1 ...

  6. IOS View编程指南笔记

    我们所示程序 对于一切IOS APP来说.我们看的的内容,都是UIView所呈现的. UIView如场景,UIWindow如舞台.UIView粉墨登场在UIWindow这个舞台上,使我们看到丰富多彩的 ...

  7. 在HDInsight中从Hadoop的兼容BLOB存储查询大数据的分析

    在HDInsight中从Hadoop的兼容BLOB存储查询大数据的分析 低成本的Blob存储是一个强大的.通用的Hadoop兼容Azure存储解决方式无缝集成HDInsight.通过Hadoop分布式 ...

  8. Unity3D研究之多语言用中文做KEY

     做多语言的时候用中文做KEY绝对是有100%的优点,假设用英文表示那么代码里面给文字赋值的地方全都是英文.写的代码多了以后维护起来就没有人能看懂了,或者看起来非常费劲. 对PoolManager ...

  9. android.app.Fragment与android.support.v4.app.Fragment不一致

    在看法中用到的Fragment在类型转换的时候非常easy出现这样的问题: 对照代码: class MyFragmentPagerAdapter extends FragmentPagerAdapte ...

  10. [办公应用]如何将excel合并单元格分拆后每个单元格上仍保留数据？

    合并单元格虽然美观,但是无法进行排序.筛选等操作. 只有合并单元格拆分后才可以按常规进行统计.但是普通拆分后,excel仅保留合并单元格数据到区域左上角的单元格. 解决方案:选定多个合并单元格,应用本 ...