HTML与JS与Jquery

上传人：朱*** IP属地：江西上传时间：2022-01-20 格式：DOCX 页数：127 大小：14.82MB 积分：12 举报 版权申诉

已阅读5页，还剩122页未读，继续免费阅读

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、HTML浮云原理（飘浮，释放空间）盒模型Margin:外边距Border:边框Padding:内边距在定义盒子的宽度时，要考虑到内填充，边框，外边距浮动原理解析 float对象浮动后，它就脱离了当前的文档流，可以理解为漂起来了，它原来的地方就空出来了，它后的内容就会占用它原来的地方。清除浮动当元素有浮动属性时，会对其父元素或后面的元素产生影响，会出现一个布局错乱现象，可以通过清除浮动的方法来解决，浮动元素的影响。Clear:None:默认值，允许两边都可以有浮动Left:不允许左边有浮动对象Right:不允许右边有浮动对象Both:左右两侧不允许有浮动对象例：定位定位布局，就是可以通过元素p

2、osition属性控制元素的位置。当我们使用绝对定位时，必须要有两个条件1必须给父元素加定位属性，一般建议使用position:relative;2给子元素，加绝对定位position:absolute；同时要加方向属性。相对定位与绝对定位的区别绝对定位是根据父元素为基准点，进行定位，-会脱离文档离相对定位是根据其自身为基准点，进行定位。离开原位置，但还点着原来的位置position属性( absolute | relative | static | fixed )详解什么是文档流？将窗体自上而下分成一行行, 并在每行中按从左至右

3、的顺序排放元素,即为文档流。只有三种情况会使得元素脱离文档流，分别是：浮动、绝对定位和相对定位。静态定位(static) ： static，无特殊定位，它是html元素默认的定位方式，即我们不设定元素的position属性时默认的position值就是static，它遵循正常的文档流对象，对象占用文档空间，该定位方式下，top、right、bottom、left、z-index等属性是无效的。相对定位(relative) ： &

4、#160; relative定位，又称为相对定位，相对于自身在文档流的位置发生偏移。绝对定位(absoulte) ： absoulte定位，也称为绝对定位，虽然它的名字号曰“绝对”，但是它的功能却更接近于"相对"一词，为什么这么讲呢？原来，使用absoult定位的元素脱离文档流后，就只能根据祖先类元素(父类以上)进行定位，而这个祖先类还必须是以postion非static方式定位的z-index 跟具体数字如：divz-index:100注意：z-index的数值不跟单位。z-index的数字越高越靠前，并且值必须为整数和

5、正数（正数的整数）。二、z-index使用条件 - TOPZ-index在使用绝对定位 position:absolute属性条件下使用才能使用。通常我们让不同的对象盒子以不同顺序重叠排列，我们就是要z-index样式属性。三、z-index应用案例 - TOP为了方便观察z-index样式属性，我们设置3个DIV盒子，分别设置不同css背景颜色，设置相同CSS高度、CSS宽度。分别设置背景颜色为黑色、红色、蓝色。CSS width为100px，css height为50px3、z-index案例截图CSSCSS概述：css指层叠样式表C

6、SS样式表极大地提高了工作效率CSS基础语法：1 selectorproperty:value例：h1color:red; font-size:14px;属性大于1个之后，属性之间用分号隔开如果值大于1个单词，则需要加上引号：Pfont-family:”sans serif”;1选择器分组： H1,h2,h3,h4,h5,h6color:red;通配符：* color:red;2继承：(子标签可继承父标签的样式) Bodycolor:green;3派生类选择器li strongcolor:red;4 id选择器 1） Id选择器可以为标有id的HTML元素指定特定的样式Id选择器以“#”来定义

7、2）ID选择器和派生选择器目前比较常用的方式是ID选择器常常用于建立派生选择器。5类选择器：以一个点显示也可以与派生类一起使用。6属性选择器对带有指定属性的HTML元素设置样式CSS3选择器1在 CSS3 中，追加了三个属性选择器分别为：att*=val、att=val和att$=val，使得属性选择器有了通配符的概念。att*=val：表示包含属性包含val字符串的都加样式att=val：表示首字符包含val字符串的加样式。att$=val：表示结束字符包含val字符串的加样式。例css3-1.html2 结构性伪类选择器p:first-line color:red; /表示p元素的第一行加

8、样式p:first-lettercolor:blue; /表示p元素的第一字加样式li:beforecontent:"-" /表示li 元素前加样式li:aftercontent:"对列表做一个解释" /表示li元素后加样式 font-size:10px; color:gray; 例css3-2.htmlRoot、empty、notroot 选择器是绑定到页面的根元素中，如果想对某个结构元素使用样式，但是想排除这个结构元素下面的子结构元素，可以使用 not，使用 empty 选择器来指定当元素中内容为空白时使用的样式。<style>:root

9、background-color:gray; bodybackground-color:green; /*如果有root样式时，body的样式只对有内容的区域设置样式，如果去掉root,再看效果。*/ div *:not(h2)color:red;:emptybackground-color:blue;/*目标元素是div的话*/:targetbackground-color:black;</style>例css3-3.html1选择器：first-child、last-child、nth-child和nth-last-childfirst-child、last-child、nth

10、-child 和 nth-last-child，利用这几个选择器能够针对一个父元素中的第一个子元素、最后一个子元素、指定序号的子元素，甚至第偶数个或第奇数个子元素进行样式的指定。li:first-childbackground-color:yellowli:last-childbackground-color:blue; li:nth-child(3)background-color:red; li:nth-last-child(2)background-color:green;li:nth-child(odd)background-color:green; li:nth-last-child

11、(odd)background-color:green; li:nth-child(even)background-color:green;li:nth-last-child(even)background-color:green; 例 1.html;2选择器：nth-of-type 和 nth-last-of-typenth-of-type 和 nth-last-of-type，使用这两个选择器，可以避免一些问题的发生。使用这两个选择器时，CSS3在计算子元素是第奇数个子元素还是第偶数个子元素时，就只针对同类型的子元素进行计算了。h2:nth-child(odd)background-col

12、or:green;h2:nth-of-type(odd)background-color:green; h2:nth-of-type(even)background-color:gray; h2:nth-last-of-type(odd)background-color:green; h2:nth-last-of-type(even)background-color:gray;例2.html3nth-child(n) a*n+b; 其中a表示几种样式，b表示元素的位置。例3.html4 Only-child选择器Only-child选择器来代替nth-child和nth-last-child的

13、实现方法。例4.htmlUI元素状态伪类选择器11CSS3 选择器 hover、focus、active 和 checked在 CSS3 的选择器中，除了结构性伪类选择器外，还有一种UI元素状态伪类选择器，例如 hover、focus、active 和 checked 等<style>inputtype="text":hover /*鼠标经过的颜色*/background-color:red;inputtype="text":focus /*获取焦点的颜色*/background-color:gray;inputtype="text

14、":active /*鼠标按下的颜色*/background-color:green;</style>例1.html和2.html2enabled和disabled例3.htmlDisplaydisplay: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */ display: -moz-box; /* Firefox 17- */ 作者：一丝链接：来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。box例：<!doctype html><html><

15、head><style>.containerwidth:60%;height:600px;background:blue;margin:0 auto;.headerwidth:100%;height:100px;background:gray;.contentwidth:100%;height:400px;background:yellow;display:box;display:-moz-box;/*兼容火狐浏览器*/display:-webkit-box;/*兼容谷歌浏览器*/.layout_leftwidth:50%;height:100%;background:gre

16、en;.layout_rightwidth:50%;height:100%;background:red;.footerwidth:100%;height:100px;background:#f0f0f0;</style></head><body><div class="container"><div class="header"></div><div class="content"><div class="layout_left&qu

17、ot;>左右两个布局的父元素是content，对父元素使用display:box</div><div class="layout_right">左右两个布局的父元素是content，对父元素使用display:box</div></div><div class="footer"></div></div></body></html>以display:box为基础的样式,也就是说如果div设置了display:box，才能使用以下CSS样式box

18、-flex 使用box-flex的CSS，其父元素必须使用display:box;的样式兼容性检查display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */ display: -moz-flex; /* Firefox 18+ */ display: -ms-flexbox; /* IE 10 */ display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/1

19、7/18, Android 4.4+ */属性规定框的子元素是否可伸缩其尺寸。它的值必须大于或等于1，盒子才具有弹性。提示：可伸缩元素能够随着框的缩小或扩大而缩写或放大。只要框中有多余的空间，可伸缩元素就会扩展来填充这些空间。例：-moz-box-flex:1; -webkit-box-flex:1;默认值：0.0（指示该元素不可伸缩）多个子元素的弹性空间当盒元素内部多个子元素都定义box-flex属性时，子元素的空间弹性是相对的。浏览器将会把各个子元素的box-flex属性值相加得到一个总值，然后根据各自的值点总值的比例来分配盒元素的剩余空间。定义列显示的顺序box-direction&#

20、160; box 方向 box-flex-group 属性规定框中子元素的显示次序。值更低的元素会显示在值更高的元素前面显示。注释：分组值相同的元素，它们的显示次序取决于其源次序。box-lines box-ordinal-group

21、60; 以组为单位的子元素排列方向box-orient 改变盒子的布局方向Vertical:表示垂直方向排列；Horizontal：表示水平方向排列；使用盒布局时，元素的大小(包括宽和高)具有自适应性，即元素的宽度与高度可以根据排列方向改变而改变。对齐box-align

22、 box-pack元素的对齐方式box-pack和box-aign属性Box-pack和box-align不仅可以使子盒子居中，还可以使子盒子中的元素也居中。需要注意的是要使这个盒子的属性设为display:box例如：box-pack,box-align对齐.html文件例：（对齐在左下角）<!doctype html><html><head><style>*margin:0px;padding:0px;border:0px;.containerwidth:800px;height:600px;margin:0

23、 auto;display:box;display:-moz-box;display:-webkit-box;border:1px solid yellow;/水平方向上：对齐开头;以display:box为基础box-pack:start;-moz-box-pack:start;-webkit-box-pack:start;/垂直方向上：对齐结尾以display:box为基础box-align:end;-moz-box-align:end;-webkit-box-align:end;.container imgwidth:196px;height:146px;.container divw

24、idth:196px;height:146px;border:1px solid #DFDFDF;padding:5px;margin:2px;</style></head><body><div class="container"><div class="box1"><img src="image/11.jpg"/></div><div class="box2"><img src="image/33.jp

25、g"/></div><div class="box3"><img src="image/44.jpg"/></div></div></body></html>增强的盒模型1盒子阴影-box-shadow属性box-shadow 属性向框添加一个或多个阴影。语法box-shadow: h-shadow v-shadow blur spread color inset;注释：box-shadow 向框添加一个或多个阴影。该属性是由逗号分隔的阴影列表，每个阴影由

26、 2-4 个长度值、可选的颜色值以及可选的 inset 关键词来规定。省略长度的值是 0。值描述测试h-shadow必需。水平阴影的位置。允许负值。测试v-shadow必需。垂直阴影的位置。允许负值。测试blur可选。模糊距离。测试spread可选。阴影的尺寸。测试color可选。阴影的颜色。请参阅 CSS 颜色值。测试inset可选。将外部阴影 (outset) 改为内部阴影。测试例1.html2）盒子的描边效果实现描边的方法是把水平偏移值和垂直偏移值设置为0，仅设置模糊半径、阴影大小和阴影颜色。如果不设置模糊半径，则描边效果就等同于边框效果了。例2.html3）盒子的内阴影例3.html2

27、盒子尺寸的计算方法-box-sizing属性box-sizing 属性允许您以特定的方式定义匹配某个区域的特定元素。例如，假如您需要并排放置两个带边框的框，可通过将 box-sizing 设置为 "border-box"。这可令浏览器呈现出带有指定宽度和高度的框，并把边框和内边距放入框中。默认值：content-box继承性：no版本：CSS3JavaScript 语法：object.style.boxSizing="border-box"box-sizing语法box-sizing: content-box|border-box|inherit;值描述

28、content-box这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。border-box为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。inherit规定应从父元素继承 box-sizing 属性的值。例4.html3盒子溢出内容处理-overflow-x和overflow-y属性Css3新增的overflow-x和overflow-y属性，是对overflow属性的补充，分别表示水平方向上

30、整个内容。测试一多列布局（用于多文字排版）浏览器支持只有 Opera 支持 column-count 属性。Firefox 支持替代的 -moz-column-count 属性。Safari 和 Chrome 支持替代的 -webkit-column-count 属性。1设计多列布局Columns:<column-width>|<column-count>说明：在网页中显示大量正文文字时，建议分列显示，以方便浏览器阅读。2定义列宽column-width 属性规定列的宽度3定义列数column-count 属性规定元素应该被划分的列数。4规定列之间的间隔column-g

31、ap5 规定列之间的宽度、样式和颜色规则：语法column-rule: column-rule-width column-rule-style column-rule-color;6 column-span：规定元素横跨的列语法column-span: 1|all;值描述测试1元素应横跨一列。测试all元素应横跨所有列。测试二：设计盒布局盒布局与多列布局的区别在于使用多列布局时，各列宽度必须相等的，在指定每列宽度时，也只能为所有列指定一个统一的宽度。列与列之间的宽度不可能是不一样的。另外，使用多列布局时，也不可能具体指定什么列中显示什么内容，因此比较适用于显示文章内容时，不适合于安排整个网页

32、中由各元素组成的网页结构。表单验证Form取消所有验证novalidate="trueInputrequired="required"必填的inputAutofocus第一次进入页面时，自动获取焦点<input type="text" autofocus="autofocus" >Pattern Country code: <input type="text" name="country_code" pattern="A-z3" title=&qu

33、ot;Three letter country code" />多媒体技术Video<video src="1.mp4"><video>（兼容性）针对多种浏览器对不同视频格式的支持<video width="450" height="450" controls="controls" ><!-自动检测-> <source src="1.mp4" type="video/mp4"> <source

34、src="1.webm" type="video/webm"> <source src="1.ogg" type="video/ogg"> Your browser does not support the video tag.</video>Poster(在视频开始播放前，放置启始图片)<body> <video width="450" height="450" controls="controls" po

35、ster="PLMM.jpg"> <!-自动检测-> <source src="1.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="movie.ogg" type="video/ogg"> Your browser does not support the video tag. </vi

36、deo> <video src="1.mp4"><video></body>Play属性、paused属性、ended属性playbackRate（播放速率）addEventListener（对视频的播放进行时实监听）调用方式 audio|video.addEventListener("canplay", function() /SomeJavaScriptCode ,false);事件类型loadstart当浏览器开始寻找指定的音频/视频时，会发生 loadstart 事件。即当加载过程开始时。duration

37、change当指定音频/视频的时长数据发生变化时，发生 durationchange 事件。当音频/视频加载后，时长将由 "NaN" 变为音频/视频的实际时长。·loadedmetadata当指定的音频/视频的元数据已加载时，会发生 loadedmetadata 事件。音频/视频的元数据包括：时长、尺寸（仅视频）以及文本轨道。·loadeddata当当前帧的数据已加载，但没有足够的数据来播放指定音频/视频的下一帧时，会发生 loadeddata 事件。progress当浏览器正在下载指定的音频/视频时，会发生 progress 事件。canplay当浏览

38、器能够开始播放指定的音频/视频时，发生 canplay 事件。canplaythrough当浏览器预计能够在不停下来进行缓冲的情况下持续播放指定的音频/视频时，会发生 canplaythrough 事件。networkState 属性返回音频/视频的当前网络状态（activity）。· 0 = NETWORK_EMPTY - 音频/视频尚未初始化· 1 = NETWORK_IDLE - 音频/视频是活动的且已选取资源，但并未使用网络· 2 = NETWORK_LOADING - 浏览器正在下载数据· 3 = NETWORK_NO_SOURCE - 未找到

39、音频/视频来源实例/ 属性返回音频/视频的当前网络状态（activity）。function checkNetworkSate()var myVideo=document.getElementById("myVideo");var medioMsg=document.getElementById("medioMsg");var error=myVworkState;switch(error)case 0:medioMsg.innerHTML="音频/视频尚未初始化"break;case 1:medioMsg.innerHTML=&qu

40、ot;音频/视频是活动的且已选取资源，但并未使用网络"break;case 2:medioMsg.innerHTML="浏览器正在下载数据"break;case 3:medioMsg.innerHTML="未找到音频/视频来源"break; 。error 属性返回一个 MediaError 对象。MediaError 对象的 code 属性包含了音频/视频的错误状态MediaError 对象的 code 属性返回一个数字值，它表示音频/视频的错误状态：· 1 = MEDIA_ERR_ABORTED - 取回过程被用户中止·

41、2 = MEDIA_ERR_NETWORK - 当下载时发生错误· 3 = MEDIA_ERR_DECODE - 当解码时发生错误· 4 = MEDIA_ERR_SRC_NOT_SUPPORTED - 不支持音频/视频实例function checkError()var myVideo=document.getElementById("myVideo");var error=myVideo.error.code;switch(error)case 1:alert("取回过程被用户中止");break;case 2:alert(&quo

42、t;当下载时发生错误");break;case 3:alert("当解码时发生错误");break;case 4:alert("不支持音频/视频");break;JAVASCRIPTWindow.onloadCanvas画布示例（绘制时钟）<!DOCTYPE HTML><html><head><script>var mycanvas,ctx;window.onload=function() mycanvas=document.getElementById("mycanvas")

43、; ctx=mycanvas.getContext("2d"); drawClock();setInterval("drawClock()",1000);function drawClock()ctx.clearRect(0,0,mycanvas.width,mycanvas.height);/获取时间var date=new Date();var sec=date.getSeconds();var min=date.getMinutes();var hour=date.getHours();hour=hour>=12?hour-12:hour;c

44、tx.beginPath();ctx.lineWidth=5;ctx.arc(500,300,150,0,2*Math.PI,false);ctx.strokeStyle="blue"/描廓ctx.stroke();/在位移之前，保存canvas，所以后面restore需要重新translate();ctx.save();/设置中心点ctx.translate(500,300);/重新开始路径，绘制中心点ctx.beginPath();ctx.arc(0,0,3,0,2*Math.PI,false);ctx.fill();/刻度for(i=0;i<60;i+)if(i

45、%5=0)ctx.fillRect(120,0,30,5);elsectx.strokeStyle="black"ctx.fillRect(140,0,10,2);ctx.rotate(6*Math.PI/180);ctx.restore();ctx.save();/画秒针ctx.beginPath();ctx.fillStyle="red"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx.rotate(Math.PI/30*sec);ctx.fillRect(-10,-1,140,2);ctx.rest

46、ore();ctx.save();/画分针ctx.beginPath();ctx.fillStyle="black"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx.rotate(min+sec/60)*Math.PI/30);ctx.fillRect(-10,-1,120,5);ctx.restore();ctx.save();/时针ctx.beginPath();ctx.fillStyle="black"ctx.translate(500,300);ctx.rotate(-Math.PI/2);ctx

47、.rotate(hour+min/60)*Math.PI/6);ctx.fillRect(-10,-1,80,7);ctx.restore();ctx.save();</script></head><body><canvas id="mycanvas" width="800" height="800" style="border:1px solid #000000;" ></canvas></body></html>拖拽preven

48、tDefault()定义和用法:阻止特定事件的默认行为；默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。cloneNode() 定义和用法cloneNode() 方法创建节点的拷贝，并返回该副本。cloneNode() 方法克隆所有属性以及它们的值。如果您需要克隆所有后代，请把 deep 参数设置 true，否则设置为 false。appendChild()定义和用法appendChild() 在指定元素节点的最后一个子节点之后添加节点。提示：如果您需要创建包含文本的新段落，请记得添加到段落的文本的文本节点，然后向文档添加该段落。您也可以使用

49、appendChild() 方法从一个元素向另一个元素中移动元素。拖放的相关事件在拖放的过程中会触发以下事件：· 在拖动目标上触发事件 (源元素): o ondragstart - 用户开始拖动元素时触发o ondrag - 元素正在拖动时触发o ondragend - 用户完成元素拖动后触发· 释放目标时触发的事件: o ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件o ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件o ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件o ondrop -

50、在一个拖动过程中，释放鼠标键时触发此事件对于被拖动的元素来说，它将依次触发ondragstart和ondrag事件，并在拖放结束时触发ondragend事件。而对于拖放的目的地元素来说，它将依次触发ondragenter,ondragover,ondrop事件，与mouseover一类的类似。dataTransfer对象在HTML5中，dataTransfer对象专门用于处理拖拽过程中产生的数据信息，该对象的属性及说明如下表所示属性名称说明effectAllowed用于设置或返回指定元素被拖拽时被允许的显示效果，可以设定的值包括“none”、“copy”、“copyLink”、“

51、copyMove”，“link”，“linkMove”，“move”，“all”、“uninitialized”dropEffect用于设置或返回指定被拖拽元素释放拖拽的显示效果，该属性设置的值必须在effectAllowed设置范围内，否则无效。items用于返回DataTransferItemList对象types用于返回已保存的数据类型，如果是文件操作则返回文件型字符串files用于返回被拖拽的文件列表dataTransfer对象常用方法包括（1）setData(format, data)，该方法将指定类型的数据信息存入dataTransfer对象，参数format表示保存的数据类型，取

52、值为”text”或“URL”；参数data表示数据内容。应用实例如下src.ondragstart = function (e) /开始拖拽元素时触发e.dataTransfer.setData("Text", e.target.id); /使用dataTransfer保存拖拽元素IDmsg.innerHTML="开始拖拽："+draggedID;（2）getData(format)，该方法用于从dataTransfer对象中读取指定类型的数据信息，参数format表示读取的数据类型。应用实例如下target.ondrop = function (e)

53、/在目的元素内释放拖拽元素时触发 var droppedID = e.dataTransfer.getData("Text"); /从dataTransfer中获取拖拽元素ID var newElem = document.getElementById(draggedID).cloneNode(false); target.innerHTML = "" target.appendChild(newElem); e.preventDefault();dataTransfer（示例：setData()和getData()）<!DOCTYPE HTML&

54、gt;<html><head><!-dataTransfer.getData()-><script>function onDrop(event)event.preventDefault();/getData(format)，该方法用于从dataTransfer对象中读取指定类型的数据信息，参数format表示读取的数据类型。var data=event.dataTransfer.getData("img");/var mydrag=document.getElementById("mydrag");even

55、t.target.appendChild(document.getElementById(data);function onDefault(event)event.preventDefault();function drag(event)/类似于键和值的关系/setData(format, data)，该方法将指定类型的数据信息存入dataTransfer对象，参数format表示保存的数据类型，取值为”text”或“URL”；参数data表示数据内容。应用实event.dataTransfer.setData("img",event.target.id);</scr

56、ipt></head><body><div id="mydrag2"style="border:1px solid #000000;width:1000px;height:300px" ondragenter="onDefault(event)" ondragover="onDefault(event)"ondrop="onDrop(event)" ><img id="b_img" src="b.jpg" d

57、raggable="true" ondragstart="drag(event)"/><img id="c_img" src="c.jpg" draggable="true" ondragstart="drag(event)"/><img id="d_img" src="d.jpg"draggable="true" ondragstart="drag(event)" /&g

58、t;<img id="e_img" src="e.jpg" draggable="true" ondragstart="drag(event)"/></div><div id="mydrag" style="border:1px solid #000000;width:1000px;height:300px" ondragenter="onDefault(event)" ondragover="onDefault(event)"ondrop="onDrop(event)" ></div></body></html>（3）setDragImage(image, x, y)这个函数用于设置鼠标移动过程中随鼠标一起移动的效果图，而不是鼠标指针的显示效果。x、y参数用于指定图像相对于鼠标指针的位置；image参数用于指定图像元素，若是一个img元素，则显示图像元素，否则将给定的元素转换成一张图像并显示。该函数只能在读写模式(也就是dragstart事件)下有用，在其它事件中调用无效。若不调用此函数，则在拖拽时，被拖拽元素被转换成一个图处并当

人人文库> 全部分类> 教育资料 > 课设设计

温馨提示

1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

HTML与JS与Jquery

文档简介

温馨提示

最新文档

评论

HTML与JS与Jquery

文档简介

温馨提示

最新文档

评论

相关文档