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 ...
随机推荐
- Fabric架构：抽象的逻辑架构与实际的运行时架构
Fabric从1.X开始,在扩展性及安全性上面有了大大的提升,且新增了诸多的新特性: 多通道:支持多通道,提高隔离安全性. 可拔插的组件:支持共识组件.权限管理组件等可拔插功能. 账本数据可被存储为多 ...
- mongodb安全权限设定
mongodb安全权限设定 如何防范此类攻击? 做好访问认证.打开你的MongoDB配置文件(.conf),设置为auth=true 做好防火墙设置.建议管理者关闭27017端口的访问. Bind_i ...
- 利用vue写一个复选框的组件
HTML <multicheck :source=tlist :busValue='objInfo.tt' @getTt="getTtInfo"></multic ...
- MySql与MariaDB由来与历程
MySQL数据库 MySQL数据库是一个关系型数据库管理系统,由瑞典MySQL AB公司开发.MySQL是一种关联数据库管理系统,关联数据库将数据保存在不同的表中,而不是将所有数据放在一个大仓库内,这 ...
- MyEclipse项目的jquery.js发生[Multiple markers at this line - Missing semicolon]的解决方案
问题描述: 导入jquery库后,发现提示错误信息:Multiple markers at this line - Missing semicolon,如下截图所示: 解决方案: 选中该jquery. ...
- ES6知识整理（6）--Symbol函数
(文章会同步到博客园,技术类文章还是该让搜索引擎察觉比较好) symbol是js的第7种数据类型: 7种分别是:undefined.null.boolean(布尔).string(字符串).numbe ...
- 关于scrapy下载文件重命名的办法以及对应url没有文件后缀的办法
https://www.jianshu.com/p/d1bb28cbb6a8 scrapy中负责下载文件的是class MyFilesPipeline(FilesPipeline)类 其中负责下载文件 ...
- css盒子模型、边框border、外边距margin、填充padding、轮廓outline
盒子模型:盒子默认的宽度为容器的宽度,也可以自省设定宽度,高度根据内容适应,也可以自行设定高度.min-height设定最小高度 一个盒子包括外边距.边框.内边距和实际内容 Margin(外边距):清 ...
- oracle 11g中的自动维护任务管理
因为人员紧缺,最近又忙着去搞性能优化的事情,有时候真的是不想再搞这个事情,只是没办法,我当前的绩效几乎取决于这个项目的最终成绩,所以不管是人的事还是事的事,都得去让他顺利推进. 前段时间发生还有几台服 ...
- neutron 的 quota design
发现, cinder, nova 制实现了, CountableResource. 只有nuetron实现了 TrackedResource 和 CountableResource. I read u ...