JS实现淡入淡出图片效果的方法分析
作者：鬼畜十三 发布时间：2023-08-24 08:45:44
标签：JS,淡入淡出,图片
本文实例讲述了JS实现淡入淡出图片效果的方法。分享给大家供大家参考，具体如下：
效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明
分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少
核心代码：
window.onload=function(){
var oDiv=document.getElementById("div1");
var timer=null;
var alpha=30;
oDiv.onmouseover=function(){
setAlpha(100);
};
oDiv.onmouseout=function(){
setAlpha(30);
};
function setAlpha(iTarget){ //iTarget目标透明度通过参数传入
clearInterval(timer); //执行计时器之前，先清除计时器，否则执行完一次再执行，上次的计时器还在，会不停抖动
timer=setInterval(function(){
var iSpeed;
if(alpha<iTarget)
{
iSpeed=10;
}
else
{
iSpeed=-10;
}
if(alpha==iTarget)
{
clearInterval(timer);
}
else
{
alpha+=iSpeed;
oDiv.style.opacity=alpha/100;
oDiv.style.filter='alpha(opacity:'+alpha+')'
}
},30);
};
};
希望本文所述对大家JavaScript程序设计有所帮助。
0
投稿猜你喜欢
- 对比起Cookie，Session 是存储在服务器端的会话，相对安全，并且不像 Cookie 那样有存储长度限制。由于 Session 是以
- 机器A: select instance_name from v$instance; select name from v$database
- 如果遇到下述错误，表示当启动mysqld时或重新加载授权表时，在用户表中发现具有非法密码的账户。发现用户'some_user'
译文原文：http://blog.benhuoer.com/2009/04/10-simple-and-impressive-design-- 为了庆祝jQuery的四周岁生日, jQuery的团队荣幸的发布了jQuery Javascript库的最新主要版本! 这个版本包含了大量的
- 在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展
- 本文实例讲述了Go语言实现的树形结构数据比较算法。分享给大家供大家参考。具体实现方法如下：// Two binary trees may b
- 导语：目前点评“2008年10佳改版网站”也许为时尚早，但2008年毕竟已经过去了9个多月，周四又同时有Twitter和FriendFeed
- 一.GO程序目录结构在GOPATH目录下的结构--bin(存放编译后生成的可执行文)|----hello.exe（可执行文件）--pkg(存
- 本文实例讲述了PHP利用func_get_args和func_num_args函数实现函数重载的方法。分享给大家供大家参考。具体方法分析如下
- IE6绝对定位的bug及其解决办法。position:absolute定位在IE6下存在left和bottom的定位错误问题：<!–I
- SQL Server中事务日志的作用：持续记录数据库所有的事务和这些事务对数据库所做的修改;一旦数据库出现灾难事件，就需要事务日志来进行近期
- 问题一个已经有内容的 textarea 元素，在执行该元素的 .focus() 方法后，不同的浏览器有不同表现。我们的预期是能够出现在内容后
- 在前后端分离是大趋势的背景下，前端获取数据都是通过调用后台的接口来获取数据微服务的应用越来越多。Django是Python进行web应用开发
- 举个例子来说，要查找出2007-10-12至2007-10-31之间在网站上注册的会员，选择好日期后，点击“查询”按钮，发现2007-10-
- 今天写了一段CSS,写时突然想到的,写出来和大家分享一下; 我们可能早已习惯了padding在不同浏览器中的不同之处,
- 神经网络一般用GPU来跑，我们的神经网络框架一般也都安装的GPU版本，本文就简单记录一下GPU使用的编写。GPU的设置不在model，而是在
- <％MaxPerPage=8 ’定义页面最大的记录数为8<br>
- asp读取access数据库表名称的代码：<％strConn="DBQ="+server.mappath(&quo
- PDOStatement::bindParamPDOStatement::bindParam — 绑定一个参数到指定的变量名(PHP 5 &
