在编写多块同时触发运动的时候,发现一个BUG,

timer = setInterval(show, 30);本来show是一个自定义函数,
当设为timer = setInterval(show(one,two), 30);时,发现show里面的参数one和two无法被导入,所以需要做以下代码改进和优化

原版的html和css代码在这里javascript动画效果之透明度

js代码如下

 <script>
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
} window.onload = function() { //自定义变量
var div = $("div");
var timer = null;
var alpha = 30; //这里触发进入事件绑定一个无名函数
div.onmouseenter = function() {
//里面为自定义函数,并传参数100为,达到100%的透明度
showDiv(100);
} //同理触发离开事件
div.onmouseleave = function() {
//同理传参数为30,达到30%的透明度
showDiv(30);
} //自定义函数,obj为自定义参数
function showDiv(obj) {
//当前只需要一个定时器,所以需要在每次开始前清除定时器
clearInterval(timer);
//定时器是通过传入的参数obj来自增自减
timer = setInterval(function() {
console.log(alpha);
if (alpha < obj) {
//第一次传参obj为100,alpha为30所以,alpha+10;
alpha += 10;
} else {
//第二次传参obj为30,而alpha为100,所以alpha-10;
alpha -= 10;
}
if (alpha == obj) {
//当相等时,则透明度为30或者100时,所以清除定时器
clearInterval(timer);
} else {
//老版本ie透明度增加或者减少
div.style.filter = 'alpha(opacity: ' + alpha + ');'
//其他浏览器
div.style.opacity = alpha / 100;
}
}, 30);
} }
</script>

javascript动画效果之透明度(修改版)的更多相关文章

  1. javascript动画效果之透明度

    在css中的filter对应老版本的ie浏览器,opacity对应的是其他浏览器 <!DOCTYPE html> <html> <head> <meta ch ...

  2. javascript动画效果之缓冲动画(修改版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  3. Javascript动画效果(三)

    Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...

  4. Javascript动画效果(一)

    Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...

  5. Javascript动画效果(二)

    Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...

  6. Javascript动画效果(四)

    Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...

  7. javascript动画效果之匀速运动(修订版)

    在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...

  8. 【BOOM】一款有趣的Javascript动画效果

    实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下.    boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...

  9. javascript动画效果

    之前工作项目中,运用了缓动动画的效果,在网上看到其他大牛写的相关公式,结合工作需要,进行了整理,拿出来跟大家分享下,js代码中,只运用了一个小功能进行了测试 <!DOCTYPE html> ...

随机推荐

  1. (一)初步了解python

    python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言的一种继承. Py ...

  2. Linux下重置MySQL的Root帐号密码

    1.停止MySQL服务 /etc/init.d/mysqld stop 2.跳过验证启动MySQL /usr/local/mysql/bin/mysqld_safe --skip-grant-tabl ...

  3. mmmmmmmm

    // // AView.m // AutoLayout // // Created by ZhuYi on 16/5/24. // Copyright © 2016年 ZY. All rights r ...

  4. 【Python】0/1背包、动态规划

    0/1背包问题:在能承受一定重量的背包中,放入重量不同,价值不同的几件物品,怎样放能让背包中物品的价值最大? 比如,有三件物品重量w,价值v分别是 w=[5,3,2] v=[9,7,8] 包的容量是5 ...

  5. wpf为ListBox添加渐变

    <Style.Triggers> <Trigger Property="ListBox.AlternationIndex" Value="1" ...

  6. 《HTML5与CSS3权威指南》读书笔记(上册)—HTML5篇

    豆瓣上的评分少且评价不太好,阅读当中发现几处刊物上的小问题,不过线下口碑貌似不错,基本上人手一本 上册五百多页,主讲H5,分为标签,本地存储,离线应用程序,新的API,获取地理位置信息标签包含表单,C ...

  7. C#用 excel 作为模板打印

    //打印操作,套打.打印.预览        enum PrintFlag        {            /// <summary>            /// 套打,只打印没 ...

  8. angular中的jsonp记录

    angular的正常机制采用引入$http服务的形式进行 get post等的访问.但是在跨域访问的时候就需要采用jsonp了. 不废话,直接上示例和引用原文地址: 比如访问地址为 http://ur ...

  9. drupal7 修改文件上传大小限制

    参考文章:Drupal 7 设置上传文件的限制大小 自己用 '#type' => 'managed_file'做了一个上传的功能,但是上传时总是说超过了2M的限制,接下来说一下怎么修改限制. 一 ...

  10. 基于jdk调用天气服务案例及问题

    问题1:解析wsdl文件时出现 把网络上的wsdl保存到本地,把圈起来的那段删掉 代码: 当返回结果不是String类型时: 输入城市编码去查找 所以: 问题二:如果把本地wsdl文件删除的话需要 三 ...