放大镜演示

第二天---放大镜

❀放大镜演示

<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.box {
				width: 350px;
				height: 350px;
				margin: 100px;
				border: 1px solid #ccc;
				position: relative;
			}
			
			.big {
				width: 400px;
				height: 400px;
				position: absolute;
				top: 0;
				left: 360px;
				border: 1px solid #ccc;
				overflow: hidden;
				display: none;
			}
			
			.mask {
				width: 175px;
				height: 175px;
				background: rgba(255, 255, 0, 0.4);
				position: absolute;
				top: 0px;
				left: 0px;
				cursor: move;
				display: none;
			}
			
			.small {
				position: relative;
			}
		</style>
<div class="box" id="box">
			<div class="small">
				<!--小层-->
				<img src="images/small.png" width="350" alt="" />
				<div class="mask"></div>
				<!--遮挡层-->
			</div>
			<!--小图-->
			<div class="big">
				<!--大层-->
				<img src="images/big.jpg" width="800" alt="" />
				<!--大图-->
			</div>
			<!--大图-->
		</div>
		<script>
		//获取相关元素
			var box=document.getElementById("box");
		//获取小图元素
			var small=box.children[0];
		//获取黄色放大镜方框
			var mask=small.children[1];
		//获取大图的div元素
			var big=box.children[1];
		//获取大图
			var bigImg=big.children[0];
		//当把鼠标放在小图范围时,放大镜显示对应的大图也显示,进行注册鼠标进入事件
			small.onmouseover=function(){
				mask.style.display="block";
				big.style.display="block";
				}
		//当把鼠标移在小图范围时,放大镜显示对应的大图隐藏,进行注册鼠标移出事件
			small.onmouseout=function(){
					mask.style.display="none";
					big.style.display="none";
				}
//鼠标将在小图范围内进行移动进行注册此事件
			small.onmousemove=function(e){
		//设置鼠标在正好显示在黄色方框的正中心
				var x=e.clientX-mask.offsetWidth/2;
				var y=e.clientY-mask.offsetHeight/2
			//因为上边设置style中margin值为100,需要进行相减,否则将无法显示鼠标在黄色方框中心
				x=x-100;
				y=y-100;
				//判断黄色放大镜横向最小移动范围
				x=x<0?0:x;
				//判断黄色放大镜横向最在大移动范围
				x=x>small.offsetWidth-mask.offsetWidth?small.offsetWidth-mask.offsetWidth:x;
				//判断放大镜纵向移动最小移动范围
				y=y<0?0:y;
				//判断放大镜纵向移动最大移动范围
				y=y>small.offsetHeight-mask.offsetHeight?small.offsetHeight-mask.offsetHeight:y;
				//进行设置放大镜的随着鼠标移动的位置变化值
				mask.style.left=x+"px";
				mask.style.top=y+"px";
				//首先清楚放大镜在small图中移动和大图在big的div中存在比例,也就是
				//放大镜移动距离/放大镜在小图中移动的最大距离=大图移动的距离/大图在big中移动的最大距离
				//大图移动的距离=放大镜移动距离*大图在big中移动的最大距离/放大镜在小图中移动的最大距离
				var moveX=x*(bigImg.offsetWidth-big.offsetWidth)/(small.offsetWidth-mask.offsetWidth);
				var moveY=y*(bigImg.offsetHeight-big.offsetHeight)/(small.offsetHeight-mask.offsetHeight);
				//从而进行对大图移动位置的改变设置,*注意:是对其margin值进行改变,并且是负值
				bigImg.style.marginLeft=moveX+"px";
				bigImg.style.marginTop=moveY+"px";
			
			
		</script>

在这里插入图片描述

Cocos Creator模拟砸金蛋3d旋转效果 | 附代码egg.zip // Learn TypeScript: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/typescript.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/typescript.html // Learn Attribute: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/reference/attributes.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/reference/attributes.html // Learn life-cycle callbacks: // - [Chinese] https://docs.cocos.com/creator/manual/zh/scripting/life-cycle-callbacks.html // - [English] http://www.cocos2d-x.org/docs/creator/manual/en/scripting/life-cycle-callbacks.html const {ccclass, property} = cc._decorator; @ccclass export default class Game extends cc.Component { @property Count: number = 5; @property(cc.Prefab) prefab: cc.Prefab = null; @property(cc.Node) nodeParent: cc.Node = null; private mEggs: cc.Node[] = []; // LIFE-CYCLE CALLBACKS: // onLoad () {} start () { } // update (dt) {} onClick(event, data){ switch(data){ case 'add':{ this.addEggs(); break; } case 'move':{ this.moveEggs(); break; } case 'stop':{ this.stopMoveEggs(); break; } } } addEggs(){ if(this.Count <= 0){ return; } this.mEggs = []; const N = 360 / this.Count; for(let i = 0; i < this.Count; i++){ let egg = cc.instantiate(this.prefab); let js = egg.getComponent('Egg'); js.setRadian(i * N * Math.PI / 180); js.updatePos(); egg.parent = this.nodeParent; this.mEggs.push(egg); } } moveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(true); } } stopMoveEggs(){ for(let i = 0; i < this.mEggs.length; i++){ this.mEggs[i].getComponent('Egg').setMove(false); } } }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值