（38）JS运动之淡入淡出

最新推荐文章于 2022-02-21 20:24:31 发布
最新推荐文章于 2022-02-21 20:24:31 发布
阅读量1.9k 收藏
点赞数 2
分类专栏： JavaScript案例解析
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xuan6251237011/article/details/38037579
版权
这篇博客介绍了如何使用JavaScript实现图片的淡入淡出效果，主要通过CSS的filter属性来实现，同时针对IE和其他现代浏览器进行了差异化处理，利用定时器控制动画的执行。
摘要由CSDN通过智能技术生成

基本思路：使用样式filter，但是要区分IE浏览器和chrom、firefox的不同，具体也是用定时器来实现。

<!DOCTYPE HTML>
<!--
	
-->
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#div1{
	width:200px;
	height:200px;
	background:red;
	filter:alpha(opacity:30);opacity:0.3;
}


</style>
 

<script>
window.οnlοad=function ()
{
	var oDiv=document.getElementById('div1');
	oDiv.οnmοuseοver=function ()
	{
		startMove(100);
	};
	oDiv.οnmοuseοut=function ()
	{
		startMove(30);
	};

};
var alpha=30;//透明度变量，因为样式那里初始是30
var timer=null;
function startMove(iTarget){
	var oDiv=document.getElementById('div1');	
	
	clearInterval(timer);
	timer=setInterval
了解本专栏 订阅专栏 解锁全文 超级会员免费看
无人与我共黄昏
关注
专栏目录
订阅专栏
（23）使用DOM插入新元素，每次插入的新节点放在最前面
虚心求学_一点一滴
07-18 8337
<!-- DOM创建元素，①创建li，②再插入相应的父级中去， -->  window.onload=function () { var oBtn=document.getElementById('btn1'); var oU1=document.getElementById('ul1'); var oTxt=document.getElementById('txt1'
（4）鼠标移动某个区域时候显示内容，移出某个区域的时候隐藏某个内容
虚心求学_一点一滴
05-24 6952
<!-- 1、当鼠标移入input的时候，让div1显示，当鼠标移除input的时候，让div1隐藏 2、事件：简单说是代表用户的操作 3、让div1显示出来其实就是将div1的display设为block --> #div1{ width:200px; height:100px; background:#ccc; boder:1px solid; di
JS实现物体淡入淡出效果
wang_swa99er的博客
02-21 1302
JS实现物体淡入淡出效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <sty
运动——淡入淡出
bangxionger9224的博客
03-11 126
一、一个DIV设置淡入淡出 代码： <!DOCTYPE HTML><html><head> <meta charset="utf-8"> <title>运动--淡入淡出</title> <!-- <link href="test_css.css" rel="stylesheet" t...
javascript 匀速运动实现淡入淡出
weixin_33923148的博客
08-29 106
原理 在做div或者图片淡入淡出的时候，我们主要用到了透明度样式filter: alpha(opacity:30)兼容ie，opacity:0.3兼容火狐chrome。 运动淡入淡出时用到了定时器setInterval;clearInterval; js操作淡入淡出时用下面形式修改透明度oDiv.style.filter="alpha(...
JS运动之多物体运动淡入淡出
weixin_41586886的博客
07-15 229
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;JS运动之多物体运动淡入淡出:要点：当涉及多物体的运动时，最好不要有公共使用的变量，避免造成混乱&lt;/title&amp
JavaScript 运动之淡入淡出
u014661569的专栏
05-22 329
HTML 代码       fadeSport.html                     #div1 {width:300px;height:300px;background:green;margin:auto;margin-top:50px;filter:alpha(opacity:30);opacity:0.3;}            
JS实现淡入淡出图片效果的方法分析
10-20
JS实现淡入淡出图片效果的方法涉及了JavaScript脚本编程技术，主要用于在网页中创建动态视觉效果。通过模拟透明度的变化，可以实现图片的渐显和渐隐效果，这种效果在提升用户体验和界面交互方面非常有用。以下详细...
十九、JS淡入淡出效果
weixin_40976555的博客
05-23 1304
一、思路1.利用zIndex属性调整层级，同时搭配opacity透明度属性，利用定时器以及过度属性实现淡入淡出；2.箭头切换以及索引圈均使用与前2个案例类似的办法实现； 二、步骤1.构建基本结构样式2.添加淡入淡出事件，封装为一个方法，定时器调用，由于已经有了前2个案例的基础，这里直接考虑到鼠标点击箭头切换时的传参问题；默认right，从前向后淡，left从后向前淡；利用zIndex让图片循环成为...
js运动框架_包括图片的淡入淡出效果
10-27
该文档展示了一个基于JavaScript实现的简单动画框架，特别包括了图片淡入淡出的效果。淡入淡出是一种常见的视觉过渡效果，用于在不改变图片本身的情况下，控制其透明度的变化，从而实现渐显渐隐的视觉效果。此外，该...
JS运动之实现图片的淡入淡出
weixin_41586886的博客
06-13 289
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;图片淡入淡出&lt;/title&gt; &lt;style&gt; #div1{
基于匀速运动的实例讲解(侧边栏,淡入淡出)
08-29
然后，文章讲解了如何使用JavaScript来控制div元素的运动，包括如何获取div元素的位置、如何设置div元素的运动速度和方向，以及如何使用定时器来实现div元素的连续运动。 在文章中，我们可以看到作者详细地解释了...
（20）JS实现简单的图片向左无缝滚动
虚心求学_一点一滴
05-31 6832
思路： *{margin:0;padding:0;} #div1{width: 712px;height: 108px;margin:100px auto;position: relative;background: red;overflow: hidden;} #div1 ul{position: absolute;left: 0;top: 0;} #div1 ul li{floa
（7）通过js改变文本框中的文字
虚心求学_一点一滴
05-25 3995
思路： 可以在一个文本框的旁边放置一个按钮，然后点击这个按钮的时候，
（28）表格隔行变色，并且鼠标移入高亮显示，鼠标移出显示原来的颜色
虚心求学_一点一滴
07-19 3558
基本思想：采用表格中某一行的
（16）JS实现简单的选项卡
虚心求学_一点一滴
05-26 3068
思路：
（10）JS之按下不同的按钮显示不同的颜色
虚心求学_一点一滴
05-25 2781
<!-- --> #div1{ width:200px; height:200px; background:red; } function setColor(color){ var oDiv=document.getElementById('div1'); oDiv.style.background=color; } /* function to
（8）导航栏中“更多”按钮的显示与隐藏简单演示
虚心求学_一点一滴
05-25 2463
思路： 在网中中一级导航栏中有“更多”的按钮，当按下的时候会显示出更多的内容出来，但在显示的时候如果再按则会隐藏。 主要使用display属性的none和block   当用户点击的时候div显示的话就隐藏掉，否则就显示出来 主要用到if-else判断 代码如下
（12）将事件写在<script>中
虚心求学_一点一滴
05-25 2232
一般我们写事件的时候都是在某个按钮或者
（41）JS运动之右侧中间悬浮框（对联悬浮框）
虚心求学_一点一滴
07-23 2029
<!-- --> #div1{ width:100px; height:150px; background:red; position:absolute; right:0; bottom:0; }  window.onscroll=function (){ var oDiv=document.getElementById('div1'); var s
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值