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 ...
随机推荐
- arcgis直连oracle
参数:service :sde:oracle10g(客户端的数据库版本)username:sdepassword:sde@s19(配置的网络连接名) 黄色背景为需要根据实际情况更改的参数内容.如更改为 ...
- bzoj 1132 POI2008 Tro
大水题=_=,可我想复杂了…… 很裸的暴力,就是加了个小优化…… 叉积求面积 :abs(xi*yj - yi*xj) 所以去掉绝对值,把 xi 和 xj 提出来就可以求和了 去绝对值加个极角排序,每次 ...
- C#函数运行超时则终止执行(任意参数类型及参数个数通用版)
/// <summary> /// 控制函数执行时间,超时返回null不继续执行 /// 调用方法 /// FuncTimeout.EventNeedRun action = delega ...
- WPF之UseLayoutRounding和SnapsToDevicePixels
最近在工作中看别的朋友XML代码时,发现SnapsToDevicePixels 属性然后通过查询资料了解其作用 1)UserLayoutRounding为False,导致控件布局相对屏幕若不是整数则不 ...
- 拥抱ARM妹纸第二季 之 第二次 约会需要浪漫，这么大灯泡怎么弄？
终于轮到俺的小穆出场啦.有请能让太阳也为之暗淡的小穆闪亮登场-,鼓掌吧,欢呼吧!-- ♪♪ We can burn brighter Than the sun ~~~ ♪♪ “谢谢---“ 唱的太棒啦 ...
- 数据分析≠Hadoop+NoSQL，不妨先看完善现有技术的10条捷径(分享)
Hadoop让大数据分析走向了大众化,然而它的部署仍需耗费大量的人力和物力.在直奔Hadoop之前,是否已经将现有技术推向极限?这里总结了对Hadoop投资前可以尝试的10个替代方案, ...
- 关于使用视图进行分页时出现当前记录集不支持书签的错误解决方法及原因（asp）
一般在使用视图进行查询时,视图中意般都关联了两个或者更多个表,一般在这种情况下才会使用视图,但是但我在使用视图来查询数据时没有问题,但是一旦在分页中使用到视图进行查询就会出现错误提示如下: ADODB ...
- 使用WinSetupFromUSB来U盘安装WINDOWS2003
今天用UltraISO制作WINDOWS2003的U盘的安装启动,在安装系统的时候发现错误提示“INF file txtsetup.sif is corrupt or missing .status ...
- owin 中间件 katana 如何解密cookie
.NET MVC5 默认的用户登录组件是AspNet.Identity ,支持owin,并且微软自己实现的一套owin 中间件叫 katana 补充一下 katana项目源码地址:https://ka ...
- [转]如何利用ndk-stack工具查看so库的调用堆栈【代码示例】？
如何利用ndk-stack工具查看so库的调用堆栈[代码示例]? http://hi.baidu.com/subo4110/item/d00395b3bf63e4432bebe36d Step1:An ...