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 ...
随机推荐
- flask请求钩子、HTTP响应、响应报文、重定向、手动返回错误码、修改MIME类型、jsonify()方法
请求钩子: 当我们需要对请求进行预处理和后处理时,就可以用Flask提供的回调函数(钩子),他们可用来注册在请求处理的不同阶段执行的处理函数.这些请求钩子使用装饰器实现,通过程序实例app调用,以 b ...
- windows环境下 curl 安装和使用
curl下载地址:https://curl.haxx.se/download.html,拉到页面最底下,选择红色选中的那个CAB的进行下载,如下图所示: 下载完成后,解压. 解决windows控制台c ...
- AtCoder Beginner Contest 084（AB）
A - New Year 题目链接:https://abc084.contest.atcoder.jp/tasks/abc084_a Time limit : 2sec / Memory limit ...
- Python Selenium 常用方法总结
selenium Python 总结一些工作中可能会经常使用到的API. 1.获取当前页面的Url 方法:current_url 实例:driver.current_url 2.获取元素坐标 ...
- Jquery部分小结
window.onload 必须等待网页中所有的内容加载完毕后(包括图片)才能执行,如果多个,只会执行最后一个;$(document).ready() 网页中所有DOM结构绘制完毕后就执行,可能DOM ...
- usb枚举
源: usb枚举
- 利用apache伪静态技术防止盗链
(在我们制作网站的过程中,可能会遇到这样的问题,就是其他的网站直接盗用了我们网站的图片或css或js,这样可能会大大增加我们自己网站的负载. 所以,我们应该考虑一下怎样防止这样的事情发生.) 下面我们 ...
- django模板继承
可以将每个html公共的部分做成一个基本模板,其他模板继承这个基本模板,则会拥有基本模板的所有内容. views.py from django.shortcuts import render def ...
- python2.7安装mysql-python
环境:python2.7.14+mysql-python-1.2.3.win-amd64-py2.7.exe 安装版本许参照解释器版本,有64和32位之分,如果安装错误版本,则运行时会报错:Impor ...
- Pycharm小技巧
Pycharm专业版2017.3及以上 Python2.7.x及以上 补全与高亮 在创建python2.7,django1.10的项目时,碰到html代码不补全也不高亮的问题,解决思路如下: # 依次 ...