<!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>
<title> New Document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Design Corp" content="www.mysuc.com" />
<meta name="Designer" content="hayden" />
<meta name="Designer mail" content="hayden@yeah.net" />
<meta name="robots" content="hayden" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<script language="JavaScript" type="text/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");
}
}
</script>
<body>
<div id="test" style="background-color:#0099CC;width:200px;height:100px;border:1px #000 solid;" onmouseover='Move_obj("test")'>鼠标过来点击拖动层</div>
</body>
</html>
分享到：
相关推荐
DIV层上下移动
在网页设计中，"DiV层移动"是一种常见的动态效果，用于增强用户体验和视觉吸引力。这个实例是基于JavaScript实现的，模拟了“赛我的个人小窝”网站中的某个功能，让我们来深入了解一下这个主题。 首先，`div`是HTML...
- 游戏开发：在HTML5游戏里，div层可以作为游戏元素，通过移动来实现游戏逻辑。 总之，通过CSS和JavaScript，我们可以实现丰富多样的移动div层效果，提高网页的互动性和用户体验。同时，利用现有的库和插件，如...
本话题主要探讨如何利用 `div` 和 `css` 实现一个动态效果：当鼠标移动到特定`div`上时，能够改变样式并弹出一个相关信息的`div`层。 首先，我们需要创建两个`div`元素：一个作为主内容区域，另一个作为弹出层。在...
本文通过一个具体的示例详细介绍了如何使用HTML、CSS及JavaScript技术实现随滚动条移动的DIV层。通过这种方式，可以极大地提升网站的交互性和用户体验。开发者可以根据实际需求调整CSS样式或JavaScript逻辑，以适应...
本实例将探讨如何通过JavaScript实现一个简单的`div`层移动效果，这在交互式网页设计中非常常见，可以增强用户体验。我们将主要讨论以下几个知识点： 1. **HTML基础知识**：`div`元素是HTML中的一个块级元素，它...
在网页设计中，"DIV可移动布局"是一种常见的前端技术，它允许用户通过拖动页面上的元素来调整页面布局，从而实现类似QQ空间那样的个性化和交互性。这种技术结合了HTML、CSS和JavaScript，为用户提供了一种动态和灵活...
总结起来，创建一个可移动的div层涉及HTML结构、CSS定位和JavaScript事件处理。通过上述步骤，我们可以构建一个简单而实用的解决方案，只需提供div的ID即可使其具有可移动性。在实际项目中，这种技术可以应用于各种...
在JavaScript编程中，创建一个移动...综上所述，"js移动层和跟随鼠标的div"涉及了JavaScript事件处理、DOM操作、CSS样式布局以及动画效果的实现。通过理解并实践这些知识点，开发者可以创建出更多有趣的网页交互元素。
标题“DIV上下移动”指的是在网页开发中，如何通过JavaScript或者CSS实现一个名为DIV的HTML元素在页面上上下移动的效果。这种效果常用于创建动态用户界面，如按钮悬停动画或者提示信息显示等。让我们深入探讨一下...
`DIV` 移动组件是利用 JavaScript 实现的一种交互效果，允许用户通过编程方式控制 `DIV` 层的位置，为网页增添动态性和交互性。这种组件在网页设计、游戏开发或者复杂用户界面中都有广泛应用。 JavaScript 是一种轻...
本教程将深入探讨如何在HTML中对`div`层进行添加、删除以及在删除时进行排序的操作。 首先，让我们理解`div`的基本用法。`<div>`标签是无语义的，主要用来包裹其他元素，创建一个逻辑上的容器。通过CSS样式，我们...
在网页设计中，"飘浮的div层"是一种常见的技术，用于创建能在用户滚动页面时保持固定位置的元素。这种效果常被用作广告、侧边栏导航或通知区域，以便始终保持可见，无论用户浏览页面的哪个部分。在这个场景中，"xxd_...
在网页设计中，我们经常需要实现弹出窗口的效果，而这种效果通常通过创建浮动的DIV层来实现。在本实例中，我们将深入探讨如何使用JavaScript来创建一个弹出DIV层窗口。 首先，我们需要了解HTML结构。`index.htm`和`...
在"CustomDiv"这个文件中，我们可以推测这可能包含了一段代码示例，演示如何创建一个具有上述特性的对话框：可刷新的模式对话框、可移动的div以及遮罩层。实现这样的功能通常涉及到以下几个步骤： 1. **创建模式...
综上所述，创建一个弹出且可移动的div层涉及HTML结构、CSS样式以及JavaScript事件处理的组合应用。实际操作中可能还需要考虑其他因素，如浏览器兼容性、用户体验优化等。通过学习和理解这些基本原理，开发者可以灵活...
在网页设计和开发中，创建一个可拖动的弹出div层是非常常见且实用的技术，尤其是在构建用户交互界面时。标题“弹出div拖动层”所指的就是这样一个功能，它允许用户通过鼠标来移动一个浮层div，这种功能常见于对话框...
1. `div.html`：这是主HTML文件，其中包含了实现可拖动div层的HTML结构，以及引用了jQuery和自定义JavaScript文件的链接。 2. `jquery.js`：这是jQuery的核心库，提供了一系列便捷的DOM操作和事件处理方法，为实现...
在HTML页面中实现拖动Div层是一项常见的交互设计技术，它允许用户通过鼠标操作移动页面上的元素，提高用户体验。这个功能通常结合JavaScript或者更高级的前端框架如jQuery来实现。以下是一个详细的步骤介绍和相关...