宝哥软件园

js实现砖头在页面拖拉效果

编辑:宝哥软件园 来源:互联网 时间:2021-09-13

用射流研究…实现一个砖头在页面,但鼠标点击拖动时,砖头在页面上形成拖拉效果:

刚开始时:

鼠标点击拖动后:

实现代码:

html head meta charset=' utf-8 ' style type=' text/CSS ' * { margin 33600 px;padd :0 px } # zhuantou { width :120 px高度:60 px背景-图像: URL(1。jpg);位置:固定;left :100 pxtop :50 px }/style body div id=' zhuato '/div脚本var ZT=document。query selector(' # zhuanto ');var ispreced=false var offsetX=0;var offsetY=0;ZT。onmousedown=function(event){ ispreced=true;这个。风格。光标='移动';offsetX=event . offsetxoffsety=event . offsety };ZT。onmouseup=function(){ isPRESED=false;这个。风格。光标='默认';};ZT。onmousemove=function(event){ if(!isPRESED){ return;} ZT。风格。左=(事件。客户端x-offsetX)' px ';ZT。风格。top=(事件。client y-offsetX)' px ';};/脚本/正文/html以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+