前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >移动端(video) transformOringe addEventListener

移动端(video) transformOringe addEventListener

作者头像
贵哥的编程之路
发布于 2020-10-28 02:29:27
发布于 2020-10-28 02:29:27
57600
代码可运行
举报
运行总次数:0
代码可运行
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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">
		*{margin: 0;padding: 0;list-style: none;}
div{width: 200px;height: 200px;background: black;position: absolute;left: 50%;top: 50%;margin: -100px 0 0 -100px;
	transition:.3s;
	-transform-origin:right top;
	transform-origin:left center;
}


	</style>
</head>
<body>
	<div id="div1"></div>
	<script type="text/javascript">
		var reg=0;
		setInterval(function()
			{
				reg++;
				div1.style.transform="perspective(50px) rotateY("+reg+"deg)";

			},0);
	</script>
</body>
</html>
代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<!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">
		*{margin: 0;padding: 0;list-style: none;}
div{
	width: 100px;height: 100px;background: black;
}
	</style>
</head>
<body>
	<div id='div1'></div>
	<script type="text/javascript">
		/*addEventListener("load",function()
			{
				alert(1);
			},false);
		addEventListener("load",function()
			{
				alert(2);
			},false);
*/
			/*function show()
			{
				alert(1);
				div1.removeEventListener("click",show);
			}
			div1.addEventListener("click",show,false);
			*/
		
	</script>
</body>
</html>
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020/10/01 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
移动端初级知识点解析:translateZ translateY rotateY(上上上)
核心;transition: 5s;放在div里面就会怎么过来怎么回来。放再:hover就会怎么过去,一瞬间回来。
贵哥的编程之路
2020/10/28
3920
touch实现js拖拽
注意点,在html上设置font-size是rem的前提.计算方式.3010=300 3010=300
贵哥的编程之路
2020/10/30
5.6K0
touch实现js拖拽
响应式布局(媒体查询)
数字>=1200变成黑色. 900<=数字 <=1200.变成黄色. 数字<=900就红色.
贵哥的编程之路
2020/10/30
7290
vue.js 事件
1.使用事件的第一种方式: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <script type="text/javascript" src='vue.min.js'></
贵哥的编程之路
2021/03/02
6.2K0
vue.js 事件
24·灵魂前端工程师养成-JS实践(会动的代码:画太极)
-多年互联网运维工作经验,曾负责过大规模集群架构自动化运维管理工作。 -擅长Web集群架构与自动化运维,曾负责国内某大型金融公司运维工作。 -devops项目经理兼DBA。 -开发过一套自动化运维平台(功能如下): 1)整合了各个公有云API,自主创建云主机。 2)ELK自动化收集日志功能。 3)Saltstack自动化运维统一配置管理工具。 4)Git、Jenkins自动化代码上线及自动化测试平台。 5)堡垒机,连接Linux、Windows平台及日志审计。 6)SQL执行及审批流程。 7)慢查询日志分析web界面。
DriverZeng
2022/09/26
1.5K0
24·灵魂前端工程师养成-JS实践(会动的代码:画太极)
移动端video的项目
<!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"> *{margin: 0;padding: 0;list-style: none;} </style> </head> <body
贵哥的编程之路
2020/10/28
5040
touch的深入理解
注意下;这里代表了ev.cancelBubble=true;移动端的阻止事件冒泡的代码.
贵哥的编程之路
2020/10/30
3730
touch的深入理解
伪类
<!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"> *{padding: 0px;margin: 0px;} #div1 { width: 200px;height: 200
贵哥的编程之路
2020/10/28
7100
常见的手写代码题集
要求是 yield 后面只能是 Promise 或 Thunk 函数,详见 es6.ruanyifeng.com/#docs/gener…
前端迷
2020/02/19
7080
移动端的box-shadow
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;list-style: none} div{width: 200px;height: 200px; position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto;border:
贵哥的编程之路
2020/10/28
6300
移动端顺序问题上
<!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"> *{margin: 0;padding:0;list-style: none;} #div1,#div2,#div3{width: 20
贵哥的编程之路
2020/10/28
3010
input的类型大全
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="btn"> <script type="text/javascript"> btn.onchange=fu
贵哥的编程之路
2020/10/28
4600
移动端上上(transform-translateZ注册)
<!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"> *{padding: 0px;margin: 0px;list-style: none;} #div1 { width:
贵哥的编程之路
2020/10/28
2790
CSS3 2D转换
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果
梨涡浅笑
2020/10/27
4440
CSS3 2D转换
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
1.抽屉式(动态)选择 button(纯css实现) html代码:  <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="s
淼学派对
2022/11/20
1.5K0
10个超酷的H5特效设计+1个仿最新苹果UI设计(压轴)
HTML5+CSS3学习总结(完结)
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为HTML语言,具有新的元素、属性和行为。
全栈程序员站长
2022/07/25
2.3K0
HTML5+CSS3学习总结(完结)
【java web 01】3小时快速学习前端知识(收藏备用)
编辑好demo,选择右下角的Go live会自动跑一个小型服务器,就可以很方便的看你的html解析效果喽。
半旧518
2024/07/09
3260
【java web 01】3小时快速学习前端知识(收藏备用)
原生JS实现立体金字塔
采用原生JS及CSS 3.0实现一个金字塔的效果,这个特效在实际工作中用处不大,纯属娱乐。
越陌度阡
2020/11/26
2K0
原生JS实现立体金字塔
一篇文章带你了解网页框架——Vue简单入门
如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助
秋落雨微凉
2022/10/25
9850
一篇文章带你了解网页框架——Vue简单入门
CSS 3.0实现正方体3D效果
分享一个用CSS 3.0实现的正方体3D效果,效果如下: 以下是代码实现: <!doctype html> <html> <head> <meta charset="utf-8">
越陌度阡
2020/11/26
6120
CSS 3.0实现正方体3D效果
相关推荐
移动端初级知识点解析:translateZ translateY rotateY(上上上)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验