2013年3月15日
JS多个DIV变宽
摘要： 思路：有多个物体运动时，当切换到另外一个时就要把当前物体运动的定时器关闭运动框架：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 阅读全文
posted @ 2013-03-15 16:45 yexingwen 阅读(1418) 评论(0) 推荐(0) 编辑
匀速运动停止
摘要： 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 阅读全文
posted @ 2013-03-15 11:25 yexingwen 阅读(285) 评论(0) 推荐(0) 编辑
JS缓冲运动
摘要： 缓冲运动：就是由快到慢的一个过程，距离越大，速度越大；距离越小，速度越小。也就是速度和距离成正比。缓冲运动代码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 <... 阅读全文
posted @ 2013-03-15 11:05 yexingwen 阅读(276) 评论(0) 推荐(0) 编辑
2013年3月8日
JS分享到功能实现
摘要： 分享到就是鼠标移入慢慢弹出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 阅读全文
posted @ 2013-03-08 11:50 yexingwen 阅读(435) 评论(0) 推荐(0) 编辑
2013年3月7日
JS表格排序
摘要： 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 阅读全文
posted @ 2013-03-07 22:42 yexingwen 阅读(2858) 评论(0) 推荐(0) 编辑
JS搜素表格
摘要： 用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 阅读全文
posted @ 2013-03-07 17:46 yexingwen 阅读(334) 评论(0) 推荐(0) 编辑
JS获取table
摘要： 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 阅读全文
posted @ 2013-03-07 15:32 yexingwen 阅读(3711) 评论(0) 推荐(0) 编辑
2013年3月5日
createElement创建元素
摘要： 创建元素是用createElement,先把创建的元素赋值给一个变量，再把这个变量插入到文档元素中。末尾插入元素是用：appendChild appendChild的形式是：父级.appendChild(子节点)，把子节点插入到父级下的末尾。insertBefore:在父级之前插入子节点，形式：父级.insertBefore(子节点,在谁之前)removeChild:从父级删除一个子节点，形式父级.appendChild(removeChild)正常顺序插入Li 和倒序插入LI代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 阅读全文
posted @ 2013-03-05 17:42 yexingwen 阅读(1137) 评论(0) 推荐(0) 编辑
childNodes子节点 、 nodeType节点类型 、parentNode父节点 、firstChild第一个节点 、lastChild最后一个节点 、
摘要： 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 < 阅读全文
posted @ 2013-03-05 11:33 yexingwen 阅读(6353) 评论(0) 推荐(2) 编辑
2013年3月4日
JS无缝滚动
摘要： 思路：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，负数就是向左滚，正数就是向右滚 阅读全文
posted @ 2013-03-04 17:35 yexingwen 阅读(622) 评论(0) 推荐(0) 编辑