新浦京81707con > 功能介绍 > JS实现超简单的鼠标拖动效果,JS实现的自定义网

原标题:JS实现超简单的鼠标拖动效果,JS实现的自定义网

浏览次数:177 时间:2019-09-04

可望本文所述对大家JavaScript程序设计有着扶助。

新浦京娱乐场官网手机版 1

你也许感兴趣的稿子:

  • JS完成超轻松的鼠标拖动作效果果
  • 新浦京娱乐场官网手机版,JS响应鼠标点击完结七个滑块区间拖动效果
  • JS完结左右拖动退换内容体现区域大小的艺术
  • js完毕div拖动动画运营轨迹效果代码分享
  • avalon js完结仿微博拖动图片排序
  • JS落成弹出浮动窗口(扶助鼠标拖动和停业)实例详解
  • JS达成可缩放、拖动、关闭和最小化的变化窗口完整实例
  • js用拖动滑块来调控图片大小的不二秘籍
  • Js可拖拽放大的层拖动特效达成格局
  • JS CSS完毕可拖动的弹出提醒框
  • js实现图片拖动改造各种附图
  • JS实现的自定义网页拖动类
<title>尽可能短的写一个JS拖动</title>
<body>
<div id="demo" style="width:100px; height:100px; position:absolute; background-color:silver;"></div>
<script>
function dragable(id){var d=document,o=d.getElementById(id),s=o.style,x,y,p='onmousemove';o.onmousedown=function(e){e=e||event;x=e.clientX-o.offsetLeft;y=e.clientY-o.offsetTop;d[p]=function(e){e=e||event;s.left=e.clientX-x 'px';s.top=e.clientY-y 'px'};d.onmouseup=function(){d[p]=null}}}
dragable("demo");
</script>

先来看运维作效果果截图如下:

盼望本文所述对大家的javascript程序设计具有扶助。

此地运用尽恐怕短的JavaScript代码写三个JS拖动,函数自身2八十六个字符。。。如果不是考虑包容性和变量封装,还足以更加短点。

您大概感兴趣的小说:

  • JS完结超轻易的鼠标拖动作效果果
  • JS响应鼠标点击完毕多少个滑块区间拖动作效果果
  • JS落成左右拖动改动内容体现区域大小的法子
  • js完结div拖动动画运转轨迹效果代码分享
  • avalon js达成仿和讯拖动图片排序
  • JS完结弹出浮动窗口(匡助鼠标拖动和破产)实例详解
  • JS落成动态移动层及拖动浮层关闭的格局
  • JS达成可缩放、拖动、关闭和最小化的变迁窗口完整实例
  • js用拖动滑块来支配图片大小的格局
  • Js可拖拽放大的层拖动特效完结情势
  • JS CSS达成可拖动的弹出提醒框
  • js完毕图片拖动改造种种附图
<html>
<head>
<title>动态移动的层</title>
<body bgcolor="#ADBAC9">
<div id="div1" class="yellow" style="VISIBILITY:visible ; 
background-color:#FFFF00; 
position: absolute; top: 60; left: 200;
width: 360; height: 250;
filter: revealTrans(transition=12, 'duration=0.1) 
blendTrans(duration=0.1) ">
<div id=title onmousedown=DIVDown("div1") 
style="background-color:#30608F;padding:2px; 
font-size:13px;text-indent:5;
color:#FFFFFF;cursor:move">标题</div>
<img id=close onclick=Hide(div1)
style="position: absolute; right: 2; top: 2" border="0"
src="close.gif" width="15" height="15">
</div>
<script language="JavaScript">
var Obj="none";
var pX
var pY
document.onmousemove=DIVMove;
document.onmouseup=DIVUp;
function DIVDown(tag){
Obj=tag;
pX=parseInt(document.all(Obj).style.left)-event.x;
pY=parseInt(document.all(Obj).style.top)-event.y;
}
function DIVMove(){
if(Obj!="none"){
document.all(Obj).style.left=pX event.x;
document.all(Obj).style.top=pY event.y;
event.returnValue=false;
}
}
function DIVUp(){Obj="none";}
function Hide(divid){
divid.filters.revealTrans.apply();
divid.style.visibility = "hidden";
divid.filters.revealTrans.play();
}
</script>
</body>
</html>

在线演示地址如下:

正文实例叙述了JS达成的自定义网页拖动类。分享给我们供大家参谋,具体如下:

正文实例汇报了JS完毕动态移动层及拖动浮层关闭的点子。分享给大家供我们参谋。具体实现方式如下:

本文由新浦京81707con发布于功能介绍,转载请注明出处:JS实现超简单的鼠标拖动效果,JS实现的自定义网

关键词: 新浦京81707con

上一篇:澳门新萄京赌场手机版首页五格For6,收藏PHP常用

下一篇:没有了