JS-运动基础——案例应用：淡入淡出效果
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>淡入淡出</title>
<style type="text/css">
.div {
width: 100px;
height: 100px;
background-color: red;
margin-top: 50px;
position: absolute;
left: 100px;
top: 0;
cursor: pointer;
opacity: 0.3;
filter: alpha(opacity:30);
}
</style>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div');
oDiv.onmouseover = function(){
start(100);
};
oDiv.onmouseout = function(){
start(30);
}
}
var alpha = 30;//关键点
var timer =null;
function start(iTarget){
var oDiv = document.getElementById('div');
clearInterval(timer);
timer = setInterval(function (){
var speed = 0;
if(alpha < iTarget){
speed = 10;
}else{
speed = -10;
};
if(alpha == iTarget){
clearInterval(timer)
}else{
alpha+=speed;//关键点——忘了这一句。
oDiv.style.filter = 'alpha(opacity:'+alpha+')';
oDiv.style.opacity = alpha/100;
}
},30);
} </script>
</head> <body>
<div class="div" id="div"></div>
</body> </html>
学习路径：智能社的开发教程：https://ke.qq.com/webcourse/index.html#course_id=152997&term_id=100174752&taid=766913655494053&vid=v14127nxshc
JS-运动基础——案例应用：淡入淡出效果的更多相关文章
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
- 淡入淡出效果的js原生实现
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透 ...
- 第八节 JS运动基础
运动基础 让Div运动起来 速度——物体运动的快慢 运动中的Bug 不会停止 速度取某些值会无法停止 到达位置后再点击还会运动 重复点击速度加快 匀速运动(速度不变) 运动框架及应用: 运动框架: 在 ...
- 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 ...
- [转]Android UI:看看Google官方自定义带旋转动画的ImageView-----RotateImageView怎么写(附 图片淡入淡出效果)
http://blog.csdn.net/yanzi1225627/article/details/22439119 众所周知,想要让ImageView旋转的话,可以用setRotation()让其围 ...
- 实现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 ...
随机推荐
- MyBatis批量操作报错：Parameter 'xxxList' not found. Available parameters are [list]
问题背景: 在Dao中使用MyBatis进行查询操作,参数是传的一个List:studentNameList,但是在执行查询的时候报错,具体日志如下: com.chenzhou.base.mybati ...
- Win10如何显示系统托盘所有图标
最快就是小娜搜索通知 打开Win10“设置”,依次进入“系统 – 通知和操作”,设置界面如图: 点击“选择在任务栏上显示哪些图标”打开如图所示的界面:
- 批量改名的多种方法stu_3_finished.jpg 去掉finished,stu_{1..20}_finished.jpg
方法一:rename修改文件名 rename "finished" "" *.jpg [root@ob1 scripts]# rename "fini ...
- java-el+jstl+jsbc综合示例
项目结构: 项目展示: 数据库: /* SQLyog Ultimate v12.09 (64 bit) MySQL - 5.5.53 : Database - product ************ ...
- tftp32作为dhcp服务器
/******************************************************************* * tftp32作为dhcp服务器 * 每次使用tftp进行文 ...
- [转载] PHP开发必看 编程十大好习惯
适当抽象 但是在抽象的时候,要避免不合理的抽象,有时也可能造成过渡设计,现在只需要一种螺丝刀,但你却把更多类型的螺丝刀都做出来了(而且还是瑞士军刀的样子..): 一致性 团队开发中,可能每个人的编程风 ...
- IoC就是IoC，不是什么技术，与GoF一样，是一种 设计模式。
IoC就是IoC,不是什么技术,与GoF一样,是一种 设计模式. Interface Driven Design接口驱动,接口驱动有很多好处,可以提供不同灵活的子类实现,增加代码稳定和健壮性等等,但是 ...
- （转）YUV420存储格式
YUV格式有两大类:planar和packed.对于planar的YUV格式,先连续存储所有像素点的Y,紧接着存储所有像素点的U,随后是所有像素点的V.对于packed的YUV格式,每个像素点的Y,U ...
- MYSQL 两日期之间的工作日（除去周六日，不考虑节假日）
select (floor(days/7)*5+days%7 -case when 6 between wd and wd+days%7-1 then 1 else 0 end - ...
- Java调用FTP实例
package com.test; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStre ...