zoukankan      html  css  js  c++  java
  • html实战4--transform3D

    1。给每一个范围条绑定【input】事件
    2.修改范围条的兄弟元素文本
    3.通过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>
    	<style>
    		*{
    			margin: 0;
    			padding: 0;
    		}
    		.box{
    			 200px;
    			height: 200px;
    			border:2px dashed black;
    			perspective: 1000px;
    		}
    		.cur{
    			 200px;
    			height: 200px;
    			background-color: pink;
    		}
    	</style>
    </head>
    <body>
    	<div class=box>	
    		<div class='cur'></div>	
    	</div>
    	<p>
    		RX:<input type='range' min='0' max='360' value='0' name='rx'><span>0</span>
    	</p>
    	<p>
    		RY:<input type='range' min='0' max='360' value='0' name='ry'><span>0</span>
    	</p>
    	<p>
    		RZ:<input type='range' min='0' max='360' value='0' name='rz'><span>0</span>
    	</p>
    	<p>
    		TX<input type='range' min='0' max='360' value='0' name='tx'><span>0</span>
    	</p>
    	<p>
    		TY<input type='range' min='0' max='360' value='0' name='ty'><span>0</span>
    	</p>
    	<p>
    		TZ<input type='range' min='0' max='360' value='0' name='tz'><span>0</span>
    	</p>
    
    </body>
    </body>
    </html>
    <script>
    	//获取全部input标签
    	var ranges = document.querySelectorAll('input');
    	var spans = document.querySelectorAll('span');
    	var cur = document.querySelectorAll('.cur');
    	var rx = 'rotateX(0deg)',ry = 'rotateY(0deg)', rz = 'rotateZ(0deg)',tx = 'translateX(0px)',ty = 'translateY(0px)',tz = 'translateZ(0px)'
    	//批量添加事件
    	for(var i = 0;i<ranges.length;i++){
    		+function(index){
    			ranges[index].oninput=function(){
    				//修改span标签对应的文本
    				spans[index].innerHTML = this.value;
    				//通过范围条的name属性值区分范围条
    				switch(this.name){
    					
    					case 'rx':
    					rx = `rotateX(${this.value}deg)`;
    					break;
    					case 'ry':
    					ry = `rotateY(${this.value}deg)`;
    					break;
    					case 'rz':
    					rz = `rotateZ(${this.value}deg)`;
    					break;
    					case 'tx':
    					tx = `translateX(${this.value}px)`;
    					break;
    					case 'ty':
    					ty = `translateY(${this.value}px)`;
    					break;
    					case 'tz':
    					tz = `translateZ(${this.value}px)`;
    					break;
    				}
    
    				cur[0].style.transform = rx+' '+ry+' '+rz+' '+tx+' '+ty+' '+tz;
    			}
    		}(i);
    	}
    </script>
    

  • 相关阅读:
    IP报头结构
    C#组件项目设置与开发应用范例
    UDP数据报协议
    WOW 各等级属性换算表
    清理SQLSERVER日志
    正则表达式匹配EXCEL地址字符串
    TCP数据段格式
    MAC地址结构
    (转载) Delphi中打印条码的方法
    为了使用uart2, 发现6252中define了 SCCB_SERIAL_CLK_PIN 值为 22, 为了避免冲突, 手动修改其值为 23
  • 原文地址:https://www.cnblogs.com/tingshu/p/14409162.html
Copyright © 2011-2022 走看看