＜jQuery-常用方法show$hide自定义实现与jQ实现＞

好先生·

于 2020-12-08 23:45:17 发布

阅读量198

点赞数

分类专栏： jQuery基础 JavaScipt基础文章标签： javascript

本文链接：https://blog.csdn.net/weixin_45540964/article/details/110913333

版权

JavaScipt基础同时被 2 个专栏收录

37 篇文章 0 订阅

订阅专栏

jQuery基础

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style type="text/css">
		div.box {
			width: 400px;
			height: 300px;
			background: green;
		}
	</style>
</head>
<body>
	<button>显示</button>
	<button>隐藏</button>
	<button>切换</button>
	<div class="box" id="dv1">123</div>

	<script src="./jquery-1.12.3/jquery-1.12.3.min.js"></script>
	<script type="text/javascript">
	//jQery实现
		//获取元素
		var btns=$('button');
		var box=$('.box');
		//通过索引值获取指定div jQ对象
		console.log(btns.eq(0));
		//绑定单个对象
		//显示
		btns.eq(0).click(function(){
			//show(t)方法m
			//参数表示变化的时间 单位ms
			box.show(1000);
		});
		//隐藏
		btns.eq(1).click(function(){
			box.hide(1000);
		});
		//切换显隐
		btns.eq(2).click(function(){
			box.toggle(1000);
		});
	</script>
	
	<p>原生js实现</p>
<!--
	<script type="text/javascript">
		
		var dv = document.getElementById('dv1');
		var btns = document.getElementsByTagName('button');
		var wid1=getComputedStyle(dv)['width'];
		var het1=getComputedStyle(dv)['height'];
		var flag=1;
		//实现显示
		btns[0].onclick=function() {
			// dv.className="";
			//实现动画效果
			if(flag) {
				return;
			}
			var opacity=0;
			var num=parseInt(1000/25);
			var wid=0;
			var het=0;
			var a=parseInt(wid1)/num;
			var b=parseInt(het1)/num;
			var c=1/num;
			console.log(wid);
			var timerbar = setInterval(function() {
				wid+=a;
				het+=b;
				opacity+=c;
				dv.style.width=wid+'px';
				dv.style.height=het+'px';
				dv.style.opacity=opacity;
				console.log(dv.style.width);
				if (!--num) {
					//停止循环
					clearInterval(timerbar);
				}
			}, 25);
			flag=1;
		}
		//实现隐藏
		btns[1].onclick=function() {
			// dv.className="box";
			//定义定时器,1s执行完
			//宽度从400->0,25ms执行一次,执行40次
				//!wid=dv.style.width只能获取行内样式
			//透明度
			if(!flag) {
				return;
			}
			var opacity=1;
			var num=1000/25;
			var wid=parseInt(wid1);
			var het=parseInt(het1);
			var a=wid/num;
			var b=het/num;
			var c=opacity/num;
			console.log(wid);
			var timerbar = setInterval(function() {
				wid-=a;
				het-=b;
				opacity-=c;
				dv.style.width=wid+'px';
				dv.style.height=het+'px';
				dv.style.opacity=opacity;
				console.log(dv.style.width);
				if (!--num) {
					//停止循环
					clearInterval(timerbar);
				}
			}, 25);
			flag=0;
		}
	</script>
-->
</body>
</html>

好先生·

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
＜jQuery-常用方法show$hide自定义实现与jQ实现＞

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style type="text/css"> div.box { width:
复制链接

扫一扫