js多物体运动之淡入淡出效果
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
div{width:200px;height: 200px;margin: 20px;float: left;
background-color: red;filter:alpha(opacity:30);opacity: 0.3;} </style>
<body>
<div></div>
<div></div>
<div></div>
<div></div> </body>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementsByTagName('div');
for(var i=0;i<oDiv.length;i++){
oDiv[i].alpha=30;
oDiv[i].onmouseover=function(){ startMove(this,100);
};
oDiv[i].onmouseout=function(){
startMove(this,30);
};
} }; function startMove(obj,iTarget){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var speed=(iTarget-obj.alpha)/6;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(obj.alpha==iTarget){
clearInterval(obj.timer);
}else{
obj.alpha+=speed;
obj.style.filter='alpha(opacity:'+obj.alpha+')';
obj.style.opacity=obj.alpha/100;
}
},30);
} </script>
</html>
js多物体运动之淡入淡出效果的更多相关文章
- js笔记----（运动）淡入淡出
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
- 淡入淡出效果的js原生实现
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法
function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...
- 基于jquery实现的文字淡入淡出效果
这篇文章介绍了jquery实现的文字淡入淡出效果实例,有需要的朋友可以参考一下 复制代码代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- 实现Bootstrap Carousel Fade Transition 淡入淡出效果
html代码: <div id="carousel" class="carousel slide carousel-fade" data-ride=&qu ...
- 【jQuery】使用JQ来编写面板的淡入淡出效果
本文与上一篇的<[jQuery]使用JQ来编写最主要的淡入淡出效果>(点击打开链接)为姊妹篇. 但上一篇仅仅是对文本的基本控制,本篇则是对面板元素进行控制. 尽管功能上很类似,可是所用到的 ...
- 前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
随机推荐
- Linux基础命令---文本编辑tee
tee 将标准输入的内容复制到指定的文件中,同时在标准输出中显示. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.SUSE.openSUSE.Fedora. 1.语法 ...
- 关于springMVC 传递 对象参数的问题
1.前端请求必须是 post 2.前端数据data必须做 json字符串处理 JSON.stringify(data) 3. contentType: 'application/json', 4.@ ...
- 知乎上一个比较好的学习QT的公众号<<跟小豆君学Qt>>
公众号网址:https://zhuanlan.zhihu.com/p/28472916
- rsync 同步文件如何指定属主属组和权限
rsync daemon 同步数据时,若想同时指定权限和属主属组,可以做如下配置: [test1] uid = admin gid = admin incoming chmod = Dug=rwx,D ...
- 您的windows许可证即将过期 win10的解决办法
出现这个错误是因为安装的版本不是正版系统,每隔一段时间需要激活 这次激活也费了一些时间,记录如下希望能对大家有所帮助 (1)首先可以查看自己的许可什么什么时候会过期 windows+R调出命令运行窗口 ...
- P2221 [HAOI2012]高速公路（线段树）
P2221 [HAOI2012]高速公路 显然答案为 $\dfrac{\sum_{i=l}^r\sum_{j=l}^{r}dis[i][j]}{C_{r-l+1}^2}$ 下面倒是挺好算,组合数瞎搞 ...
- bzoj4516 / P4070 [SDOI2016]生成魔咒
P4070 [SDOI2016]生成魔咒 后缀自动机 每插入一个字符,对答案的贡献为$len[last]-len[fa[last]]$ 插入字符范围过大,所以使用$map$存储. (去掉第35行就是裸 ...
- tar 压缩指令基本用法
压缩:tar -cjvf aaa.tar.bz2 www.test.com/ --exclude *.log(-j是用bz2压缩,-exclude是排除.log后缀的文件) c-创建 j-bzip ...
- 【MonkeyRunner环境搭建】
一.配置MonkeyRunner环境变量 1.首先下载一个AndroidSDK,在SDK的目录中的tools文件夹中,直接带有MonkeyRunner 2.打开MonkeyRunner的方式: |-- ...
- Catogory如何添加属性
一,Category结构体 typedef struct category_t { const char *name; //类的名字 classref_t cls; //类 struct method ...