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 ...
随机推荐
- Linux kernel 生成 /dev/spidev*
最近在调试一个 spi 转 4 路uart 的设备 先从spi 底层开始做起 kernel make menuconfig Device Drivers ---> [*] SPI support ...
- win8.1 64位安装oracle10g客户端心得
方法同win7 64位安装方法(http://www.cnblogs.com/winkey4986/p/3683568.html)下载Oracle 10g的客户端程序,文件名是 10201_clien ...
- centsos各个版本的区别
CentOS-7.0-1406-x86_64-DVD.iso 标准安装版,一般下载这个就可以了CentOS-7.0-1406-x86_64-NetInstall.iso ...
- 数组累加兼eval性能测试
<label> <input type="checkbox" />测试结果 </label> <script> document.g ...
- double类型保留2位小数
double d = 12.2289; java.text.DecimalFormat df = new java.text.DecimalFormat("#.00"); Syst ...
- Vector & ArrayList Hashtable & HashMap ArrayList & LinkedList
1. Vector & ArrayList 1) Vector的方法都是同步的(Synchronized),是线程安全的(thread-safe),而ArrayList的方法不是,由于线程的 ...
- thinkphp 连接mssql 当local失效时
<?php return array( //'配置项'=>'配置值' //'USERNAME'=>'admin', //赋值 //数据库配置信息 'DB_TYPE' => 'm ...
- wcf实体和ef实体冲突。。。
指定的架构无效.错误: CLR 类型到 EDM 类型的映射不明确,因为多个 CLR 类型与 EDM 类型“agentinfo”匹配.以前找到的是 CLR 类型“chanchengFlow.Models ...
- 新兵训练营课程——环境与工具Java[转]
原文地址:http://weibo.com/p/1001643874239169320051 程序员在开发过程中会用到很多工具来提升开发和协作效率,这次介绍的是目前微博平台在开发过程中用到的一些工具, ...
- linux上nginx上配置虚拟主机的相关配置
1.配置主配置: nginx/conf/nginx.conf 2.虚拟主机配置:nginx/conf/extra/learn.weixin.com.conf 配置完后,重启服务器!