放飞自我 LET DREAMS FLY

11 2012 档案

拖拽的基本原理
摘要:要点:计算物体与鼠标的距离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 阅读(214) 评论(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 阅读(205) 评论(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 阅读(259) 评论(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 阅读(176) 评论(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 阅读(163) 评论(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 阅读(325) 评论(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 阅读(196) 评论(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 阅读(150) 评论(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 阅读(197) 评论(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 阅读(148) 评论(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 阅读(231) 评论(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 阅读(205) 评论(0) 推荐(0) 编辑

导航

点击右上角即可分享
微信分享提示