javascript 拽拉效果 供JS初学者学习参考

不过这里未使用事件捕捉和释放,呵呵~

JS_拽拉效果_我们

div{position:absolute;width:200px;height:100px;background:#FFFADC;border:1px solid #CC6600;}

var idid = document.getElementById('idid');
idid.onmousedown = function(bbb){
if(!bbb)bbb=window.event;
var ox = bbb.layerX?bbb.layerX:bbb.offsetX;
var oy = bbb.layerY?bbb.layerY:bbb.offsetY;
idid.onmousemove = function(ccc){
if(!ccc)ccc=window.event;
idid.style.left = ccc.clientX - ox + 'px';
idid.style.top = ccc.clientY - oy + 'px';
}
idid.onmouseup = function(){
idid.onmousemove = null;
}
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • javascript 拽拉效果 供JS初学者学习参考

    不过这里未使用事件捕捉和释放,呵呵~ JS_拽拉效果_我们 div{position:absolute;width:200px;height:100px;background:#FFFADC;border:1px solid #CC6600;} var idid = document.getElementById('idid'); idid.onmousedown = function(bbb){ if(!bbb)bbb=window.event; var ox = bbb.layerX?bbb

  • JavaScript的MVVM库Vue.js入门学习笔记

    一.v-bind 缩写 <!-- 完整语法 --> <a v-bind:href="url"></a> <!-- 缩写 --> <a :href="url"></a> <!-- 完整语法 --> <button v-bind:disabled="someDynamicCondition">Button</button> <!-- 缩写

  • JavaScript可视化图表库D3.js API中文参考

    D3库所提供的所有 API 都在 d3 命名空间下.d3 库使用语义版本命名法(semantic versioning). 你可以用 d3.version 查看当前的版本信息. d3 (核心部分) 选择集 d3.select - 从当前文档中选择一系列元素. d3.selectAll - 从当前文档中选择多项元素. selection.attr - 设置或获取指定属性. selection.classed - 添加或删除选定元素的 CSS 类(CSS class). selection.styl

  • 原生JS实现拖拽图片效果

    原生JS实现拖拽图片效果

    本文实例为大家讲解了JS实现拖拽图片效果的详细代码,分享给大家供大家参考,具体内容如下 javascript event 对象的clientX,offsetX,screenX,pageX的区别: 用html5的drag来实现拖拽有兼容性问题,使用拖拽插件代码又很多,而这个拖拽demo代码少,并且兼容所有浏览器,很值得在项目中使用, css样式如下: #div1{ width: 100px; height: 100px; background-color: #4D4D4D; position: a

  • JS实现图片拖拽交换效果

    JS实现图片拖拽交换效果,供大家参考,具体内容如下 听 WEB前端javascript企业实战班 公开课,用JS实现了图片拖拽交换的目的:感谢老师的讲解. 实现要点 鼠标点击onmousedown:获取鼠标在页面上可视区域的位置(clientX, clientY)和元素外边框距已定位父元素容器的位置(offsetLeft,offsetTop): 鼠标移动onmousemove: 获取鼠标在页面上可视区域的位置(clientX, clientY),并实时改变目标元素位置:进行碰撞检测,同时计算被碰

  • BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)

    BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)

    接着上篇的内容,在上篇给大家介绍了Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果 Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 官方:http://twitter.github.io/typeahead.js/ 示例:http://twitter.github.io/typeahead.js/examples/(本

  • Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

    Bootstrap学习系列之使用 Bootstrap Typeahead 组件实现百度下拉效果

    UnderScore官网:http://underscorejs.org/ 参考文档:http://www.css88.com/doc/underscore/ 页面代码: @{ ViewBag.Title = "Index"; } <script src="Scripts/bootstrap-typeahead.js"></script> <script src="Scripts/underscore-min.js"

  • JS实现网站菜单拖拽移位效果的方法

    JS实现网站菜单拖拽移位效果的方法

    本文实例讲述了JS实现网站菜单拖拽移位效果的方法.分享给大家供大家参考.具体如下: 这是一个基于JavaScript的层手动实例,让网站的菜单可以拖拽移位,记得土豆网的"豆单"有这种功能.本效果还尚未彻底完成,部分地方因没有写入对应内容,因此JS可能会提示有错误. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-web-menu-tzyw-style-codes/ 具体代码如下: <html> <head>

  • JavaScript实现拖拽盒子效果

    JavaScript实现拖拽盒子效果

    本文实例为大家分享了JavaScript实现拖拽盒子效果的具体代码,供大家参考,具体内容如下 实现效果: 1.单击关闭,关闭盒子 2.点击左上方'点击注册',打开盒子 3.鼠标放在盒子上方蓝色区域显示十字 4.点击鼠标不松开就可移动盒子 5.松开鼠标图片暂停 实现步骤: 1.在页面最上方设置一个盒子,里面有一个超链接,超链接里面设置href="javascript:void(0);",再点击时不打开网页. 2.再设置一个可以拖拽的盒子,盒子嵌套一个蓝色盒子为的最上方的蓝色区域,蓝色盒子

  • JS实现六边形3D拖拽翻转效果的方法

    JS实现六边形3D拖拽翻转效果的方法

    效果图 实例代码如下: <!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=&q

随机推荐