JS淡入淡出

最新推荐文章于 2024-08-13 16:15:07 发布
最新推荐文章于 2024-08-13 16:15:07 发布
阅读量79 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/pjw2017/p/6297228.html
版权

跟其他物体运动略有不同，物体透明度在IE9以下版本有不兼容的情况，因此要用filter:alpha(opacity:30);这样的写法兼容，我们需要声明一个变量alpha = 30;来保存一下当前的透明度，再通过改变变量的值来修改透明度。当然用JQ的fadeIn和fadeOut也可以实现同样的效果，而且更加简便。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>淡入淡出</title>
<style>
#div1{width: 200px; height: 200px; background: blue; position: absolute; top:50px; left: 0px; filter:alpha(opacity:30); opacity: 0.3;}
</style>
<script type="text/javascript">
window.onload = function(){
    var oDiv = document.getElementById('div1');
    oDiv.onmouseover = function(){
        StartMove(100);
    }
    oDiv.onmouseout = function(){
        StartMove(30);
    }
};
var timer = null;
var alpha = 30;
function StartMove(iTarget){
    var oDiv = document.getElementById('div1');
    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 id = "div1"></div>
</body>
</html>

 

转载于:https://www.cnblogs.com/pjw2017/p/6297228.html

weixin_30266885
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js淡入淡出 显示效果
05-04
淡入淡出 显示效果，javascript淡入淡出效果，可以根据实际使用情况修改
js的淡入淡出
eggplant_的博客
10-15 2239
我们知道淡入淡的动画效果很优美，那么就让我们来看一看如何在jQuery中实现吧 首先淡入淡出分别为： fadeInt， fadeOut &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="/jquery/jquery-1.11.1.min.js"&gt;&lt;/script&gt; &lt;script&gt;
JavaScript实现淡入淡出效果
IT世纪网 - WEB开发者之家
05-25 1009
淡入淡出效果，在日常项目中经常用到，可惜原生JS没有类似的方法，而有时小的页面并不值得引入一个jQuery库，所以就自己写了一个，已封装， 有用得着的朋友， 可以直接使用。 代码中另附有一个设置元素透明度的方法， 是按IE规则(0~100)设置， 若改成标准设置方法(0。00~1。00)， 下面使用时请考虑浮点精确表达差值。 参数说明: fadeIn()与fadeOut()均有三个参数，第一个是事件， 必填; 第二个是淡入淡出速度， 正整数， 大小自己权衡， 可选参数; 第三个， 是指定淡入淡出到的透明度值
js实现淡入和淡出
Coder_PWH
05-20 3204
用js实现淡入淡出功能 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &amp
JS淡入淡出效果
02-26
JS淡入淡出效果，渐变，淡入淡出效果，javascript
JavaScript淡入淡出渐变简单实例
10-23
标题《JavaScript淡入淡出渐变简单实例》所涉及的知识点主要包括： 1. JavaScript淡入淡出效果的实现方法：这是Web前端开发中一种常见的动态效果，用于控制页面元素的显示和隐藏，增强用户交互体验。淡入效果是使...
javascript淡入淡出效果的实现思路
10-28
关于javascript淡入淡出效果的实现，核心思路可归纳为以下几点： 1. **淡入淡出效果的常规实现**：在web开发中，淡入淡出效果通常是指通过改变元素的透明度来实现其渐渐显示（淡入）或隐藏（淡出）的效果。这可以...
js淡入淡出焦点图幻灯片效果代码分享
01-19
本文实例讲述了javascript淡入淡出焦点图幻灯片效果。分享给大家供大家参考。具体如下： 这是一款基于javascript实现的淡入淡出焦点图幻灯片效果代码，可以自定义标题，实现过程很简单。 运行效果图：——————-...
js淡入淡出效果
qqxm1的博客
04-09 1791
淡入是指按照指定事件出现（显示），淡出就是按照指定时间实现隐藏。 要实现淡入需要使用方法：fadeln（时间 , 函数） 淡出需要使用方发：fadeOut（时间，函数） 第二个参数就是一个函数，当元素淡入或淡出完毕之后会自动触发函数、 <script src="js/juery.min.js"></script> <script> //淡入效果 $...
JS运动实现图片的淡入淡出原理
dfc_xiaoke的博客
09-29 1101
小编在这里为大家带来的是图片的淡入淡出原理，在做网站时我们可以为图片添加淡入淡出的特效、增加网站的视觉效果。下面是对应的原理代码 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;淡入淡出&lt;/title&gt; &lt;style typ
js实现图片淡入淡出切换简易效果
11-24
本文实例为大家分享了js图片淡入淡出切换详细代码，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{padding: 0;margin: 0;} ul{overflow: hidden;} li{list-style: none;height: 30px;border: 1px solid #000;width: 100px;float: left;line-hei
一个简单的js渐显(fadeIn)渐隐(fadeOut)类
03-18
NULL 博文链接：https://kingkit.iteye.com/blog/692191
原生JS实现淡出淡入效果
weixin_42632642的博客
11-12 2629
前言 一提到淡入淡出效果，大家可能会想到jQuery的fadeIn(),fadeOut()和fadeToggle()函数，它们被封装到库中，很方便被调用。但是有时候只为了一个简单的淡入淡出效果，并不需要去调用庞大的jQuery库，所以，下面我们用纯js代码实现淡入淡出的效果。 需求分析 要实现淡入淡出效果，就是要使用到setInterval()函数，改变element节点透明度opacity，来解决这个问题。 功能实现 fadeIn()和fadeOut()都有三个参数，分别是事件（必填），淡入淡出
多物体多样式_透明度
qq_44971069的博客
11-10 159
例：写一个定时器,每个一秒修改一次div内文本颜色和文字大小.最开始这个文字是默认大小,大小开始增大,当增大了6次以后, 文字大小开始缩小,缩小6次,文字再开始增大。 Document ...
原生js实现图片淡入淡出效果——完整代码加解析
yezi__6的博客
08-16 2216
 对于代码所有重要步骤都写在代码中了，希望对你有用哦！ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;淡入淡出&lt;/title&gt; &lt;style&gt;
js实现图片淡入淡出
sweetllh的博客
04-25 2688
效果：鼠标移入时，图片由半透明逐渐变成清晰，移出时，由清晰变为半透明分析：用变量来储存透明度，因为元素.style.alpha不能直接增加或减少代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00)<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
js图片轮播（淡入淡出）
ICY___的博客
01-21 1427
关于图片轮播，有太多的方法去实现，不同的样式，用的主要思想也不同，但不管怎么说，图片轮播离不开计时器。 关于要注意的，要解释的，我都备注好了，说的可能不是很标准，但我尽量说的通俗，欢迎留言讨论，只要我看到的，都会回复的。 &lt;!-- 核心思想：利用层级关系 计时器和css3动画来实现这个功能完善的图片轮播案例 --&gt; &lt;!-- 基本覆盖了轮播的所有功能 --&gt; ...
vue2前端阿里云oss服务端签名直传
最新发布
weixin_74285634的博客
08-13 248
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
js定时器完成淡入淡出
05-19
可以使用JavaScript的定时器和CSS的opacity属性来实现淡入淡出的效果。 首先，需要在HTML中添加一个元素，如下所示： ```html <div id="fade-in-out">Hello World</div> ``` 然后，在CSS中设置该元素的opacity属性为0，即完全透明： ```css #fade-in-out { opacity: 0; } ``` 接下来，可以使用JavaScript的定时器来控制该元素的opacity属性从0到1（淡入）或从1到0（淡出）的过渡效果。代码如下： ```javascript // 获取要淡入淡出的元素 var fadeElement = document.getElementById('fade-in-out'); // 定义变量，用于控制淡入淡出效果的速度 var fadeSpeed = 20; // 定义变量，用于存储当前元素的透明度 var currentOpacity = 0; // 定义函数，用于淡入效果 function fadeIn() { // 判断当前透明度是否小于1，如果小于1则继续增加透明度 if (currentOpacity < 1) { currentOpacity += 0.01; // 设置元素的透明度 fadeElement.style.opacity = currentOpacity; // 使用定时器，每隔fadeSpeed毫秒执行一次fadeIn函数 setTimeout(fadeIn, fadeSpeed); } } // 定义函数，用于淡出效果 function fadeOut() { // 判断当前透明度是否大于0，如果大于0则继续减少透明度 if (currentOpacity > 0) { currentOpacity -= 0.01; // 设置元素的透明度 fadeElement.style.opacity = currentOpacity; // 使用定时器，每隔fadeSpeed毫秒执行一次fadeOut函数 setTimeout(fadeOut, fadeSpeed); } } // 调用淡入函数 fadeIn(); // 使用定时器，延时1000毫秒后调用淡出函数 setTimeout(fadeOut, 1000); ``` 以上代码会让元素在页面加载后淡入，然后再延迟1秒后淡出。可以根据实际需求调整淡入淡出的速度和延时时间。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值