JS运动改变单物体透明度的方法分析

本文实例讲述了JS运动改变单物体透明度的方法。分享给大家供大家参考，具体如下：

除了通过改变物体的 宽，高，letf,top位置或者是运动方向来实现物体运动效果之外，改变物体的透明度，也是运动特效

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmousemove = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
}
var timer = null;
function startMove(iTarget) {
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    timer = setInterval(function(){
      if(oDiv.offsetAlpha == iTarget){
        ....
      }
    },30);
}
</script>

但是在js中只有offsetLeft/Top ,offsetWidth/Height,这四个方法，并没有offsetAlpha这个方法。

问：那么我们怎么来 获取当前物体的透明度那？？

我们可以自己定义一个变量 var alpha  = 30;通过判断这个变量 是否和目标值是否相等，来继续我们下一步的操作;

var alpha = 30; // 自定义一个变量

当alpha 等目标值得时候，清楚定时器，否则就改变透明度的值alpha

if(alpha == iTarget){
   clearInterval(timer);
}else{
   alpha += iSpeed;
   oDiv.style.opacity = alpha/100;
   oDiv.style.filter = 'alpha(opacity:'+alpha+')';
}

完整的代码如下：

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

css样式部分：

<style>
    #div1{
      width: 100px;height: 100px;
      background: green;
      opacity:0.3;
      filter:alpha(opacity:30);/*兼容低版本IE*/
    }
</style>

js部分：

<script>
  window.onload = function () {
    var oDiv = document.getElementById('div1');
    oDiv.onmousemove = function () {
      startMove(100);
    }
    oDiv.onmouseout = function () {
      startMove(30);
    }
  }
  var timer = null;
  var alpha = 30;
  function startMove(iTarget) {
    clearInterval(timer);
    var oDiv = document.getElementById('div1');
    var iSpeed = 0;
    timer = setInterval(function(){
      if(alpha>iTarget){
        iSpeed = -10;
      }else{
        iSpeed = 10;
      }
      if(alpha == iTarget){
        clearInterval(timer);
      }else{
        alpha += iSpeed;
        oDiv.style.opacity = alpha/100;
        oDiv.style.filter = 'alpha(opacity:'+alpha+')';
      }
    },30);
  }
</script>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript中json操作技巧总结》、《JavaScript错误与调试技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

您可能感兴趣的文章:

  • javascript多物体运动实现方法分析
  • Javascript 多物体运动的实现
  • JS实现多物体缓冲运动实例代码
  • JS多物体 任意值 链式 缓冲运动
  • JS多物体实现缓冲运动效果示例
  • JavaScript运动框架 多物体任意值运动（三）
  • JS实现物体带缓冲的间歇运动效果示例
  • JS实现多物体运动的方法详解
赞 (0)

相关推荐

  • Javascript 多物体运动的实现

    我们先来看下之前的运动的代码,是否支持多物体运动,会出现怎么样的问题. 复制代码 代码如下: <style type="text/css">             div {                 width: 100px;                 height: 50px;                 background: red;                 margin: 10px;             }         </

  • JavaScript运动框架 多物体任意值运动（三）

    JavaScript运动框架 多物体任意值运动（三）

    前面两篇都是单物体的运动,本文开始讲多物体的运动,比如多个div的各自不同的属性如宽,高,字体大小,透明度的缓冲运动变化. 从本文起,就不再使用offsetWdith,offsetHeight了等等,因为会出现问题,比如加个border,offsetWidth就会出现严重问题,参见我个人的博客JavaScript中offsetWidth的'bug'及其对策解决方案就是封装getStyle(obj, attr) 函数,用了获取运动中的当前值! function getStyle(obj, name

  • javascript多物体运动实现方法分析

    javascript多物体运动实现方法分析

    本文实例讲述了javascript多物体运动实现方法.分享给大家供大家参考,具体如下: 这里需要注意:每个运动物体的定时器作为物体的属性独立出来互不影响,属性与运动对象绑定,不能公用. 运行效果截图如下: 例子: <!doctype html> <html> <head> <meta charset="utf-8"> <title>多物体运动</title> <style> div{ width:100

  • JS实现多物体运动的方法详解

    JS实现多物体运动的方法详解

    本文实例分析了JS实现多物体运动的方法.分享给大家供大家参考,具体如下: 基本步骤 1.通过getElementsByTagName获取到要做多物体运动的元素 2.然后for循环遍历元素,添加事件 3.定义startMove函数,需要两个参数,当前"做运动"的元素,和目标值target 注意问题:在多物体运动中,所有的东西不能公用: <script> window.onload = function(){ var liTags = document.getElementsB

  • JS多物体实现缓冲运动效果示例

    本文实例讲述了JS多物体实现缓冲运动效果的方法.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

  • JS实现物体带缓冲的间歇运动效果示例

    本文实例讲述了JS实现物体带缓冲的间歇运动效果.分享给大家供大家参考,具体如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <titl

  • JS多物体 任意值 链式 缓冲运动

    复制代码 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" charset="utf-8" /> <meta http-equiv="content-type" content="text/html" /> <title>demo</title> </h

  • JS实现多物体缓冲运动实例代码

    JS实现多物体缓冲运动实例代码

    效果: 思路: 利用setInterval计时器进行运动,offsetWidth实现宽度的变动,在用onmouseover将终点和所选中的DIV放入参数再进行缓冲运动. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css">        div        {            width: 100px

  • JS运动改变单物体透明度的方法分析

    本文实例讲述了JS运动改变单物体透明度的方法.分享给大家供大家参考,具体如下: 除了通过改变物体的 宽,高,letf,top位置或者是运动方向来实现物体运动效果之外,改变物体的透明度,也是运动特效 <script> window.onload = function () { var oDiv = document.getElementById('div1'); oDiv.onmousemove = function () { startMove(100); } oDiv.onmouseout

  • angular.js + require.js构建模块化单页面应用的方法步骤

    angular.js + require.js构建模块化单页面应用的方法步骤

    前言 本文主要给大家介绍的是关于利用angular.js + require.js构建模块化单页面应用的方法,分享出来供大家参考学习,需要的朋友们下面来一起看看详细的介绍吧. AngularJS描述: angularjs是可以用来构建WEB应用的,WEB应用中的一种端对端的完整解决方案.通过开发者呈现一个更高层次的抽象来简化应用的开发.最适合的就是用它来构建一个CRUD应用,它提供了非常方便的且统一高效的解决方案,其数据绑定.基本模版标识符.表单验证.路由.深度链接.组件重用.依赖注入.以及HT

  • JS动态改变表格边框宽度的方法

    本文实例讲述了JS动态改变表格边框宽度的方法.分享给大家供大家参考.具体如下: 下面的JS代码通过表格对象的border属性修改表格边框宽度 <!DOCTYPE html> <html> <head> <script> function changeBorder() { document.getElementById('myTable').border="10"; } </script> </head> <b

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

  • JS实现淡入淡出图片效果的方法分析

    本文实例讲述了JS实现淡入淡出图片效果的方法.分享给大家供大家参考,具体如下: 效果:鼠标移入时,图片由半透明逐渐变成清晰,移出时,由清晰变为半透明 分析:用变量来储存透明度,因为元素.style.alpha不能直接增加或减少 核心代码: window.onload=function(){ var oDiv=document.getElementById("div1"); var timer=null; var alpha=30; oDiv.onmouseover=function()

  • js/jquery遍历对象和数组的方法分析【forEach，map与each方法】

    本文实例讲述了js/jquery遍历对象和数组的方法.分享给大家供大家参考,具体如下: JS forEach方法 arr[].forEach(function(value,index,array){ //do something }) 参数:value数组中的当前项,index当前项的索引,array原始数组: 数组中有几项,那么传递进去的匿名回调函数就需要执行几次: 理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改:但是可以自己通过数组的索引来修改原来的数组: va

  • JS浅拷贝和深拷贝原理与实现方法分析

    本文实例讲述了JS浅拷贝和深拷贝原理与实现方法.分享给大家供大家参考,具体如下: 浅拷贝只会拷贝一层,深层的引用类型改变还是会受到影响. 深拷贝是所有内部的属性还有值都被拷贝了一份,不管深层的引用类型怎么改都不会受到影响. 浅拷贝的实现方式 1.自定义函数 function shallowClone (initalObj) { var obj = {}; for ( var i in initalObj) { obj[i] = initalObj[i]; } return obj; } 2.ES

  • js实现登录时记住密码的方法分析

    本文实例讲述了js实现登录时记住密码的方法.分享给大家供大家参考,具体如下: 常见的很多网站登录,都有记住密码功能,下面是用js实现的记住密码功能(代码用的源生js,不用引入任何插件,大家如果引入了jQuery,可以进行修改,优化) js部分 window.onload = function(){ var oForm = document.getElementById('myForm'); var oUser = document.getElementById('username'); var

  • JS数组搜索之折半搜索实现方法分析

    本文实例讲述了JS数组搜索之折半搜索实现方法.分享给大家供大家参考,具体如下: 一. 方法原理: 当从一个给定的序列数组arr中, 查找某个特定值value时, 折半搜索法是这样做的: 1. 确定搜索范围的起始点: 起点startIndex = 0, 终点endIndex = arr.length - 1; 2. 根据起始点来确定一个中间点middle = Math.floor((终点 - 起点) / 2); 3. 在startIndex < endIndex的前提下, 比较arr[middle

  • vue.js实现插入数值与表达式的方法分析

    本文实例讲述了vue.js实现插入数值与表达式的方法.分享给大家供大家参考,具体如下: vue.js在插入数值的时候有三种方式 1.插入纯文本 插入纯文本是最简单的方式,使用双大括号就能插入想要的值. <span>{{ msg }}</span> mustache也可以在属性中使用 <div id="item-{{ id }}"></div> 就能显示所需要显示的文本信息了.但是有时候,我们想要插入的html文本,这时候要怎么办呢?在插入

随机推荐