autojs放大镜

JavaScript07

autojs放大镜,第1张

牙叔教程 简单易懂

群里有人问, 放大镜怎么写

Autojs版本: 9.0.5

Android版本: 8.0.0

软件可能还有些许bug, 介意就别看了, 百度找别的教程去

思路是最重要的, 其他的百度, bing, stackoverflow, 安卓文档, autojs文档, 最后才是群里问问

--- 牙叔教程

部分内容来自网络

本教程仅用于学习, 禁止用于其他用途

得到鼠标的pageX pageY   得到黄框父元素的offsetLeft offsetTop

pageX-offsetLeft得到黄框内x的位置  pageY-offsetTop得到黄框内y的位置

黄框.style.left = x-黄框.offsetWidth / 2 +'px'   黄框.style.top = y-黄框.offsetWidth / 2 +'px'

if(黄框.style.left <0){黄框.style.left = 0} else if(黄框.style.left >黄框父元素.offsetWidth - 黄框.offsetWidth){黄框.style.left = 黄框父元素.offsetWidth - 黄框.offsetWidth + 'px'}

同理top

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8"/>

<title>放大镜</title>

<meta name="keywords" content="" />

<meta name="Description" content="" />

<style type="text/css">

body,div,img {padding:0margin:0}

.con {width:256pxheight:192pxfloat:left}

.con img {width:256pxheight:192pxposition:absoluteborder:1px blue solid}

.dingwei {position:absolutewidth:100pxheight:100pxbackground-color:blackfilter:alpha(opacity=20)opacity:0.2cursor:movedisplay:none}

.big {float:leftwidth:400pxheight:400pxmargin:100pxoverflow:hidden}

</style>

</head>

<body>

<div class="con" id="father" style="position:relative">

<img src="images/huo.jpg" alt="图片"/>

<div id="aa" class="dingwei"> </div>

</div>

<div class="big" id="bpic">

<div class="inside"><img src="images/huo.jpg" alt="图片"/></div>

</div>

<script type="text/javascript">

var divs=document.getElementById("aa")

var fa=document.getElementById("father")

var maxWidth=maxHeight=S=0

var big=document.getElementById("bpic")

fa.onmouseover=function(){

divs.style.display="block"

big.style.display="block"

S=divs.offsetHeight/2

maxWidth=fa.clientWidth-divs.offsetWidth

maxHeight=fa.clientHeight-divs.offsetHeight//物块的活动范围；

}

fa.onmousemove=function(e){

a=e||window.event

var sbX=a.clientX

var sbY=a.clientY

var num=big.clientWidth/divs.clientWidth

var lf=sbX-S//鼠标的位置减去元素位置的一半的值就是元素的定位值；

var tp=sbY-S

//tp =tp<0?0:tp>maxHeight?maxHeight:tp

//lf =lf<0?0:lf>maxWidth?maxWidth:lf//判断物块的定位位置然后进行设置

if(tp<0){tp=0}

else{

if(tp>maxHeight){tp=maxHeight}

else{tp=sbY-S}

}

//判断物块的位置进行设置

if(lf<0){lf=0}

else{

if(lf>maxWidth){lf=maxWidth}

else{lf=sbX-S}

}

divs.style.left=lf+"px"

divs.style.top=tp+"px"

big.scrollLeft=num*lf

big.scrollTop=num*tp

}

fa.onmouseout=function(){

divs.style.display="none"

big.style.display="none"

}

</script>

</body>

</html>

这是放大镜效果的代码 你说的开启和关闭你自己再加上去就行了