JavaScript使用面向对象实现的拖拽功能详解_javascript技巧

来源:脚本之家  责任编辑:小易  

是互联网的读者,你也应该是互联网的作者;你不该只是在互联网上冲浪,你本身就是波浪制造者。Web 2.0 之于Web 1.0,如同分布式计算之于集中式计算,网格之于大型主机。WEB2.0概念诠释Web2.0,是相对Web1.0(2003年以前的互联网模式)的新的一类互联网应用的统称,是一次从核心内容到外部应用的革命。由Web1.0单纯通过网络浏览器浏览html网页模式向内容更丰富、联系性更强、工具性更强的Web2.0互联网模式的发展已经成为互联网新的发展趋势。Web1.0到Web2.0的转变,具体的说,从模式上是单纯的“读”向“写”、“共同建设”发展;由被动地接收互联网信息向主动创造互联网信息迈进!从基本构成单元上,是由“网页”向“发表/记录的信息”发展;从工具上,是由互联网浏览器向各类浏览器、rss阅读器等内容发展;运行机制上,由“Client Server”向“Web Services”转变;作者由程序员等专业人士向全部普通用户发展;应用上由初级的“滑稽”的应用向全面大量应用发展。总之,Web2.0是以 Flickr、Craigslist、Linkedin、Tribes、Ryze、Friendster、Del.icio.us、43Things.com等网站为代表,以Blog、TAG、SNS、RSS、wiki等应用为核心,依据六度分隔、xml、ajax等新理论和技术实现的互联网新一代模式。应用:1、Blog(from wiki)历史:Blog一词本起源于 weblog,意思是网上日志。1997年由 Jorn Barger所提出。在1998年,infosift 的编辑Jesse J.Garrett(http://www.jjg.net),将一些类似blog的网站收集起来,寄给Cameron Barrett。Cameron随后将名单发布在CamWorld网站上,许多人亦陆续将blog的URL给Cameron,慢慢的,一个新的网络社区俨然成型。1999年,Brigitte Eaton(http://www.eatonweb.com)成立一个weblog 目录,收集她所知道的blog站。1999年,Peter Merholz(http://www.peterme.com)首次使用缩略词“blog”,成为今天常用的术语。但是,blog 真正开始快速发展的转折点,是在1999年6月,当时Pitas开始提供免费的weblog服务,紧接着8月,Pyra lab推出了现在的blogger.com。blogger.com 提供了简单易学的说明,以及能通过FTP直接将blog发表在个人网站上的功能,这带给使用者很大的方便。目前已经有了很多Blog托管服务商(BSP),业内人士对其盈利前景,持谨慎乐观态度。Blog的特点Blog是个人或群体以时间顺序所作的一种记录,并且不断更新。blog之间的交流主要是通过回溯引用(TrackBack)和回响/留言/评论(comment)的方式来进行的。blog的操作管理用语,也借鉴了大量档案管理用语。一个blog亦可被视为一个档案(archives),或是卷宗(fonds)。与传统档案不同的是,blog的写作者(blogger),既是这份档案的创作人(creator),也是其档案管理人(archivist)。Blog大量采用了RSS(Really Simple Syndication或者Rich Site Summary或者RDF Site Summary)技术,所有的RSS文件都必须符合由W3C发布的XML 1.0规范。对读者来说,可以通过RSS订阅一个blog,确知该blog作者最近的更新。对Blog作者来说,RSS可以使自己发布的文章易于被计算机程序理解并摘要。对知识管理和创造而言,blog提供了新的形态和途径。对汉语为母语的人而言,blog写作既接续了汉语笔记文学的优秀传统,更充分鼓励了个人表达。从交往形态考察,网志空间(blogosphere)设定了积极的读者、作者、编者互动转换关系,“言者互重,阅者相惜”。2、Tag(from blogbus)什么是Tag?Tag(标签)是一种更为灵活、有趣的日志分类方式,您可以为每篇日志添加一个或多个Tag(标签),然后您可以看到BlogBus上所有和您使用了相同Tag的日志,并且由此和其他用户产生更多的联系和沟通。不仅如此,我们还通过与Technorati的合作,把您的Tag发送到全球Blog空间,和全世界的人们共同分享。Tag体现了群体的力量,使得日志之间的相关性和用户之间的交互性大大增强,可以让您看到一个更加多样化的世界,一个关联度更大的Blog空间,一个热点实时播报的新闻台。Tag为您提供前所未有的网络新体验…当然,您也可以简单地把一个Tag(标签)理解为一个日志分类,但是Tag和分类的不同之处也很明显:首先,分类是您在写日志之前就定好的,而Tag是在您写完日志之后再添加的;其次,您可以同时为一篇日志贴上好几个Tag(标签),方便自己随时查找,而原先一篇日志只能有一个分类;再次,当您积累了一定数量的Tag之后,您可以看看自己在Blog中最经常写的是哪些话题;最后,您可以看到有哪些人和自己使用了一样的Tag(标签),进而找到和您志趣相投的Blogger。举一个例子,比如说:您写了一篇到西湖旅游的日志,原来您都是把这一类的日志放到自己的“驴行天下”分类下,但是有了Tag之后,您可以给这篇日志同时加上“旅游”、“杭州”、“西湖”、“驴行天下”等几个Tag,当浏览者点击其中任何一个Tag,他都可以看到您的这篇日志。同时您自己也可以通过点击这几个Tag,看看究竟有谁最近也去了杭州旅游,或许你们还可以交流一下旅游心得,成为下一次出游的伙伴呢!3、SNSSocial Network Service,社会性网络软件,依据六度理论,以认识朋友的朋友为基础,扩展自己的人脉。并且无限扩张自己的人脉,在需要的时候,可以随时获取一点,得到该人脉的帮助。SNS网站,就是依据六度理论建立的网站,帮你运营朋友圈的朋友。4、RSS(from wiki)RSS是一种用于共享新闻和其他Web内容的数据交换规范,起源于网景通讯公司的推"Push"技术,将订户订阅的内容传送给他们的通讯协同格式(Protocol)。RSS可以是以下三个解释的其中一个:Really Simple Syndication(真正简单的整合)RDF(Resource Description Framework)Site SummaryRich Site Summary(丰富站点摘要)但其实这三个解释都是指同一种Syndication的技术。目前RSS规范的主要版本有0.91、1.0和2.0。0.91版和1.0版完全不同,风格不同,制定标准的人也不同。0.91版和2.0版一脉相承。1.0版更靠拢XML标准。RSS目前广泛用于blog、wiki和网上新闻频道,世界多数知名新闻社网站都提供RSS订阅支持。5、Wiki(from wiki)Wiki一词源自夏威夷语的「wee kee wee kee」,本是「快点快点」之意。在这里Wiki指的是一种超文本系统。这种超文本系统系支持那些面向社群的协作式写作,同时也包括一组支持这种写作的辅助工具。有人认为,Wiki系统属于一种人类知识的网路系统,我们可以在Web的基础上对Wiki文本进行浏览、创建、更改,而且这种创建、更改、及发布的代价远比HTML文本小;与此同时Wiki系统还支持那些面向社群的协作式写作,为协作式写作提供了必要的帮助;最后,Wiki的写作者自然构成了一个社群,Wiki系统为这个社群提供了简单的交流工具。与其它超文本系统相比,Wiki有使用简便且开放的优点,所以Wiki系统可以帮助我们在一个社群内共用某个领域的知识。Wiki起源1995年沃德?坎宁安(Ward Cunningham)为了方便模式社群的交流创建了全世界第一个wiki系统-WikiWikiWeb,并用它建立了波特兰模式知识库(Portland Pattern Repository)。在建立这个系统的过程中,沃德?坎宁安创造了Wiki的概念和名称,并且实现了支持这些概念的服务系统。这个系统是最早的Wiki系统。从1996年至2000年间,波特兰模式知识库围绕著面向社群的协作式写作,不断发展出一些支持这种写作的辅助工具,从而使Wiki的概念不断得到丰富。同时Wiki的概念也得到了传播,出现了许多类似的网站和软件系统。Wiki的历史不长,无论是Wiki概念本身,还是相关软件系统的特性,都还在热烈的讨论中;所以怎样的一个站点才能称得上是一个Wiki系统还是有争议的。与Wiki相关新近出现的技术还有blog,它们都降低了超文本写作和发布的难度。这两者都是同内容管理系统密切相关的。Wiki的特点使用方便维护快捷:快速创建、存取、更改超文本页面(这也是为什么叫作"wiki wiki"的原因)。格式简单:用简单的格式标记来取代HTML 的复杂格式标记。(类似所见即所得的风格)链接方便:通过简单标记,直接以关键字名来建立链接(页面、外部连接、图像等)。命名平易:关键字名就是页面名称,并且被置于一个单层、平直的名空间中。可增长可增长:页面的链接目标可以尚未存在,通过点击链接,我们可以创建这些页面,从而使系统得以增长。修订历史:记录页面的修订历史,页面的各个版本都可以被获取。开放性开放的:社群内的成员可以任意创建、修改、或删除页面。可观察:系统内页面的变动可以被来访者清楚观察得到。由于Wiki的自组织,可增长以及可观察的特点,使Wiki本身也成为一个网路研究的对象。对Wiki的研究也许能够让人们对网路的认识更加深入理论和技术:1、六度关系理论目前流行的“六度分隔”理论是20世纪60年代由美国的心理学家米格兰姆(Stanley Milgram)提出的,这个理论可以通俗地阐述为:最多通过六个人你就能够认识任何一个陌生人。“六度分隔”成为人际关系世界中无可否认而又令人震惊的特征,许多社会学上的深入研究也给出令人信服的证据,说明这一特征不只是特例,在一般情形下也存在。最近,美国哥伦比亚大学社会学系的瓦茨教授领导的EMAIL试验也再次证明了这一人际关系世界中惊人的规律。然而,在现实世界中,六十亿人怎么可能真的构成如此紧密的相互关联呢?是互联网使一切成为现实。2、XmlXML即可扩展标记语言(eXtensible Markup Language)。标记是指计算机所能理解的信息符号,通过此种标记,计算机之间可以处理包含各种信息的文章等。如何定义这些标记,既可以选择国际通用的标记语言,比如HTML,也可以使用象XML这样由相关人士自由决定的标记语言,这就是语言的可扩展性。XML是从SGML中简化修改出来的。它主要用到的有XML、XSL和XPath等。3、AJAXAjax并不是一种技术。它实际上是几种已经在各自领域大行其道技术的强强结合。Ajax混合了:基于XHTML/CSS由DOM(Document Object Model)实现动态显示与交互通过XML和XSLT进行数据交换及处理使用JavaScript整合上述技术直观一点的说Ajax能够实现不刷新浏览器窗口(当然更不用安装..www.zgxue.com防采集请勿采集本网。

本文实例讲述了JavaScript使用面向对象实现的拖拽功能。分享给大家供大家参考,具体如下:

好学啊,只要你认真,够勤快,多敲代码,多练习,多动手敲 做好笔记 善于思考 绝对没问题的 php比java简单多了!

面向对象有个前提: 前提:所有东西都必须包含在onload里 改写:不能有函数嵌套,可以有全局变量 过程,如下 onload改成构造函数, 全局变量改成属性(通过this) 函数改写成方法

播放视频需要启用 JavaScript,推荐使用支持HTML5的浏览器访问。劳务派遣是指由劳务派遣公司与劳动者订立劳动合同,然后把劳动者派遣到需要用工的企业上班。企业需要支付劳务派遣公司一定的服务

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>面向对象的继承-1</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}</style><script>window.onload = function() { var oDiv = document.getElementById('div1'); oDiv.onmousedown = function(ev) { var ev = ev || event; var disX = ev.clientX - this.offsetLeft; var disY = ev.clientY - this.offsetTop; document.onmousemove = function(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px'; } document.onmouseup = function() { document.onmousemove = document.onmouseup = null; } }}</script></head><body> <div id="div1"></div></body></html>

你好 其实电脑的正规名字应该称为计算机,计算机由约翰·冯·诺依曼发明. 因为当初在香港商人之间被称为电脑,后引入国内,成为大众最熟悉的名字。参考资料: 第一台计算机(ENIAC)于1946年2月,在美国诞生。

把局部变量改成全局变量

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>面向对象的继承-2</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}</style><script>var oDiv=null;var disX=0;var disY=0;window.onload = function() { oDiv = document.getElementById('div1'); oDiv.onmousedown = fnDown;}function fnMove(ev) { var ev = ev || event; oDiv.style.left = ev.clientX - disX + 'px'; oDiv.style.top = ev.clientY - disY + 'px';}function fnUp() { document.onmousemove = document.onmouseup = null;}function fnDown(ev) { var ev = ev || event; disX = ev.clientX - this.offsetLeft; disY = ev.clientY - this.offsetTop; document.onmousemove = fnMove; document.onmouseup =fnUp;}</script></head><body> <div id="div1"></div></body></html>

引用块内容

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>面向对象的继承-2</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}#div2 {width: 100px; height: 100px; background: red; position: absolute;top:120px;}</style><script>window.onload=function(){ new Drag('div1'); new Drag('div2');}function Drag(id) { var _this=this; this.disX=0; this.disY=0; this.oDiv = document.getElementById(id); this.oDiv.onmousedown = function(){ _this.fnDown() };}Drag.prototype.fnDown=function (ev) { var ev = ev || event; var _this=this; this.disX = ev.clientX - this.oDiv.offsetLeft; this.disY = ev.clientY - this.oDiv.offsetTop; document.onmousemove = function(){ _this.fnMove(); }; document.onmouseup =function(){ _this.fnUp(); };}Drag.prototype.fnMove=function(ev) { var ev = ev || event; this.oDiv.style.left = ev.clientX - this.disX + 'px'; this.oDiv.style.top = ev.clientY - this.disY + 'px';}Drag.prototype.fnUp=function () { document.onmousemove = null; document.onmouseup = null}</script></head><body> <div id="div1"></div> <div id="div2"></div></body></html>

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>面向对象的继承-2</title><style>#div1 {width: 100px; height: 100px; background: red; position: absolute;}#div2 {width: 100px; height: 100px; background: red; position: absolute;top:120px;}</style><script>window.onload=function(){ new Drag('div1'); new Drag('div2');}function Drag(id) { var _this=this; this.disX=0; this.disY=0; this.oDiv = document.getElementById(id); this.oDiv.onmousedown = function(){ _this.fnDown() };}Drag.prototype.fnDown=function (ev) { var ev = ev || event; var _this=this; this.disX = ev.clientX - this.oDiv.offsetLeft; this.disY = ev.clientY - this.oDiv.offsetTop; document.onmousemove = function(){ _this.fnMove(); }; document.onmouseup =function(){ _this.fnUp(); };}Drag.prototype.fnMove=function(ev) { var ev = ev || event; this.oDiv.style.left = ev.clientX - this.disX + 'px'; this.oDiv.style.top = ev.clientY - this.disY + 'px';}Drag.prototype.fnUp=function () { document.onmousemove = null; document.onmouseup = null}</script></head><body> <div id="div1"></div> <div id="div2"></div></body></html>

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结

希望本文所述对大家JavaScript程序设计有所帮助。

1、掌握电子技术和计算机组成与体系结构的基本原理、分析方法和实验技能,能从事计算机硬件系统开发与设计。2、掌握程序设计语言、算法与数据结构、操作系统以及软件设计方法和工程的基本理论、基本知识与基本技能,具有较强的程序设计能力,能从事系统软件和大型应用软件的开发与研制。3、掌握并行处理、分布式系统、网络与通信、多媒体信息处理、计算机安全、图形图象处理以及计算机辅助设计等方面的基本理论、分析方法和工程实践技能,具有计算机应用和开发的能力。4、掌握计算机科学的基本理论,具有从事计算机科学研究的坚实基础。扩展资料:计算机专业的发展趋势:计算机技术面e69da5e887aae799bee5baa631333431363039临着一系列新的重大变革。诺伊曼体制的简单硬件与专门逻辑已不能适应软件日趋复杂、课题日益繁杂庞大的趋势,要求创造服从于软件需要和课题自然逻辑的新体制。并行、联想、专用功能化以及硬件、固件、软件相复合,是新体制的重要实现方法。计算机将由信息处理、数据处理过渡到知识处理,知识库将取代数据库。自然语言、模式、图像、手写体等进行人-机会话将是输入输出的主要形式,使人-机关系达到高级的程度。砷化镓器件将取代硅器件。参考资料来源:百度百科—计算机专业参考资料来源:百度百科—计算机相关专业内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • js基于面向对象实现的拖拽功能示例
  • js基于面向对象实现的拖拽库实例
  • jquery方法+js一般方法+js面向对象方法实现拖拽效果
  • sortable.js拖拽排序使用方法解析
  • js实现拖拽效果
  • javascript实现移动端上的触屏拖拽功能
  • 使用js实现的简单拖拽效果
  • js完美的div拖拽实例代码
  • javascript支持firefox,ie7页面布局拖拽效果代码
  • js面向对象编程实现的拖拽功能案例详解
  • javascript实现的鼠标跟随特效示例【2则实例】
  • js实现登录时记住密码的方法分析
  • 基于js中的存储键值对以及注意事项介绍
  • p5.js 毕达哥拉斯树的实现代码
  • 利用a标签自动解析url分析网址实例
  • 捕获关闭窗口的脚本
  • getelementsbytagname vs selectnodes效率 及兼容的selectnodes实
  • js简单实现动画弹出层效果
  • javascript 组合按键事件监听实现代码
  • 利用js进行图片的切换即特效展示图片
  • 计算机专业毕业的学生应该具备哪些专业素质
  • web 2.0到底是什么?
  • 谁帮我想个java的项目经验,写在求职简历上的 !
  • 开发Windows平台下的软件用哪种编程语言比较主流比较好,
  • 自学php要多久
  • 广电网络公司的劳务派遣和正式工的区别?急!急!
  • 电脑的发明者是谁??
  • 原生app和web app的区别
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript页面元素操作技巧总结javascript操作dom技巧总结javascript切换特效与技巧总结javascript动画特效与技巧汇总javascript错误与调试技巧总结javascript数据结构与算法技巧总结javascript数学运算用法总结js基于面向对象实现的拖拽功能示例js基于面向对象实现的拖拽库实例jquery方法+js一般方法+js面向对象方法实现拖拽效果sortable.js拖拽排序使用方法解析js实现拖拽效果javascript实现移动端上的触屏拖拽功能使用js实现的简单拖拽效果js完美的div拖拽实例代码javascript支持firefox,ie7页面布局拖拽效果代码js面向对象编程实现的拖拽功能案例详解javascript实现的鼠标跟随特效示例【2则实例】js实现登录时记住密码的方法分析基于js中的存储键值对以及注意事项介绍p5.js 毕达哥拉斯树的实现代码利用a标签自动解析url分析网址实例捕获关闭窗口的脚本getelementsbytagname vs selectnodes效率 及兼容的selectnodes实js简单实现动画弹出层效果javascript 组合按键事件监听实现代码利用js进行图片的切换即特效展示图片js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包js 冒泡事件阻止实现代码javascript读取xmlgoogle 爬虫如何抓取 javascript 的内容js面向对象编程基础篇(二) 封装操作实例js实现登录页密码的显示和隐藏功能javascript实现控制打开文件另存为对话框chrome调试javascript详解react 实现车牌键盘的示例代码javascript生成随机数的4种自定义函数分享js动态设置鼠标事件示例代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved