简单可拖动图层js特效分享

8个月前 (04-08 11:45)阅读回复0
大陆
大陆
  • 管理员
  • 发消息
  • 注册排名1
  • 经验值5294
  • 级别管理员
  • 主题1058
  • 回复2
楼主

分享一款js实现拖动图层特效,在图层上面压住鼠标左键可随意拖动,这个图层拖动特效兼容当前主流浏览器。

<!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/html;charset=gb2312">
<meta name="keywords" content="武鸣人网站,武鸣信息网,武鸣本地网,武鸣信息资源平台,减肥,健身,励志,励志语录,js特效,网页特效,www.wuming.ren">
<meta name="description" content="欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。">
<title>简单可拖动图层js特效分享_武鸣人</title>
<script language="javascript">
var drag_=false;
var D=new Function('obj','return document.getElementById(obj);')
var oevent=new Function('e','if (!e) e = window.event;return e')
function Move_obj(obj){
var x,y;
D(obj).onmousedown=function(e){
  drag_=true;
  with(this){
   style.position="absolute";var temp1=offsetLeft;var temp2=offsetTop;
   x=oevent(e).clientX;y=oevent(e).clientY;
   document.onmousemove=function(e){
    if(!drag_)return false;
    with(this){
     style.left=temp1+oevent(e).clientX-x+"px";
     style.top=temp2+oevent(e).clientY-y+"px";
    }
   }
  }
  document.onmouseup=new Function("drag_=false");
}
}//武鸣人网站https://www.wuming.ren 网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)
</script>
</head>
<body>
<a href="https://www.wuming.ren">武鸣人</a>,各种信息资源免费发布,分享励志语录经典短句,减肥健身常识,各种js特效代码。网站很好记住,wuming.ren(武鸣拼音.ren域名后缀)<hr>
<!--欢迎来到武鸣人信息资源平台,各种信息免费发布,资源共享合作共赢,分享互联网流行的励志语录经典短句,减肥健身健康小常识及打卡记录,收集各种js特效代码。-->
<script type="text/javascript" src="https://www.wuming.ren/ad/tc.js"></script>
<script type="text/javascript" src="https://www.wuming.ren/ad/a.js"></script>
<div id="www_wuming_ren" style="background-color: #66FFFF;width:200px;height:100px;border:1px #000 solid;text-align:center;" onmouseover="Move_obj('www_wuming_ren')">武鸣人<br />各种信息免费发布,资源共享合作共赢!<br />这个图层可随意拖动。</div>
</body>
</html>


0
0
收藏0

本文来自武鸣人网站,转载请注明出处

本文地址:https://www.wuming.ren/a/649.html

回帖

简单可拖动图层js特效分享 期待您的回复!

取消
载入表情清单……
载入颜色清单……
插入网络图片

取消确定

图片上传中
编辑器信息
提示信息