javascript背景淡入淡出
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#div1
{
width: 200px;
height: 200px;
background-color: green;
filter: alpha(opacity=20);
opacity: 0.2;
}
</style>
<script type="text/javascript">
var alpha = 30;
var timer = null;
window.onload = function () {
var oDiv = document.getElementById("div1");
oDiv.onmouseover = function () {
Move(100);
}
oDiv.onmouseout = function () {
Move(30);
}
}
function Move(iTarget) {
var speed = 0;
clearInterval(timer); var oDiv = document.getElementById("div1"); timer = setInterval(function () {
if (alpha < iTarget) {
speed = -3;
} else if (alpha == iTarget) {
speed = 3;
}
//开始变色
if (alpha == iTarget) {
clearInterval(timer);
} else {
alpha += speed;
oDiv.style.filter = 'alpha(opacity=' + alpha + ')';
oDiv.style.opacity = alpha / 100;
} }, 30); }
</script>
</head>
<body>
<div id="div1">
</div>
</body>
</html>
javascript背景淡入淡出的更多相关文章
- javascript 图片淡入淡出效果 实例源代码
代码说明:把代码粘贴好之后,需要更改html代码中的图片路径,即可执行成功.后面还有对js代码的详细说明,希望大家好好消化,好好理解. html源代码: <head> <title& ...
- JavaScript实现淡入淡出
<!DOCTYPE html> <html> <head> <title>css动画</title> </head> <b ...
- javascript写淡入淡出效果的轮播图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- JQ淡入淡出效果
<script type="text/javascript"> //页面淡入淡出 $(document).ready(function() { $('body').hi ...
- 背景大图隔几秒切换（非轮播，淡入淡出）--变形金刚joy007 项目总结
工作日想了好久,周日回家才想出来的... 图片切换(非轮播,淡入淡出) 1.切换2.停止 <html> <head> <meta content="text/h ...
- javascript 单个图片的淡入淡出效果和多张图片的淡入淡出效果
最近刚好在看之前妙趣网站的javascript 初级运动教程,教程里说设置图片的透明度使用了一个变量.这种方法确实不错,但是燕姐喜欢麻烦.就用自己的理解方法写了一遍.其中也是各种坑.现在先把一个图片的 ...
- javascript淡入淡出效果的实现思路
这个思路是最近写XScroll.js类的时候想明白的.平常我们说的淡入淡出效果,一般分成两部分,一半是淡入,另一半就是淡出了.不过经过分析,我觉得其实只需要一半就行了如题,只有思路,没有代码. 这个思 ...
- javascript多物体运动案例：多物体淡入淡出
javascript多物体运动案例:多物体淡入淡出 任务描述: 补充代码,当鼠标移入红色区域时,该区域透明度逐渐增加至不透明;当鼠标移出该红色区域时,该区域透明度逐渐恢复至初始程度. 效果图: < ...
- 练习：javascript淡入淡出半透明效果
划过无透明 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
随机推荐
- NOIP 2015普及组复赛Day1 T1 == Codevs4510 神奇的幻方
时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description: 幻方是一种很神奇的N∗N矩阵:它由数字 1,2,3, … … ,N∗N构成, ...
- 生成HTMLTestRunner测试报告的操作步骤——Python+selenium自动化
HTMLTestRunner是Python标准库的unittest模块的一个扩展,具体操作如下 1.安装 环境:Window8 步骤:1)http://tungwaiyip.info/software ...
- C# 玩家昵称屏蔽敏感字眼
功能:使用正则 对玩家昵称处理,如果含有 屏蔽字库里的敏感字眼进行屏蔽.已封装成dll 1.屏蔽字库处理成所需要的正则格式:(所需正则表达式格式:".*((XX)|(XX)|(XX)|.. ...
- PHP版本中的VC6,VC9,VC11,TS,NTS区别
以windows为例,看看下载到得php zip的文件名 php-5.4.4-nts-Win32-VC9-x86.zip VC6:legacy Visual Studio 6 compiler,是使用 ...
- RichTextBox 自动滚动到最后
RichTextBox.AppendText($"[{DateTime.Now.ToString("hh:mm:ss")}] {msg}\n"); RichTe ...
- 婚庆手机APP
这是一个信息化的时代,即将步入婚姻殿堂的新人们,你们是否希望有这样一款手机软件能伴随你从结婚到婚后一路的历程呢?比如说请帖通过手机客户端来将结婚的时间地点流程共享给您的亲朋好友,将您的婚纱照.随拍.写 ...
- R简易入门（一）
本文内容来源:https://www.dataquest.io/mission/126/introduction-to-r 本文数据来源:https://www.whitehouse.gov/21st ...
- poj 3237 Tree 树链剖分+线段树
Description You are given a tree with N nodes. The tree’s nodes are numbered 1 through N and its edg ...
- SQLserver中的xp_cmdshell
shell是用户与操作系统对话的一个接口,通过shell告诉操作系统让系统执行我们的指令 xp_cmdshell在sqlserver中默认是关闭的存在安全隐患. --打开xp_cmdshell ;;R ...
- IBM MQ Reason 2538(MQRC_HOST_NOT_AVAILABLE) 错误原因一例
环境: .NET 4.0, MQ .NET客户端 IBM.XMS(v2.0.0.3) 测试代码如下: var factoryFactory = XMSFactoryFactory.GetInstanc ...