この記事の例では、jQuery が Div ドラッグとキーボード コントロールの包括的な効果をどのように実装するかを説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。 コードをコピー コードは次のとおりです: jQuery Div拖动+键盘控制综合效果 预览时看不到效果，刷新一下即可 <br> var msgObj = document.getElementById('text');<br> var posx = 0;<br> var posy = 0;<br> var moveable = false;<br> var MouseDownEvent = document.onmousedown;<br> var MouseMoveEvent = document.onmousemove;<br> var MouseUpEvent = document.onmouseup;<br> msgObj.onmousedown = function(evt) {<br> var evt = evt||window.event;<br> moveable = true; <br> posy = evt.clientY-parseInt(msgObj.style.top);<br> posx = evt.clientX-parseInt(msgObj.style.left);<br> document.onmousemove = function(evt) {<br> if (moveable) {<br> var evt = evt||window.event;<br> msgObj.style.left = evt.clientX - posx + "px";<br> msgObj.style.top = evt.clientY - posy + "px";<br> }<br> change();<br> };<br> document.onmouseup = function () { <br> if (moveable) { <br> document.onmousemove = MouseMoveEvent;<br> document.onmouseup = MouseUpEvent;<br> moveable = false; <br> posx = 0;<br> posy = 0;<br> } <br> };<br> }<br> var v=1;<br> var a=0.9;<br> var h=document.documentElement.clientHeight;<br> function scroll(){<br> var timer=setInterval(function(){<br> v +=a;<br> var top=(parseInt(msgObj.style.top)||0);<br> if(top+v>h-70){<br> if(v<2)clearInterval(timer);<br /> msgObj.style.top=h-70+"px";<br /> v=-v*0.5; <br /> }else{<br /> msgObj.style.top=top+v+"px";<br /> }<br /> change();<br /> },10);<br /> };<br /> $(document).keyup(function(e){<br /> var e = e || window.event ;<br /> if(e.which == 13){<br /> scroll(); <br /> }<br /> })<br /> var x = 4 ;<br /> var y = 4 ;<br /> function newpro(){<br /> var Height = document.documentElement.clientHeight ;<br /> var Width = document.documentElement.clientWidth ;<br /> var newobj = document.createElement('div');<br /> newobj.setAttribute('id','bigbox');<br /> newobj.style.position = 'absolute';<br /> newobj.style.left = 20 +"px";<br /> newobj.style.top = 80 +"px";<br /> newobj.style.height = Height/x +"px" ;<br /> newobj.style.width = Width/y +"px" ;<br /> newobj.style.borderWidth = 1+"px";<br /> newobj.style.borderColor = "#ff6500";<br /> newobj.style.borderStyle = 'solid' ;<br /> newobj.innerHTML='<div id="minbox"></div>';<br> Document.body.appendChild(newobj);<br> Change();<br> }<br> 関数change(){<br> var minobj = document.getElementById('minbox');<br> minobj.style.position = '絶対';<br> minobj.style.left = parseInt(msgObj.style.left)/x "px";<br> minobj.style.top = parseInt(msgObj.style.top)/y "px";<br> minobj.style.height = 20 "px" ;<br> minobj.style.width = 30 "px" ;<br> minobj.style.background = "#F06";<br> }<br> window.onload = function(){<br> newpro();<br> }<br> この記事が皆さんの jQuery プログラミングに役立つことを願っています。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
