用js+css 模拟九宫格精灵

最新推荐文章于 2023-01-11 01:08:11 发布
最新推荐文章于 2023-01-11 01:08:11 发布
阅读量561 收藏
点赞数
分类专栏： javaScript 文章标签： css javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cong_wa/article/details/52330843
版权 
<pre name="code" class="javascript">__setScale9Sprite :function(data)
	{
		var _this = this;
		if(data.wraperId != _this.m_id) {
			return;
		}

		//最外层的div
		var scale9Sprite = _this.m_viewElement.querySelector('#scale9Sprite');
		if(!scale9Sprite) {
			scale9Sprite = document.createElement('div');
			scale9Sprite.id = 'scale9Sprite';
			scale9Sprite.style.position = 'absolute';
			scale9Sprite.style.border = 'solid 1px black';
			_this.m_viewElement.appendChild(scale9Sprite);
		}
		if (data.key) {
			switch(data.key){
				case 'file':
						var resInfo = gameEditor.getProject().getFileInfoByID(data.resId);
						_this.scale9SpriteResID = data.resId;
						if(resInfo) {
							var url = global.TAG_BASE_URL_RES_HOST + resInfo.resURL.substr(1);
							var width = resInfo.width;
							var height = resInfo.height;
							//通过循环创建9个img，用来存放裁切来的图片
							for (var i = 1; i <= 9 ; i++) {
								var imgSprite = '#img'+i;
								var img = scale9Sprite.querySelector(imgSprite);
								if (!img) {
									var img = document.createElement("img");
									//img.style.border = 'solid 1px black';
									img.id = 'img'+ i;
									//通过绝对定位确定位置
									img.style.position = 'absolute';
									//img.style.top = Math.ceil(i/3)*height/3 +'px';
									//img.style.left = (i-1)%3*width/3 + "px";
									img.style.top = -height/2 +'px';
									img.style.left = -width/2 + 'px';
									img.style.width = width +'px';
									img.style.height = height + 'px';
									//对img进行裁切
									//img.style.clip =  "rect("+ (Math.ceil(i/3)-1)*height/3+"px"+","+(i-1)%3*width/3+"px"+","+width/3+"px"+","+height/3+"px" +")";
									//最终剪裁的矩形的上边距离原始元素的上边缘 
									//剪裁矩形的右边缘距离原元素左边缘的距离
									//剪裁矩形的下边缘距离原元素顶部的距离 
									//剪裁矩形的左边缘距离原元素左边缘的距离
									img.style.clip =  "rect("+ (Math.ceil(i/3)-1)*height/3+"px"+","+((i-1)%3+1)*width/3+"px"+","+((i-1)%3+Math.ceil(i/3)*height/3)+"px"+","+((i-1)%3)*width/3+"px" +")";
									//对每个img的图片的填充
									img.width = width ;
									img.height = height ;
									scale9Sprite.appendChild(img);
								};
								img.setAttribute('src', url);
								
							};
							
						}
				break;
				case 'scaleAreaX':
					var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);

					var wraper = gameEditor.GetWraper(data.wraperId);
					var component = wraper.getComponents('Scale9Sprite')[0];

					if (!resInfo && !wraper  && !component) {
						return;
					};
					var spW = Number( component.getPropertyValue('scale9SpriteW'))|| resInfo.width;
					var spH =  Number(component.getPropertyValue("scale9SpriteH"))|| resInfo.height;
					var picX = Number(component.getPropertyValue("scaleAreaX")) || spW/3;
					var picY = Number(component.getPropertyValue("scaleAreaY")) || spH/3;
					var picW = Number(component.getPropertyValue("scaleAreaW")) || spW/3;
					var picH = Number(component.getPropertyValue("scaleAreaH")) || spH/3;
					//初始化裁切
					this.onScale9SapriteRefresh(picX,picY,picW,picH,spW,spH);
					this.onScale9SapriteChange(picX,picY,picW,picH,spW,spH);







				break;
				case 'scaleAreaY':

				
				var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);

				var wraper = gameEditor.GetWraper(data.wraperId);
				var component = wraper.getComponents('Scale9Sprite')[0];

				if (!resInfo && !wraper  && !component) {
						return;
					};
				
				var spW = Number( component.getPropertyValue('scale9SpriteW'))|| resInfo.width;
				var spH =  Number(component.getPropertyValue("scale9SpriteH"))|| resInfo.height;
				var picX = Number(component.getPropertyValue("scaleAreaX")) || spW/3;
				var picY = Number(component.getPropertyValue("scaleAreaY")) || spH/3;
				var picW = Number(component.getPropertyValue("scaleAreaW")) || spW/3;
				var picH = Number(component.getPropertyValue("scaleAreaH")) || spH/3;
				//初始化裁切
				this.onScale9SapriteRefresh(picX,picY,picW,picH,spW,spH);
				this.onScale9SapriteChange(picX,picY,picW,picH,spW,spH);


				break;
				case 'scaleAreaW':
				var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);

				var wraper = gameEditor.GetWraper(data.wraperId);
				var component = wraper.getComponents('Scale9Sprite')[0];

				if (!resInfo && !wraper  && !component) {
						return;
					};
				
				var spW = Number( component.getPropertyValue('scale9SpriteW'))|| resInfo.width;
				var spH =  Number(component.getPropertyValue("scale9SpriteH"))|| resInfo.height;
				var picX = Number(component.getPropertyValue("scaleAreaX")) || spW/3;
				var picY = Number(component.getPropertyValue("scaleAreaY")) || spH/3;
				var picW = Number(component.getPropertyValue("scaleAreaW")) || spW/3;
				var picH = Number(component.getPropertyValue("scaleAreaH")) || spH/3;
				//初始化裁切
				this.onScale9SapriteRefresh(picX,picY,picW,picH,spW,spH);
				this.onScale9SapriteChange(picX,picY,picW,picH,spW,spH);


				break;
				case 'scaleAreaH':
					var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);

					var wraper = gameEditor.GetWraper(data.wraperId);
					var component = wraper.getComponents('Scale9Sprite')[0];

					if (!resInfo && !wraper  && !component) {
						return;
					};
					
					var spW = Number( component.getPropertyValue('scale9SpriteW'))|| resInfo.width;
					var spH =  Number(component.getPropertyValue("scale9SpriteH"))|| resInfo.height;
					var picX = Number(component.getPropertyValue("scaleAreaX")) || spW/3;
					var picY = Number(component.getPropertyValue("scaleAreaY")) || spH/3;
					var picW = Number(component.getPropertyValue("scaleAreaW")) || spW/3;
					var picH = Number(component.getPropertyValue("scaleAreaH")) || spH/3;
						//初始化裁切
					this.onScale9SapriteRefresh(picX,picY,picW,picH,spW,spH);
					this.onScale9SapriteChange(picX,picY,picW,picH,spW,spH);
				break;
				case 'scale9SpriteW':
			
					var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);

					var wraper = gameEditor.GetWraper(data.wraperId);
					var component = wraper.getComponents('Scale9Sprite')[0];
					if (!resInfo && !wraper  && !component) {
						return;
					};

					
					var spW = Number( component.getPropertyValue('scale9SpriteW'))|| resInfo.width;
					var spH =  Number(component.getPropertyValue("scale9SpriteH"))|| resInfo.height;
					var picX = Number(component.getPropertyValue("scaleAreaX")) || spW/3;
					var picY = Number(component.getPropertyValue("scaleAreaY")) || spH/3;
					var picW = Number(component.getPropertyValue("scaleAreaW")) || spW/3;
					var picH = Number(component.getPropertyValue("scaleAreaH")) || spH/3;
					//初始化裁切
					this.onScale9SapriteRefresh(picX,picY,picW,picH,spW,spH);
					this.onScale9SapriteChange(picX,picY,picW,picH,spW,spH);
				break;
				case 'scale9SpriteH':
				
					var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);

					var wraper = gameEditor.GetWraper(data.wraperId);
					var component = wraper.getComponents('Scale9Sprite')[0];
					if (!resInfo && !wraper  && !component) {
						return;
					};

					
					var spW = Number( component.getPropertyValue('scale9SpriteW'))|| resInfo.width;
					var spH =  Number(component.getPropertyValue("scale9SpriteH"))|| resInfo.height;
					var picX = Number(component.getPropertyValue("scaleAreaX")) || spW/3;
					var picY = Number(component.getPropertyValue("scaleAreaY")) || spH/3;
					var picW = Number(component.getPropertyValue("scaleAreaW")) || spW/3;
					var picH = Number(component.getPropertyValue("scaleAreaH")) || spH/3;
					//初始化裁切
					this.onScale9SapriteRefresh(picX,picY,picW,picH,spW,spH);
					this.onScale9SapriteChange(picX,picY,picW,picH,spW,spH);
				break;
				case 'delete':
						var img = _this.m_viewElement.querySelector('#scale9Sprite');
						if(img) {
							_this.m_viewElement.removeChild(img);
						}
						eventCenter.raise('NOTIFY_OBJECT_SIZE_CHANGED');
				break;
			}
		};

		eventCenter.raise('NOTIFY_OBJECT_SIZE_CHANGED');


	},
	//当九宫格发生改变
	onScale9SapriteChange: function(picX,picY,picW,picH,spW,spH)
	{

		//最终剪裁的矩形的上边距离原始元素的上边缘 
		//剪裁矩形的右边缘距离原元素左边缘的距离
		//剪裁矩形的下边缘距离原元素顶部的距离 
		//剪裁矩形的左边缘距离原元素左边缘的距离

		//获取放大缩小倍数
		var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);
		if (resInfo) {
			var resWidth = resInfo.width;
			var resHeight = resInfo.height;

			var ratioX = (spW - picX - (resWidth - picX - picW))/(resWidth- picX -(resWidth - picX - picW));
			var ratioY = (spH- picY - (resHeight - picY - picH))/(resHeight - picY - (resHeight - picY - picH));

			var	_this = this;
			var scale9Sprite = _this.m_viewElement.querySelector('#scale9Sprite');
			if (scale9Sprite) {

				var img1 = scale9Sprite.querySelector('#img1');
				if (img1) {
					img1.style.clip =  "rect("+ 0 +"px"+","+ picX +"px"+","+ (resHeight - picX - picH)  +"px"+","+ 0+"px" +")";
				};
				var img2 = scale9Sprite.querySelector('#img2');
				if (img2) {
				//x轴放大
					img2.style.width = resWidth * ratioX +'px';
					img2.style.left  = parseInt(img2.style.left) - (picX*ratioX - picX)  + 'px';
				//对齐中心点
					img2.style.clip =  "rect("+ 0 +"px"+","+ (picX*ratioX + picW*ratioX) +"px"+","+ (resHeight - picX - picH) +"px"+","+ picX*ratioX +"px" +")";
				};
				var img3 = scale9Sprite.querySelector('#img3');
				if (img3) {
				//需要对齐坐标
					img3.style.left = parseInt(img3.style.left) + (spW - parseInt(img3.style.width))  +"px";
					img3.style.clip =  "rect("+ 0 +"px"+","+ resWidth +"px"+","+ (resHeight - picY - picH) +"px"+","+ ( picW + picX) +"px" +")";
				};
				var img4 = scale9Sprite.querySelector('#img4');
				if (img4) {
				//Y轴压缩
					img4.style.height = resHeight * ratioY + 'px';
					img4.style.top = parseInt(img4.style.top) - (picY*ratioY - picY)  + 'px';

					img4.style.clip =  "rect("+ (parseInt(img4.style.height) - picY*ratioY - picH*ratioY) +"px"+","+ picX +"px"+","+ ((resHeight - picY - picH)*ratioY + picH*ratioY) +"px"+","+ 0+"px" +")";
				};
				var img5 = scale9Sprite.querySelector('#img5');
				if (img5) {

					img5.style.width = resWidth * ratioX +'px';
					img5.style.height = resHeight * ratioY + 'px';
				//中心点对齐
				//img5.style.top = parseInt(img5.style.top) + (spH - resHeight) + 'px';
				//img5.style.left = parseInt(img5.style.left)  - ((spW - parseInt(img5.style.width)) + picX) +"px";
					img5.style.top =   parseInt(img5.style.top) - (picY*ratioY - picY)  + 'px';
					img5.style.left =  parseInt(img5.style.left) - (picX*ratioX - picX)  + 'px';

					img5.style.clip =  "rect("+ (parseInt(img5.style.height) - picY*ratioY - picH*ratioY) +"px"+","+ (picX*ratioX + picW*ratioX)+"px"+","+ ((resHeight - picY - picH)*ratioY + picH*ratioY) +"px"+","+ picX*ratioX+"px" +")";
				};

				var img6 = scale9Sprite.querySelector('#img6');
				if (img6) {
				//Y轴压缩
					img6.style.height = resHeight * ratioY + 'px';
				//对齐坐标
					img6.style.left = parseInt(img6.style.left) + (spW - parseInt(img6.style.width))+"px";
					img6.style.top = parseInt(img6.style.top) - (picY*ratioY - picY)  + 'px';

				//img6.style.left = parseInt(img6.style.left) + (parseInt(img6.style.width) - resWidth)/2 + 'px';
				//img6.style.left = parseInt(img6.style.left) + (parseInt(img6.style.width) - resWidth) + 'px';
					img6.style.clip =  "rect("+ (parseInt(img5.style.height) - picY*ratioY - picH*ratioY) +"px"+","+ parseInt(img6.style.width) +"px"+","+ ((resHeight - picY - picH)*ratioY + picH*ratioY) +"px"+","+ (parseInt(img6.style.width) - (resWidth- picX - picW))+"px" +")";
				};

				var img7 = scale9Sprite.querySelector('#img7');
				if (img7) {
					img7.style.top = parseInt(img7.style.top) +  (spH - parseInt(img7.style.height)) +  'px';
					img7.style.clip =  "rect("+ (resHeight- picY) +"px"+","+ picX +"px"+","+ resHeight +"px"+","+ 0+"px" +")";
				
				};
				var img8 = scale9Sprite.querySelector('#img8');
				if (img8) {
				//X轴缩放
					img8.style.width = resWidth * ratioX +'px';
				//对齐坐标
					img8.style.top = parseInt(img8.style.top) + (spH - resHeight) + 'px';
					img8.style.left = img8.style.left  = parseInt(img8.style.left) - (parseInt(img8.style.width)/3 - picX) + 'px';

					img8.style.clip =  "rect("+ (resHeight - picY) +"px"+","+ (picX*ratioX + picW*ratioX) +"px"+","+ resHeight +"px"+","+ picX*ratioX+"px" +")";
				//img8.style.clip =  "rect("+ (resHeight - picY) +"px"+","+ (parseInt(img8.style.width) - (resWidth - picX- picW)) +"px"+","+ resHeight +"px"+","+ picX+"px" +")";
				};	
				var img9 = scale9Sprite.querySelector('#img9');
				if (img9) {
				//需要对齐坐标
					img9.style.top = parseInt(img9.style.top) +  (spH - parseInt(img9.style.height)) +  'px';
					img9.style.left = parseInt(img9.style.left) + (spW - parseInt(img9.style.width)) +"px";
					img9.style.clip =  "rect("+ (resHeight - picY) +"px"+","+ resWidth +"px"+","+ resHeight +"px"+","+ ( picW + picX)+"px" +")";
				};
			};

		};
	},
	//对九宫格重新布局
	onScale9SapriteRefresh : function(picX,picY,picW,picH,spW,spH)
	{
		var	_this = this;
		var scale9Sprite = _this.m_viewElement.querySelector('#scale9Sprite');
		var resInfo = gameEditor.getProject().getFileInfoByID(this.scale9SpriteResID);
		if (resInfo) {
			var width = spW || resInfo.width;
			var height = spH || resInfo.height;
			if (scale9Sprite) {
				for (var i = 1; i <= 9; i++) {
				
					var key = '#img' + i;
					var img = scale9Sprite.querySelector(key);
					if (img) {
						img.style.top = -height/2 +'px';
						img.style.left = -width/2 + 'px';
					//img.style.width = width +'px';
					//img.style.height = height + 'px';
						img.style.clip =  "rect("+ (Math.ceil(i/3)-1)*height/3+"px"+","+((i-1)%3+1)*width/3+"px"+","+((i-1)%3+Math.ceil(i/3)*height/3)+"px"+","+((i-1)%3)*width/3+"px" +")";
					};
				}
			};
		//最终剪裁的矩形的上边距离原始元素的上边缘 
		//剪裁矩形的右边缘距离原元素左边缘的距离
		//剪裁矩形的下边缘距离原元素顶部的距离 
		//剪裁矩形的左边缘距离原元素左边缘的距离

			var scale9Sprite = _this.m_viewElement.querySelector('#scale9Sprite');
			if (scale9Sprite) {
				var img1 = scale9Sprite.querySelector('#img1');
				if (img1) {
					img1.style.clip =  "rect("+ 0 +"px"+","+ picX +"px"+","+ (spH - picY - picH)  +"px"+","+ 0+"px" +")";
				};
				var img2 = scale9Sprite.querySelector('#img2');
				if (img2) {
					img2.style.clip =  "rect("+ 0 +"px"+","+ (picX+ picW) +"px"+","+ (spH - picY - picH) +"px"+","+ picX +"px" +")";
				};
				var img3 = scale9Sprite.querySelector('#img3');
				if (img3) {
					img3.style.clip =  "rect("+ 0 +"px"+","+ spW +"px"+","+ (spH - picY - picH) +"px"+","+ (picW + picX) +"px" +")";
				};
				var img4 = scale9Sprite.querySelector('#img4');
				if (img4) {
					img4.style.clip =  "rect("+ (spH- picY - picH) +"px"+","+ picX +"px"+","+ (spH - picY) +"px"+","+ 0+"px" +")";
				};
				var img5 = scale9Sprite.querySelector('#img5');
				if (img5) {
					img5.style.clip =  "rect("+ (spH - picY - picH) +"px"+","+ (picX + picW) +"px"+","+ (spH - picY) +"px"+","+ picX+"px" +")";
				};

				var img6 = scale9Sprite.querySelector('#img6');
				if (img6) {
					img6.style.clip =  "rect("+ (spH - picY - picH) +"px"+","+ spW +"px"+","+  (spH - picY) +"px"+","+ (picX+picW)+"px" +")";
				};

				var img7 = scale9Sprite.querySelector('#img7');
				if (img7) {
					img7.style.clip =  "rect("+ (spH - picY) +"px"+","+ picX +"px"+","+ spH +"px"+","+ 0+"px" +")";
				};
				var img8 = scale9Sprite.querySelector('#img8');
				if (img8) {
					img8.style.clip =  "rect("+ (spH - picY) +"px"+","+  (picX + picW) +"px"+","+ spH +"px"+","+ picX+"px" +")";
				};
				var img9 = scale9Sprite.querySelector('#img9');
				if (img9) {
					img9.style.clip =  "rect("+ (spH - picY) +"px"+","+ spW +"px"+","+ spH +"px"+","+ ( picW + picX)+"px" +")";
				};
			};

		};
	},




                

        

        

    




    

      

        

            

              
                
                  戴帽子的猫
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
JS + CSS 做一个简易九宫格抽奖

				
			

			

				

					苏灵均的博客
				

				

					09-17
					
					2661
					
				

			

		

		

			
				
目录

1.CSS样式

2.JS动作


1.CSS样式


样式大概分以下方面；

创建外框及内框样式；
	8个奖品小方格和中间按钮小方格；
	奖品小方格内部图片；
	选中奖品时的小方格样式；
先做两个方框，叠放在一起，里面的颜色比外面深一些


    /*外部大框样式*/
    .outer-square {
        background-color: cadetblue;
        width: 600px;
        height: 600px;
        b...

			
		

	



                

              
                



	

		

			

				
					
抽奖模拟器九宫格（用html+css+js实现）

				
			

			

				

					tiffany1105的博客
				

				

					08-10
					
					1971
					
				

			

		

		

			
				
/ if (btn.innerText === '停止抽奖') {九宫格的抽奖模拟器，点击中间的按钮开始抽奖，再点击一次停止抽奖。// btn.innerText = '停止抽奖'// 随机生成0到7 之前的整数, 不包含7。// 判断是不是又上一次的高亮类型循环。// 通过索引随机访问 待中奖 div。// 记录下上一次的类名div。// 1.获取开始按钮dom。//     // 开始抽奖。// 1.1 绑定点击事件。//     //结束抽奖。// 获取随机数作为索引。// 三元表达式写法。...

			
		

	



                


  
              

                


	

		

			

				
					
用js+css模拟九宫格精灵版本二

				
			

			

				

					戴帽子的猫
				

				

					09-09
					
					474
					
				

			

		

		

			
				
__setScale9Sprite_ :function(data)
	{
		var _this = this;
		if(data.wraperId != _this.m_id) {
			return;
		}
		//九宫格的信息
		var info = _this._scale9SpriteInfo = _this._scale9SpriteInfo || {
			url: null

			
		

	





	

		

			

				
					
九宫格抽奖html和css及js源码

				
			

			

				

					05-23
				

			

		

		

			
				
前后端分离，后端为java,（固定中奖概率和变化的概率俩种模式，设定有抽奖次数，预留有关键字（这个比较敏感大家懂的）,前端图片可以更换自己想要的图片

			
		

	



		

			
		



	

		

			

				
					
css布局 - 九宫格布局的方法汇总（更新中...）

				
			

			

				

					weixin_34221332的博客
				

				

					08-31
					
					295
					
				

			

		

		

			
				
目录：

margin负值实现
祖父和亲爹的里应外合
换个思路 - li生了儿子帮大忙。
借助absolute方位值，实现自适应的网格布局
cloumn多栏布局
grid
display： table；
css3选择器nth-child（）

除非特别说明，以下几种方式的通用html结构如下：
<div class="box">
    <ul>
      <li...

			
		

	





	

		

			

				
					
js+css3九宫格弹出窗口特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
js+css3九宫格弹出窗口代码是一款点击弹出窗口文字详情展示动画特效。

			
		

	





	

		

			

				
					
js+css3九宫格弹出窗口代码

				
			

			

				

					06-24
				

			

		

		

			
				
js+css3九宫格弹出窗口代码是一款点击弹出窗口文字详情展示动画特效。

			
		

	





	

		

			

				
					
HTML+CSS+JS实现九宫格转盘抽奖

				
			

			

				

					02-17
				

			

		

		

			
				
界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的HTML+CSS+JS实现九宫格转盘抽奖，赶紧学起来吧，直接拿到直接自己后台管理系统当登录使用，简洁又大方...

			
		

	





	

		

			

				
					
js+css3九宫格点击打开窗口展示动画特效

				
			

			

				

					06-11
				

			

		

		

			
				
js+css3九宫格点击打开窗口展示动画特效是一款九宫格布局的点击按钮弹出窗口查看文字详情代码，这种效果可以在很小的位置展示很多的信息。

			
		

	





	

		

			

				
					
九宫格手势密码

				
			

			

				

					11-08
				

			

		

		

			
				
九宫格手势密码
[注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]

			
		

	





	

		

			

				
					
T9键盘模拟器（全部自绘）

				
			

			

				

					11-27
				

			

		

		

			
				
字模由字模生成软件复制得来。全部显示信息自已绘制得到，包括光标，按钮。与上一个共用一个按键类（CBaseButton）。与上一个不同的是响应点击面板消息，而不是按键消息。

			
		

	





	

		

			

				
					
自适应图片九宫格 css,用css编写自适应九宫格(示例代码)

				
			

			

				

					weixin_39630771的博客
				

				

					08-04
					
					313
					
				

			

		

		

			
				
.video_list{list-style-type: none;}.video_list li{width: 32%;float: left;padding-bottom: 32%;position: relative;text-align: center;font-size:35px;margin-left: 1%;margin-bottom: 1%;}.video_list div{pos...

			
		

	





	

		

			

				
					
利用div+css实现九宫格，然后用js实现点击每个格子可以随机更改格子(div)的背景颜色...

				
			

			

				

					weixin_30883271的博客
				

				

					06-17
					
					873
					
				

			

		

		

			
				
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div+css+js实现九宫格点击随机变色</title>
    <script>
        var inner = document....

			
		

	





	

		

			

				
					
原生JS写 九宫格

				
			

			

				

					MarkJunHao的博客
				

				

					07-20
					
					1864
					
				

			

		

		

			
				
原生JS写了一个九宫格，可以实现颜色随机，位置随机，拖拽等功能，直接上图。




&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;九宫格&lt;/title&gt;
        &lt;style&gt

			
		

	





	

		

			

				
					
华为OD机试 九宫格按键输入法

				
			

			

				

					qq_30657563的博客
				

				

					01-11
					
					1319
					
				

			

		

		

			
				
模拟九宫格输入:九宫格按键输入，输出显示内容，有英文和数字两个模式，默认是数字模式，数字模式直接输出数字，
英文模式连续按同一个按键会依次出现这个按键上的字母，如果输入 ‘/’ 或者其他字符，则循环中断


			
		

	





	

		

			

				
					
css实现九宫格，不定宽高百分比（使用padding实现Div高度根据自适应宽度（百分比）调整）

				
			

			

				

					一枚不断学习的小码农一枚~
				

				

					04-14
					
					1235
					
				

			

		

		

			
				
css实现九宫格，但不一定有9个，可能有8个、7个，每两个格子间距是10px,一行放置3个格子，格子宽高比为1：2（最右的面试题）
 <div class="box">
    <div>1</div> 
    <div>2</div> 
    <div>3</div> 
    <div>4</div> 
    <div>5</div> 
    <div>

			
		

	





	

		

			

				
					
将多个背景集成到一个png图片上CSS定位 CSS Sprites 技术

				
			

			

				

					linuxstuding
				

				

					10-27
					
					178
					
				

			

		

		

			
				

 不知道您在浏览yahoo.com的网页中是否注意到,yahoo在页面制作上的技术和大多数网站不一样,他们把页面上的 ICON，栏目背景啊，图片按钮啊等都有会有规则的合并一张背景图,然后用background-position来实现背景图片的定位，他们为什么要花费一些时间来合并这些CSS背景图片呢,CSS中用一张背景图做页面的技术到底有什么优势呢?
当您往U盘中拷200张图片，会等很久。但是...

			
		

	





	

		

			

				
					
HTML+CSS+JS实现 ❤️九宫格图片悬停遮罩层特效❤️

				
			

			

				

					java李阳勇的博客
				

				

					09-11
					
					1285
					
				

			

		

		

			
				
???? 作者主页：Java李杨勇

???? 简介：Java领域优质创作者????、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】

???? 欢迎点赞 ???? 收藏 ⭐留言 ???? 



效果演示：文末获取源码





代码目录：







主要代码实现：


CSS样式：


@charset "utf-8";
* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    d

			
		

	





	

		

			

				
					
HTML+css+js九宫格抽奖

					
最新发布

				
			

			

				

					05-17
				

			

		

		

			
				
好的，以下是一个简单的 HTML+CSS+JS 九宫格抽奖的代码示例：  ```html <!DOCTYPE html>   	 	九宫格抽奖 	<style type="text/css"> 		.container { 			display: flex; 			flex-wrap: wrap; 			width: 300px; 			...

			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值