03 2013 档案
摘要：attachEvent(事件名，函数) //IEaddEventListener(事件名，函数 false) //FireFox Chrome兼容写法： 1 <script> 2 window.onload=function() 3 { 4 var aBtn=document.getElementById('btn'); 5 if(aBtn.attachEvent) //IE 6 { 7 aBtn.attachEvent('onclick', function(){ 8 alert('a'); 9 });10 ...
阅读全文
摘要：JS代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oDiv=document.getElementById('div'); 5 var disX=0; 6 var disY=0; 7 8 oDiv.onmousedown=function(ev) //鼠标按下DIV 9 {10 var oEvent=ev||event;11 disX=oEvent.clientX-oDiv.offsetLeft; //鼠标的X坐标减去DIV的左边距...
阅读全文
摘要：JS代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oTxt=document.getElementById('txt'); 5 oTxt.onkeydown=function(ev) 6 { 7 var oEvent=ev||event; 8 //alert(oEvent.keyCode); 9 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) //oEvent.k...
阅读全文
摘要：JS代码：View Code 1 <script> 2 function getPosition(ev) //获取页面到鼠标点的X Y坐标 3 { 4 var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; 5 var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft; 6 return{x: scrollLeft+ev.clientX,y: scrollTop+ev.clien...
阅读全文
摘要：Crtl+Enter提交留言代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oTxt1=document.getElementById('txt1'); 5 var oTxt2=document.getElementById('txt2'); 6 7 oTxt1.onkeydown=function(ev) 8 { 9 var oEvent=ev||event;10 if(oEvent.keyCode==13 && oEvent.ctrlKey)11 ...
阅读全文
摘要：键盘事件：document.onkeydown=function(ev){ var oEvent=ev||event; alert(oEvent.keyCode);};回车键的keyCode=13Shift的keyCode=16Ctrl的keyCode=17Alt的keyCode=18方向键左的keyCode=37方向键右的keyCode=39方向键上的keyCode=38方向键下的keyCode=40空格键的keyCode=32如果要用Crtl Alt Shift和其它按键组合使用的话可以使用 crtlKey altKey shiftKey事件
阅读全文
摘要：要加整个页面加事件要使用document，例如要捕抓鼠标位置document.onclink=function(ev) //FireFox Chrome默认都是有一个值传进来的{ var oEvent=ev||event; //兼容IE和FireFox Chrome 只要一个为真就可以执行 alert(oEvent.clientX); };/*取消事件冒泡*/oDiv.onclick=function(ev){ oEvent=ev||event; oEvent.cancelBubble=true;}
阅读全文
摘要：效果:发布时高度慢慢增大，透明度也同时变为100思路：1、创建li2、li的值是从文本框获取的 li.innerHtml=txt.value;3、清空文本框 txt.value='';4、if判断如果没有内容的时候就appendChild插入，如果有内容就倒序插入。5、用offsetHeight获取li高度，先把li高度设置为0，再通过运动框架设置li高度和透明度JS代码：View Code 1 <script> 2 window.onload=function() 3 { 4 var oUl=document.getElementById('ul'
阅读全文
摘要：淘宝幻灯片效果：能自动播放，鼠标指向或者点击数字按钮就能切换图片。实现思路：1、for循环给数字按钮加上点击事件。2.for循环先把按钮的样式清空，再把当前样式设置样式。3、给每个按钮添加自定义属性index aBtn[i].index=i aBtn[2]=2 第二个按钮和第二张图片想对应，用运动框架把大图的UL每次移动-150px，因为图片高度是150px。如果移动到第n张图片就是-150*n。4、定义变量now，用来自动播放用的。把当前图片赋值给now now=this.index。5、定义自动播放函数。now++ 下一张，if判断，到最后一张图片的时候就把now设置为0，就是第一张。 i
阅读全文
摘要：运动框架思路：1、取物体对象的样式当前值。if判断，如果是opacity要怎样，不是的要怎样2、算运动速度。3、判断是否停止。4、设置
阅读全文
摘要：完美运动框架：可以同时运动，以往的运动框架都是一个运动完另一个再运动，完美运动框架是支持多个运动同时进行，把之前的对象属性值attr和目标值iTarget用json替换。点击打开代码 1 <script> 2 function startMove(obj,json,fnEnd) 3 { 4 clearInterval(obj.timer); //清除当前对象的定时器 5 obj.timer=setInterval(function() //定义当前对象的定时器 6 { 7 var bStop=true; //假设：所有值都已经到了 ...
阅读全文
摘要：链式运动框架在任意运动框架的基础上加了一个形参，一共四个形参 对象,属性,运动目标值,函数 obj,attr,iTarget,fnEnd链式运动框架代码：View Code 1 <script> 2 function startMove(obj,attr,iTarget,fnEnd) 3 { 4 clearInterval(obj.timer); //清除当前对象的定时器 5 obj.timer=setInterval(function(){ //定义当前对象的定时器 6 var cur=0; 7 8 if(att...
阅读全文
摘要：效果：1、上面大图鼠标移到左边就过渡显示左边的按钮，鼠标移到右边就过渡显示右边的按钮。2、点击下方缩略图时大图就切换为相应的并有一个拉窗帘的效果。3、缩略图有透明度，鼠标移入缩略图就不透明。4、按大图按钮切换图片，缩略图会相应切换。5、自动播放，当图片播放到最后一张时自动返回从第一张开始。实现思路：一、大图左右按钮：1、在大图上弄2个遮罩层，opacity透明度设置为0，当鼠标移出左边或者右边的运动框架时，通过运动框架使按钮opacity从0变为100，鼠标移出时就把opacity从100变为02、按钮opacity透明度设置为0，鼠标移出按钮时通过运动框架使按钮opacity从0变为100，
阅读全文
摘要：function getByClass(oParent, sClass) //两个形参，第一个对象oParent 第二个样式名class{ var aEle=oParent.getElementsByTagName('*'); //从对象里选择所有元素 var aResult=[]; //空数组 for(var i=0;i<aEle.length;i++) //历遍所有oParent元素里面的所有元素 { if(aEle[i].className==sClass) //当有oParent元素里面的元素类名和传进来的类名是一样的 { aResult.push(aEle[i]
阅读全文
摘要：任意值运动框架思路：1、任意值运动框架带有3个形参，第一个是obj对象，第二个是attr属性，第三个是iTarget对象运动的目标值。2、清除当前对象的定时器 clearInterval(obj.timer)3、设置定时器 obj.setInterval(function(){},30)3.1、定义一个空的cur用来设置当前属性。3.2、因为有时候是opacity透明度运动，所以就要用if else加一个判断1 if(attr=='opacity'){2 cur=Math.round(parseFloat(getStyle(obj,attr))*100); //opacity要
阅读全文
摘要：offset类来获取物体的值很方便，但是offset存在一个bug，就是当给offset设置border的时候，offset获取值就不起作用。offset类的替代方法：parseInt(getStyle(obj,name));如 oDiv.offsetWidth=parseInt(getStyle(oDiv,'width'));getStyle是获取物体样式的函数，必须有个函数才能获取到样式，具体如下： 1 <script> 2 fuction getStyle(obj,name) //obj对象 name属性名 3 { 4 if(obj.currentSty...
阅读全文
摘要：思路：有多个物体运动时，当切换到另外一个时就要把当前物体运动的定时器关闭运动框架：1、先关闭当前DIV的定时器 clearInterval(obj.timer)2、开启当前DIV的定时器obj.timer=setInterval()2.1、定义物体运动的速度。速度等于目标(形参)减去当前DIV的宽度 obj.offsetWidth2.2、用三目运算符把速度向上取整Math.ceil()和向下取整Math.floor()2.3、用if判断，当当前DIV宽度等于目标值(iTarget)就清除当前DIV的定时器clearInterval(obj.timer)，否则else就设置DIV的宽度等于当前D
阅读全文
摘要：1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;} 8 #div2 {width:1px; height:300px; position:absolute; left:30
阅读全文
摘要：缓冲运动：就是由快到慢的一个过程，距离越大，速度越大；距离越小，速度越小。也就是速度和距离成正比。缓冲运动代码1： 1 <script> 2 function startMove() 3 { 4 var oDiv=document.getElementById('div'); 5 6 setInterval(function(){ 7 var speed=(300-oDiv.offsetLeft)/10; 8 oDiv.style.left=oDiv.offsetLeft+speed+'px'; 9 },30)10 };11 <...
阅读全文
摘要：分享到就是鼠标移入慢慢弹出DIV，鼠标移出慢慢缩回DIV。运动框架的大体思路：1、在开始运动之前关闭已有的定时器，这样是防止多个点击事件触发多个定时器产生的运动。2、把运动和停止分隔开if else分享到代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/199
阅读全文
摘要：appendChild：1、先把元素从原有的父级上删掉。2、添加到新的父级。排序的原理：从一堆数里找出一个最小的数用appendChild插入到最后，再在剩下的数里找最小的数用appendChild插入到最后，如此重复就能找把所有的数实现排序。表格排序思路：1、获取元素。2、创建一个空数组 var arr=[];3、用for循环把表格的每行数赋值给数组 arr[i]=oTable.tBodies[0].rows[i];4、用sort()把数组里面的元素进行排序。5、用for循环把数组里排好序的数用appendChild插入到tBodies。完整代码： 1 <!DOCTYPE html P
阅读全文
摘要：用JS实现在表格内搜素名字。基本版：完全匹配思路：在表格里搜素每一行，把用户输入的值和所有名字做出对比，完全匹配后高亮显示。1、获取元素。2、for循环历遍表格，把用户输入的值和所有名字对比，如果相等就高亮显示该行。oTable.tBodies[0].rows[i].cells[0].innerHTML==oTxt.valueJS代码： 1 <script> 2 window.onload=function() 3 { 4 var oTxt=document.getElementById('txt'); 5 var oSearch=document.getEleme
阅读全文
摘要：JS获取表格的简便方法：获取tbody:tBodies 获取thead:tHead 获取tfoot:tFoot 获取行tr:rows 获取列td:cells使用实例： oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]隔行变色代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans
阅读全文
摘要：创建元素是用createElement,先把创建的元素赋值给一个变量，再把这个变量插入到文档元素中。末尾插入元素是用：appendChild appendChild的形式是：父级.appendChild(子节点)，把子节点插入到父级下的末尾。insertBefore:在父级之前插入子节点，形式：父级.insertBefore(子节点,在谁之前)removeChild:从父级删除一个子节点，形式父级.appendChild(removeChild)正常顺序插入Li 和倒序插入LI代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
阅读全文
摘要：childNodes子节点只算第一层，就算一个节点里面再包含一个节点也只视为一个节点。childNodes会算上文本节点不管文本还是元素都有nodeType属性。nodeType==3 是文本节点nodeType==1 是元素节点如果想获取UL（父节点）下的LI（子节点）是怎样获取呢？用childNode来获取，由于childNodes在高版本的浏览器不兼容所以要用nodeType来解决。1 <ul id="ul">2 <li></li>3 <li></li>4 <li></li>5 <
阅读全文
摘要：思路：1、获取元素。2、要使图片动起来就是用setInterval来改变，如往左边滚动就改变offsetLeft，把图片的左边距改为负数。3、当图片往左滚的时候，右边就会出现空白，这时候需要用innerHTML复制原来的4个li 形成8个li4、就算有8个li，但总会有滚到尽头的时候，这时就做一个判断当offsetLeft大于ul宽度的一半时，把ul拉回来0的位置（往左滚）。5、当offsetLeft大于0时，就把Left设置为负ul 宽度的一半。（往右滚）6、鼠标指向图片，图片停止。7、鼠标离开图片，图片继续滚动。8、往左滚 往右滚就是控制offsetLeft，负数就是向左滚，正数就是向右滚
阅读全文
摘要：提示框功能：当鼠标指向头像时，弹出一个信息框，鼠标可移动到信息框，当鼠标离开头像时信息框消失，当鼠标离开信息框时信息框消失。实现功能思路：1、获取元素。2、当鼠标指向Div1时，Div2显示。3、当鼠标离开Div1时，使Div2延迟0.5秒消失，这样以便有时间把鼠标移到Div2。4、当鼠标指向Div2时，Div2显示。因为第3步设置setTimeout使Div2消失，所以把用clearTimeout()把setTimeout清除了就可以实现Div2显示了。5、当鼠标离开Div2时，使Div2延迟0.5秒消失，这样以便有时间把鼠标指向Div1。6、第2步已经设置了鼠标指向Div1，Div2就显示
阅读全文
浙公网安备 33010602011771号