javascript动画效果之多物体透明度
html和css 仅为布局，需要注意的是filter对应的是老版本的ie浏览器透明度，而opacity对应的其他浏览器的透明度
filter: alpha(opacity: 50);
opacity: 0.5;
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
font-size: 12px;
} div {
margin: 10px;
height: 360px;
width: 200px;
} ul {
list-style: none;
} ul li {
width: 200px;
height: 100px;
background: blue;
margin-bottom: 20px;
cursor: pointer;
filter: alpha(opacity: 50);
opacity: 0.5;
}
</style>
</head> <body>
<div>
<ul id="squLi">
<li></li>
<li></li>
<li></li>
</ul>
</div> </body> </html>
js部分也是通过for循环来给每个li标签都加入一个鼠标触发事件
<script type="text/javascript">
function $(id) {
return typeof id === "string" ? document.getElementById(id) : id;
}
window.onload = function() {
//自定义变量为li标签的集合
var aLi = $("squLi").getElementsByTagName("li"); //通过for循环给每个li都添加一个触发效果
for (var i = 0; i < aLi.length; i++) {
//每个li都需要一个单独的定时器，避免冲突
aLi[i].timer = null;
//设置每一个li初始的透明度为50，避免冲突
aLi[i].alpha = 50;
//绑定事件
aLi[i].onmouseenter = function() {
//调用自定义函数，并传参(需要达到的透明度为100)
squartLi(this, 100);
}
//绑定事件
aLi[i].onmouseleave = function() {
//调用同一个自定义函数，传参(离开时透明度为50)
squartLi(this, 50);
}
} //自定义函数，自定义参数obj和onAlpha
function squartLi(obj, onAlpha) {
//一个li同一时间只需要一个定时器，所以事件触发时，要清除已经触发的定时器
clearInterval(obj.timer);
//定时器
obj.timer = setInterval(function() {
//鼠标进入obj.alpha为50，onAlpha为100，所以+10
if (obj.alpha < onAlpha) {
obj.alpha += 10;
} else {
//离开时，obj.alpha为100，onAlpha为50，所以-10
obj.alpha -= 10;
}
if (obj.alpha == onAlpha) {
//当为50或者100则达到要求，清除定时器
clearInterval(obj.timer);
} else {
//老版本ie
obj.style.filter = 'alpha(opacity: ' + obj.alpha + ');'
//其他浏览器
obj.style.opacity = obj.alpha / 100;
} }, 30);
} }
</script>
javascript动画效果之多物体透明度的更多相关文章
- javascript动画效果之多物体缓冲运动
这个是通过一个for循环控制的三个li标签,被鼠标触发则会有一个宽度增加和减少的事件 html和css同样写在一起方便察看,这里就是简单的布局,重点在js <!DOCTYPE html> ...
- javascript动画效果之透明度(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- Javascript动画效果（三）
Javascript动画效果(三) 前面我们已经介绍了速度动画.透明度动画.多物体运动和任意值变化,并且我们在Javascript动画效果(二)中介绍到我们封装了一个简单的插件雏形,接下来我们对前面的 ...
- Javascript动画效果（一）
Javascript动画效果(一) 前面我们介绍了Javascript的回到顶部效果,今天呢,我们对Javascript动画做进一步的研究.在这篇博文中我们只介绍简单的匀速运动.简单的缓冲运动和简单的 ...
- Javascript动画效果（二）
Javascript动画效果(二) 在前面的博客中讲了简单的Javascript动画效果,这篇文章主要介绍我在改变之前代码时发现的一些问题及解决方法. 在前面的多物体宽度变化的例子中,我们给其增加代码 ...
- Javascript动画效果（四）
Javascript动画效果(四) 前面我们自己写了一个小小的关于js动画的插件,下面我们来使用之前的框架来完成我们想要的动画效果.我们经常在淘宝网中看到,鼠标经过某一图片时,该图片有从上滚出而又从下 ...
- javascript动画效果之缓冲动画(修改版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- javascript动画效果之匀速运动(修订版)
在编写多块同时触发运动的时候,发现一个BUG, timer = setInterval(show, 30);本来show是一个自定义函数,当设为timer = setInterval(show(one ...
- 【BOOM】一款有趣的Javascript动画效果
实践出真知,有的时候看到一些有趣的现象就想着用自己所学的知识复现一下. boomJS 缘起 前几天在 github 上看到同事的一个这样的小项目,在 IOS 上实现了这样一个小动画效果,看上去蛮 ...
随机推荐
- PHP检测文件能否下载
用php代码检测一个文件是否可以下载,网上没有找到合适的代码,自己实现了一个还挺好用的,分享给有需要的朋友. 基本原理:使用http的HEAD方法,检测报文的头里httpcode是否为200. pub ...
- 一个简单的例子说明windows环境变量配置
关于win下环境变量的问题 配置环境变量其实就像是创建一个快捷键一样,我们把安装程序的路径告诉系统环境变量,这样下次我们在命令行中就可以直接使用一个简单的命令来调用我们安装的程序,因为此时计算机已经知 ...
- 基于 Consul 的 Docker Swarm 服务发现
Docker 是一种新型的虚拟化技术,它的目标在于实现轻量级操作系统的虚拟化.相比传统的虚拟化方案,Docker 虚拟化技术有一些很明显的优势:启动容器的速度明显快于传统虚拟化技术,同时创建一台虚拟机 ...
- Redis 使用 Eval 多个键值自增操作示例
在PHP上使用Redis 给多个键值进行自增,示例如下: $set['money'] = $this->redis->hIncrByFloat($key, $hour .'_money', ...
- 【Python】回文
首先判断一个字符串是否回文: def isPlalind(s): if len(s) == 1: return True else: return s[0] == s[-1] and isPlalin ...
- 一个简单sql注入的poc
最近在提高自己编程能力,拿一些实用的小工具练下.该脚本为python语言,主要涉及模块urllib,re. 功能:验证CmsEasy5.5爆账号密码 实验用源码:http://pan.baidu.co ...
- Java Socket编程基础(1)
参考资料: <Java网络编程精解> 孙卫琴 一.socket通信简介 什么是socket,简单来说,在linux系统上,进程与进程之间的通信称为IPC,在同一台计算机中,进程与进程之间通 ...
- 通过反射获取所有的Action 一般用于权限管理
public IList<ActionPermission> GetAllActionByAssembly() { var result = new List<ActionPermi ...
- javaweb之session过期验证
session过期判断的基本思想:用户登录成功后,将用户账号信息保存在session中,然后几乎每次执行命令都要经过过滤器,过滤器检查session中是否存在账号,若不存在, 则返回登录页面,反之正常 ...
- SQLServer性能优化
http://www.cnblogs.com/studyzy/archive/2008/11/24/1339772.html