js匀速透明运动

最新推荐文章于 2019-11-03 19:34:49 发布
最新推荐文章于 2019-11-03 19:34:49 发布
阅读量96 收藏
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44963099/article/details/90112553
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
                margin: 0;
            }
            #box{
                height: 100px;
                width: 100px;
                background: red;
                position: absolute;
                top: 200px;
                left: 200px;
                opacity: 0.3;
            }
		</style>
	</head>
	<body>
		<div id="box" onmouseover="startMove(1)" onmouseout="startMove(0)">		
		</div>
	</body>
</html>
<script type="text/javascript">
	let box = document.getElementById("box");
	let time = null;
	function startMove(targat){
		clearInterval(time);
		time=setInterval(function(){
			function getStyle(obj, attr) { //获取非行间样式，obj是对象，attr是值
				//该条件含义为,判断该浏览器是否拥有该函数
				if (obj.currentStyle) { //针对ie获取非行间样式
					return obj.currentStyle[attr];
				} else {
					return getComputedStyle(obj, false)[attr]; //针对非ie
				}
			}
			let speed = targat>getStyle(box,"opacity")?0.05:-0.05;
			box.style.opacity = Number(getStyle(box,"opacity"))+speed;
		},50)
	}	
</script>
素描本里的男子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生javascript实现匀速运动动画效果
10-22
主要为大家详细介绍了原生javascript实现匀速运动动画效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js--匀速透明运动
mcyhero的博客
06-03 154
*{ margin: 0;} #box{ height: 100px;width: 100px;background: red; position: absolute; top: 200px; left: 200px; opacity: 0.3;} <div id="box" onmouseover="boxmove(1)" onmouseout="boxmove(0)"> &l...
JS多物体透明度运动
chenmike1的博客
08-14 284
多物体不能有公用属性window.onload=function(){ var aDiv=document.getElementsByTagName('div'); for(var i=0;i&lt;aDiv.length;i++){ aDiv[i].alpha=30; aDiv[i].onmouseover=function(){ startMove(this,100); }; aD...
JS图片透明度的运动处理
哈哈哈
02-11 448
JS图片透明度的运动处理 原生JS实现图片的透明度运动 在之前的JS运动中，我们介绍的是div的运动，如果我们想操作图片的透明度的问题。让其随鼠标移入移出呈现不同的透明度，在应用上就是常见的淡入淡出效果，应该怎么操作呢？ 在编写这些代码之初，我们应该有以下了解以下几点： 1、图片的透明度opacity有兼容性问题。在不同的浏览器下的写法不同 2、既然opacity有兼容性问...
JS - 匀速运动框架
小白的向往
01-16 239
//匀速运动框架 （对象，{ 属性：值 }，速度，回调函数） function startMove(obj,json,num,fnEnd){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var onoff = true;
[js高手之路]打造通用的匀速运动框架
nqxcwl的专栏
11-03 108
本文，是接着上文[js高手之路]匀速运动与实例实战(侧边栏,淡入淡出)继续的，在这篇文章的最后，我们做了2个小实例：侧边栏与改变透明度的淡入淡出效果，本文我们把上文的animate函数，继续改造，让他...
js实现匀速运动及透明度动画
weixin_30344131的博客
03-23 128
1.html代码 <body> <div id="container"> <span id="btn"></span> </div> </body> 2.css样式 *{ margin: 0; padding: 0; } #container{ ...
javascript 匀速运动实现淡入淡出
weixin_33923148的博客
08-29 89
原理 在做div或者图片淡入淡出的时候，我们主要用到了透明度样式filter: alpha(opacity:30)兼容ie，opacity:0.3兼容火狐chrome。 运动淡入淡出时用到了定时器setInterval;clearInterval; js操作淡入淡出时用下面形式修改透明度oDiv.style.filter="alpha(...
匀速运动操作透明度
qq_42498352的博客
07-11 146
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;style type="text/css"&gt; *{ margin:
JS实现匀速运动的代码实例
10-26
主要介绍了JS实现匀速运动的代码实例，有需要的朋友可以参考一下
javascript匀速运动实现方法分析
10-23
主要介绍了javascript匀速运动实现方法,结合实例形式分析了JavaScript匀速运动的具体实现步骤与相关注意事项,需要的朋友可以参考下
JS匀速运动演示示例代码
10-26
匀速运动的效果想必大家都有见到过吧，在本文为大家介绍下使用JS是如何实现的，感兴趣的朋友不要错过
浅谈Javascript如何实现匀速运动
10-25
主要介绍了浅谈Javascript如何实现匀速运动的方法及相关代码,需要的朋友可以参考下
出现Cross-Origin Read Blocking (CORB) blocked cross-origin response 报错解决方法
热门推荐
素描本里的男子的博客
05-26 13万+
1.错误分析 这里我调用的是qq音乐的一个接口 所有的的参数 都和qq音乐那边的保持一致。 当我 console.log所抓取数据时，查看控制台时发现了以下错误 其实禁止跨域请求是浏览器本身的一种安全策略。 2.跨域资源共享（Cross-Origin-Resource-Sharing） 跨域资源共享（CORS）机制，是为了浏览器能更为安全的处理跨域请求，使其不受同源策略的限制。简单来说就是把需...
js中输入一个数判断是奇数还是偶数，并输出结果
素描本里的男子的博客
04-24 1万+
<script type="text/javascript"> var num=(parseInt(prompt("请输入数字")));//输入数字 if(num%2==0){//判定条件余数为0时为偶数 document.write(alert("偶数")); }else{ document.write(alert("奇数")); } </script> ...
js实现添加购物车功能
素描本里的男子的博客
05-15 8544
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } table { ...
有一个棋盘，有64个方格，在第一个方格里面放1粒芝麻重量是0.00001kg， 第二个里面放2粒，第三个里面放4，棋盘上放的所有芝麻的重量
素描本里的男子的博客
04-25 7818
<script type="text/javascript"> var sum=0;//初始数目 var kg; for(var i=0; i<64; i++){ sum += Math.pow(2,i);//总数目 } kg=sum*0.00001;//总重量 document.write(kg) </script> ...
TweenMax 匀速直线运动
最新发布
06-07
以下是一个示例代码，演示如何使用TweenMax和Pixi.js来实现匀速直线运动： ```javascript // 创建Pixi精灵 var sprite = PIXI.Sprite.fromImage('path/to/image.png'); sprite.x = 0; sprite.y = 0; stage.addChild...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值