2012年5月8日
表格隔行变色 加鼠标移入移出及点击效果
摘要： 表格隔行变色，也是一个提高用户体验的js效果。效果实现：表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。鼠标移入某行时变颜色，移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。表格点击变色。便于用户选中自己想保留的项。说明：i%2 每个数和2取模的值，只有0和1两种，这样就可以实现隔行变色的效果tables_li[i].onoff = 1; 为了实现点击变色，鼠标移入移出时，颜色不被覆盖。上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 阅读全文
posted @ 2012-05-08 18:27 jingangel 阅读(804) 评论(0) 推荐(0)
2012年4月1日
点击label会自动触发onclick动作，点击它对应的input
摘要： 要做一个点击radio，触发相应事件的js。可是radio的点击面积太小，为了扩大它的点击面积，给它外层套了个label。发现问题了？怎么点label的区域都选中不了radio，只有label里面有文字了，点击才行.解决办法：给label加个透明的背景图，上面的问题就可以解决了。现在呢，可点击的问题是解决。又出现了新的问题？在触发的事件中加了alert()，才发现alert()竟然执行了两次。思考？百思不得其解，代码里也没让它运行两次呀，百度搜了下，发现有网友说label会内部触发 onclick选中radio的事，果断尝试。调用相关的函数后，加了个return false;阻止默认事件，发现 阅读全文
posted @ 2012-04-01 10:56 jingangel 阅读(5557) 评论(0) 推荐(0)
2012年3月14日
用js实现多个效果一起变化
摘要： 效果如下，有时可能会多个效果一起变化。要点一：box.onmouseover = function(){ startrun(box,{width:200,height:300},function(){ startrun(box,{opacity:100}) }) }通过json串可以传很多值，这样就可以同时改变很多属性了。要点二：遍历json串中的属性值对，找出所有的属性和对应的值，计算相应的数。并设置一个标识位，当没达到目标值时，标识位设为false，当标识位为true时，可以关闭定时器，执行下一次的调用最后，上代码<!DOCTYPE html><html><h 阅读全文
posted @ 2012-03-14 16:43 jingangel 阅读(525) 评论(0) 推荐(0)
用js实现类似新浪微博首页内容渐显效果
摘要： 效果如下，添加新内容，会高度先变化，然后再渐显出来。 要点一：if(list_li.length>=1){ list.insertBefore(li,list_li[0]); }else{ list.appendChild(li); }从在前面插入新内容，如果没有新内容，就是在后面插入新内容。要点二： var height=li.offsetHeight; li.style.height='0';取得li的高度，然后再li的高度设置为0,因为高度的变化是从0到现有高度。要点三： startrun(li,"height",height,function( 阅读全文
posted @ 2012-03-14 14:01 jingangel 阅读(425) 评论(0) 推荐(0)
用js实现类似jquery里的animate动画效果
摘要： 效果如下，鼠标移上，先宽度变化，再高度变化，最后透明度变化，鼠标移出，再依次变回去。要点一：startrun(obj,attr,target,fn)box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,function(){ startrun(box,"opacity","100") }); }); }如上面，函数也可以做为参数使用，就可以达到先执行某个动作，再执行某个动作的效果了。要 阅读全文
posted @ 2012-03-14 10:54 jingangel 阅读(8623) 评论(0) 推荐(0)
2012年3月13日
用js实现同一页面多个不同运动效果
摘要： 效果如下，每一个的运动效果都不一样哟~~1234要点一：function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; }}从样式表中根据id和属性名取值。要点二：if(attr == "opacity"){ cur = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur = parseInt(getstyle(o 阅读全文
posted @ 2012-03-13 23:45 jingangel 阅读(928) 评论(0) 推荐(0)
用js实现分享到随页面滚动而滑动效果
摘要： 页面向上向下滚动，分享到的模块随着滑动。要点：var scrtop =document.documentElement.scrollTop||document.body.scrollTop; var height = document.documentElement.clientHeight||document.body.clientHeight; var top = scrtop + (height - share.offsetHeight)/2; top = parseInt(top);获得页面垂直居中的位置上代码：<!DOCTYPE html><html>< 阅读全文
posted @ 2012-03-13 16:05 jingangel 阅读(2098) 评论(0) 推荐(0)
用js实现缓冲运动效果
摘要： 效果如下，一开始速度很快，然后慢下来，直到停止。 要点：var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大，所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整，反向速度的时候向下取整上代码<!DOCTYPE html><html><head><meta charset="gb2312" /><title> 阅读全文
posted @ 2012-03-13 11:01 jingangel 阅读(6345) 评论(0) 推荐(1)
2012年3月12日
用js实现类似分享到显示效果
摘要： 效果在左边的那个蓝色方块：进入显示的时候，会显示“分享到”几个字，鼠标移上，内容会慢慢移出，鼠标移出，内容再慢慢回复原来位置。分享到内容 分享到这个要点提示部分，在前面的几篇要点中都有提到，这里就不提了。下面，直接上代码喽：<!DOCTYPE html><html><head><meta charset="gb2312" /><title>无标题文档</title><style>body{margin:0; padding:0; font:12px/1.5 arial;}#share{wid 阅读全文
posted @ 2012-03-12 17:43 jingangel 阅读(1876) 评论(0) 推荐(1)
2012年3月11日
用js实现同一个页面多个渐变效果
摘要： 如下效果，下面的5个元素，随便一个，鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小。效果预览：12345要点一：var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; }根据目标值和当时值的对比，来决定是正向还是负向速度。要点二：for(i=0; i<runs_li.length; i++){ runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100); 阅读全文
posted @ 2012-03-11 23:22 jingangel 阅读(2378) 评论(5) 推荐(2)