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 ...
随机推荐
- right spindle supply short to gnd-- compact version
hardware guy found that the R1004 lead to this error, but this error should not be checked, because ...
- Web开发相关笔记 #05# MySQL中文无法匹配
2018-06-02 在 Class.forName 的时候记得先尝试 import 一下. 2018-06-04 1.JDBC SELECT 查询,中文条件查不出东西,可能是字符编码问题: Stri ...
- 深入浅出TCP之半关闭与CLOSE_WAIT
转自:https://www.2cto.com/net/201309/243585.html(相关链接) 深入浅出TCP之半关闭与CLOSE_WAIT 终止一个连接要经过4次握手.这由TCP的半关闭( ...
- protocol method: #method<channel.close>(reply-code=406, reply-text=PRECONDITION_FAILED - unknown delivery tag 2, class-id=60, method-id=80)
Caused by: com.rabbitmq.client.ShutdownSignalException: channel error; reason: {#method<channel.c ...
- Linux 命令梳理
Linux 命令梳理 待梳理命令 nohup 用户管理 useradd 新建用户 sudo useradd {user name} -s /bin/bash -d /data/{user name} ...
- eclipse中的ctrl+H使用中的问题
一.问题背景 ctrl+H其实包含好几个search如果是FileSearch,在第一个输入框是要搜索的文字,第二个是文件名(支持通配符:*.js或者*.*),下面是选择搜索的范围,然后点seach. ...
- bzoj 4044 Virus synthesis - 回文自动机 - 动态规划
题目传送门 需要高级权限的传送门 题目大意 要求用两种操作拼出一个长度为$n$的只包含'A','T','G','C'的字符串 在当前字符串头或字符串结尾添加一个字符 将当前字符串复制,将复制的串翻转, ...
- 定制FileField中的上传文件名称
FileField中的upload_to属性可以设定上传文件的存储目录和名称,它可以是个字符串,也可以是个callable,比如一个方法. 当upload_to的值设为一个方法时,就可以对上传文件的名 ...
- topcoder srm 693 div1 -3
1.给出一个$n$个顶点的无向带权图.其中顶点$i,i+1$之间存在边,$i,i+2$之间存在边.而且仅有这些边.现在删掉其中的一些边,剩下的边满足图仍然是2联通的情况下使得权值和最小? 思路:其实就 ...
- FireMonkey 源码学习（6）
(6)GetGlyph和GetBaseline TFontGlyphManager是一个抽象类,在不同平台上的实现是不同的,以Windows为例,在FMX.FontGlyphs.Win.pas文件中定 ...