JavaScript - 随笔分类(第2页) - niuben

[f]获取URL中的参数[转]

摘要：今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数。后来想了一下，肯定会有更加简单的方法的！所以在网上找到了两个很又简单实用的方法，mark下方法一：正则分析法1 function getQueryString(name){2 var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");3 var r = window.location.search.su 阅读全文

posted @ 2013-01-29 10:35 niuben 阅读(400) 评论(0) 推荐(0)

[f]获取元素在页面的位置getPos

摘要：要点：offsetParent，距离自己最近的定位的父元素用while 一层一层的向外获得父元素的坐标，并相加 1 function getPos(obj) 2 { 3 //obj为获得坐标的对象 4 var pos={x:0,y:0}; 5 while(obj.offsetParent) 6 { 7 pos.x+=obj.offsetLeft; 8 pos.y+=obj.offsetTop; 9 10 obj=obj.offsetParent;11 }12 13 retur... 阅读全文

posted @ 2012-12-10 15:39 niuben 阅读(190) 评论(0) 推荐(0)

拖拽的基本原理

摘要：要点：计算物体与鼠标的距离onmousedown 后在有onmousemove动作，是按着移动给document这么文档加onmousemove，这样能保证移动过快，物体还保持相对鼠标的位置onmouseup后，解除document上事件解除onmousedown的默认行为，return false 1 window.onload = function(){ 2 var oDiv = document.getElementById('div1'); 3 4 var disX = 0; //鼠标和物体之间的距离 5 var disY = 0; 6 7 ... 阅读全文

posted @ 2012-11-23 15:20 niuben 阅读(248) 评论(0) 推荐(0)

[f]class获取元素函数

摘要：要点：先选出所有元素筛选，根据sClass返回一个数组 1 function getByClass(oParent, sClass) 2 { 3 var aEle=oParent.getElementsByTagName('*'); 4 var aResult=[]; //class是可以重复的，所以结果是一组元素 5 var i=0; 6 7 for(i=0;i<aEle.length;i++) 8 { 9 if(aEle[i].className==sClass)10 {11 a... 阅读全文

posted @ 2012-11-23 10:44 niuben 阅读(214) 评论(0) 推荐(0)

[t]仿FLASH的图片轮换效果

摘要：需要运用运动框架move.js，核心思路和选项卡相似，下面就是具体实现方法：html 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/1999/xhtml"> 3 <head> 4 <meta http-equiv="Co 阅读全文

posted @ 2012-11-20 10:02 niuben 阅读(279) 评论(0) 推荐(0)

[t]新浪微博自动加载信息

摘要：自动加载消息数据，这个是个简化版本，基本的功能都已经实现了<!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> <style type="text/css"> * {padding: 阅读全文

posted @ 2012-11-19 14:36 niuben 阅读(182) 评论(0) 推荐(0)

图片加载问题

摘要：src放在上面的话，可能会因为加载太快，导致onload执行不了所以，onload在上面，src在下面<!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><style>#txt1 {width:300px 阅读全文

posted @ 2012-11-19 10:04 niuben 阅读(172) 评论(0) 推荐(0)

[t]照片墙

摘要：要点：布局转化、大小变化、位置也要变化View Code 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/1999/xhtml"> 3 <head> 4 <style> 5 * {margin:0; padding:0;} 6 阅读全文

posted @ 2012-11-16 16:52 niuben 阅读(334) 评论(0) 推荐(0)

布局转换的方法

摘要：把正常布局转换成绝对定位的布局。不能偷懒：必须是两个循环父级记得要加relative如果有margin，记得去掉 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/1999/xhtml"> 3 <head> 4 <style> 阅读全文

posted @ 2012-11-16 11:13 niuben 阅读(205) 评论(0) 推荐(0)

[t]手风琴效果

摘要：要点：计算非当前元素的宽度，然后用总宽度减去，即时得到当前的宽度设置计时器的领结点html<!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="Content-Typ 阅读全文

posted @ 2012-11-15 16:09 niuben 阅读(156) 评论(0) 推荐(0)

[t]淘宝幻灯片上下滑动效果

摘要：要点：定时器的使用用一个公用的值iNow来确定位置<!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="Content-Type" content=&quo 阅读全文

posted @ 2012-11-14 14:25 niuben 阅读(204) 评论(0) 推荐(0)

[f]获得鼠标坐标

摘要：相对文档获得鼠标坐标；function getMouse(ev){ var ev = ev || event; var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft; var scrollTop = document.documentElement.scrollTop||document.body.scrollTop; return {x:scrollLeft+ev.cli... 阅读全文

posted @ 2012-11-12 16:16 niuben 阅读(155) 评论(0) 推荐(0)

评分系统

摘要：一个评分的代码，很简单！<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo 阅读全文

posted @ 2012-11-12 09:48 niuben 阅读(242) 评论(0) 推荐(0)

自动滚动+方向控制解析

摘要：想让dom对象动起来，就要用到setInterval 这个时间函数方向控制我们就需要设定一个开关top，最重要的是到达临界点的时候(a==0||a==MAX)要回到最初的临界点View Code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> & 阅读全文

posted @ 2012-11-09 16:14 niuben 阅读(215) 评论(0) 推荐(0)

[f]css函数

摘要：用函数css获取对象样式的值、给对象设置样式。 1 function css() 2 { 3 if(arguments.length==3) //设置 4 { 5 //arguments[0]:对象，arguments[1]:属性，arguments[2]:值 6 arguments[0].style[arguments[1]]=arguments[2]; 7 } 8 else if(arguments.length==2) //获取 9 {10 //arguments[0]:对象，argume... 阅读全文

posted @ 2012-10-25 21:17 niuben 阅读(166) 评论(0) 推荐(0)

判断图片加载...

摘要：image具有complete属性。该属性在图片加载过程中都返回false;只有图片加载成功才会返回true。firefox实现了complete属性，而ie实现了complete属性和readyState属性但是两者对属性的定义不同：firefox ：一个图像被下载完毕，complete 属性就是true，没有下载完毕则为falseIE ：一个图像没有被下载完毕，则readyState 属性为uninitialized,complete属性是false.当下载完毕时， readyState为complete，而如果此时图片还没有显示，complete为false,显示以后(displ 阅读全文

posted @ 2012-10-25 16:21 niuben 阅读(190) 评论(0) 推荐(0)

[f]获得非行间样式方法

摘要：function getStyle(obj, attr){ if(obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }}getStyle(oDiv, 'width'); 阅读全文

posted @ 2012-10-23 16:47 niuben 阅读(119) 评论(0) 推荐(0)

[面试题]坑爹的JS笔试题

摘要：来源：http://www.cnblogs.com/snandy/archive/2012/09/18/2669960.html1，考察this 1 var length = 10 2 function fn(){ 3 alert(this.length) 4 } 5 var obj = {... 阅读全文

posted @ 2012-10-09 10:13 niuben 阅读(473) 评论(0) 推荐(0)

JavaScript定义类和对象的几种方式

摘要：这个问题一直都不太明白！在说这个话题之前，我想先说几句题外话：最近偶然碰到有朋友问我“hoisting”的问题。即在js里所有变量的声明都是置顶的，而赋值则是在之后发生的。可以看看这个例子：var a ='global'; (function () { alert(a); var a ='local'; })();大家第一眼看到这个例子觉得输出结果是什么？‘global’？还是‘local’？其实都不是，输出的是undefined，不用迷惑，我的题外话就是为了讲这个东西的。其实很简单，看一看JavaScript运行机制就会明白。我们可以把这种现象看做“预... 阅读全文

posted @ 2012-10-08 16:12 niuben 阅读(232) 评论(0) 推荐(0)

令我糊涂的Call

摘要：call 方法请参阅应用于：Function 对象要求版本 5.5调用一个对象的一个方法，以另一个对象替换当前对象。call([thisObj[,arg1[, arg2[, [,.argN]]]]])参数thisObj可选项。将被用作当前对象的对象。arg1, arg2, , argN可选项。将被传递方法参数序列。说明call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数，那么 Global 对象被用作 thisObj。--------------------------- 阅读全文

posted @ 2012-09-24 14:27 niuben 阅读(144) 评论(0) 推荐(0)

放飞自我 LET DREAMS FLY

随笔分类 - JavaScript