niuben - 博客园

拖拽的基本原理

摘要：要点：计算物体与鼠标的距离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 阅读(236) 评论(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 阅读(210) 评论(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 阅读(275) 评论(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 阅读(179) 评论(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 阅读(170) 评论(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 阅读(332) 评论(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 阅读(201) 评论(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 阅读(154) 评论(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 阅读(202) 评论(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 阅读(152) 评论(0) 推荐(0)

放飞自我 LET DREAMS FLY