转自:http://www.111cn.net/js_a/74/js+div+dl.htm
超简单js可拖动层代码
<div onmousedown="Drag(this, event)" style="position:absolute;border:1px solid red;background:pink;width:400px;height:300px;"></div>
<script>
function Drag(o, e){
var e = window.event || e;
var _x = e.offsetX || e.layerX;
var _y = e.offsetY || e.layerY;
document.onmousemove = function(e){
o.style.filter = 'Alpha(opacity=70)';
o.style.opacity = '0.7';
var e = window.event || e;
o.style.left = e.clientX - _x + 'px';
o.style.top = e.clientY - _y + 'px';
}
document.onmouseup = function(e){
document.onmousemove = null;
o.style.filter = o.style.opacity = '';
}
}
</script>
分享到:
相关推荐
Bootstrap 拖动文件批量上传代码是一个基于前端技术实现的功能,它结合了流行的 Bootstrap 框架、CSS 样式、JavaScript 动态交互以及 jQuery 和 HTML5 的特性。这个功能使得用户可以通过拖拽文件到指定区域来实现...
超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...
6. **文件结构**:压缩包中的文件名表明,项目包含`index.html`作为主入口文件,`less`目录可能包含LESS预处理器编写的CSS源码,`js`目录则包含JavaScript脚本,而`css`目录存放编译后的CSS样式文件。这符合一个标准...
通过合理的CSS样式和JavaScript交互,可以实现滚动、拖动等高级功能,同时保持代码的简洁性和可维护性。在压缩包文件"弹出层与遮罩层"中,可能包含了实现这种效果的具体示例代码,供开发者参考学习。
- **持续拖动(`drag`)**:当元素处于可移动状态时,根据鼠标的当前位置调整元素的位置,并同步更新阴影层的位置。 - **停止拖动(`stopDrag`)**:释放鼠标时触发。恢复元素的原始样式,如背景色和边框颜色,并释放...
弹出层可能包含关闭按钮、自定义内容区域、拖动功能,甚至可能有透明度调整和遮罩层。利用jQuery的插件机制,这种效果可以轻松地整合到任何项目中。 最后,"Jquery弹出美丽div"可能是一个简单的但设计精美的弹出框...
4. `recordable-guitar.js` 和 `guitar.js`:这是JavaScript文件,它们负责处理用户的输入,模拟电吉他的声音,并可能包含记录和回放功能。 5. `guitar11-hp-sprite.png`:这是一个精灵图,可能包含了Doodle中的多个...
带关闭按钮jquery+div消息弹出层代码例子 14.推荐jQuery+CSS实现图片放大浮动层带关闭按钮 15.通用jQuery对话框dialog或popup弹出层或提示窗口插件下载 6)工具提示 1.jquery+div随屏幕滚动特效(支持设置参数...
本项目“h5+css3+js精简音乐播放器”就是利用这些技术构建的一个功能完备、交互性强的音乐播放器,它具有播放列表管理、歌曲切换、时长拖拽调整、音量控制等多种功能,且所有参数均可由开发者灵活控制,提供了一种...
在本项目中,我们将探讨如何使用JavaScript(js)、CSS(层叠样式表)和HTML(超文本标记语言)来实现一个简单的滑块验证网页。 首先,HTML是网页的基础结构,我们需要创建一个包含滑块和验证区域的基本框架。以下...
【蓝色拼图游戏】是一...通过学习这个游戏的源代码,开发者可以提升自己的JavaScript技能,尤其是对于事件处理、DOM操作以及简单游戏逻辑实现的理解。同时,这个项目也强调了在设计游戏时,兼顾美观和易用性的重要性。
本资源“前端40款小游戏源码”提供了一系列经典的前端小游戏的完整源代码,包括“切水果”、“2048”、“连连看”和“拼图”等,这些都是基于HTML、CSS和JavaScript技术实现的。下面将详细探讨这些知识点。 1. **...
在这个拼图游戏中,`js`文件通常包含处理用户输入、计算拼图状态、交换碎片位置等功能的代码。JavaScript通过DOM(文档对象模型)来操作HTML元素,实现与用户的交互。例如,你可以使用`addEventListener`监听用户的...
1. **Dreamweaver时间线动画**:在Dreamweaver中,时间线动画的创建是通过拖动层的路径来制作的,而不是拖动路径本身。拖动层可以制作出与拖动轨迹相匹配的动画,但编辑状态下,时间线路径默认是不可见的。要确保...
以下是一个简单的JavaScript实现: ```javascript let slider = document.getElementById('slider'); let target = document.getElementById('target'); let dragging = false; let startX = 0; let targetX = ...
这部分内容可能指的是一些可以运行在网页上的代码片段,例如可以提供即时计算、简单脚本等的可执行代码。 二十五、凹陷文字 通过CSS的`text-shadow`属性,可以创造出凹陷的文字效果。 二十六、仿flash菜单 模仿...
开发者可能使用了自定义的CSS类来控制播放器的样式,同时通过JavaScript来处理用户的交互事件,如点击播放、暂停、拖动进度条等。这些代码可以作为学习和参考的实例,帮助我们理解如何结合HTML5和CSS3构建一个功能...
JavaScript中的事件监听器可以捕捉这些事件并执行相应代码。例如,`onmousedown`和`onmouseup`用于识别鼠标按下和释放,`ontouchstart`和`ontouchend`则对应于触摸屏设备的触摸开始和结束。 **动画制作** 为了使...
9. **前端框架与库**:虽然描述中提到的是一个简单的小代码,但在实际应用中,开发者可能会使用前端框架(如React、Vue或Angular)和颜色处理库(如chroma.js、tinycolor2等)来简化开发和增强功能。 10. **性能...
在题目中提到,关于拖动路径创建时间线,Dreamweaver允许用户通过拖动层的路径来制作动画,但形成的动画路径并不完全忠实于拖动的轨迹,而是需要在编辑状态下可见并进行调整。 2. **JavaScript**:JavaScript是一种...