2012年3月11日
用js实现同一页面多个运动效果
摘要： 如图，有五个元素，给他们都加上运动效果。实现原理，就是在调用的时候，给这五个元素，循环加上事件。需要注意的是，每个元素的定时器需要分开。要点一：var speed = (target - obj.offsetWidth)/8; 缓冲运动效果，一开始速度很快，然后越来越慢，直到停止 speed = speed>0?Math.ceil(speed):Math.floor(speed); 如果速度大于0，则向上取整，如果速度小于0，则向下取整。要点二：if(obj.offsetWidth == target){ clearInterval(obj.timer); }else{ obj.styl 阅读全文
posted @ 2012-03-11 22:50 jingangel 阅读(434) 评论(0) 推荐(0)
用js实现透明度渐变效果
摘要： 如图，一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30.要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个变量，让变量变化，最后把变量的值再赋给元素的透明值。var alpha=30;要点二：判断目标值和目前透明值，来判定是正向速度还是负向速度。if(target > alpha){ speed = 2; }else{ speed = -2; } 要点三：如果透明值达到目标值，关掉定时器，否则透明值继续变化。最后把值赋给元素，因为透明度有兼容问题,所以要写上两个写法。 if(alpha == target){ 阅读全文
posted @ 2012-03-11 21:45 jingangel 阅读(17626) 评论(0) 推荐(0)
用js实现简单的点击左右运动
摘要： 如下图，点击向右，方块向右移动，点击向左，方块向左移动。可以用setInterval来实现过多长时间，div移动多长的距离来实现运动效果。要点一：如果元素的左边距离小于目标距离，则是正向移动，否则是负向移动if(run.offsetLeft <target){speed = 2;}else{speed = -2;}要点二：如果元素的左边距离等于目标距离，停止定时器，否则，元素的左边距离等于现在的左边距离加上速度值。if(run.offsetLeft ==target){clearInterval(timer);}else{run.style.left = run.offsetLeft + 阅读全文
posted @ 2012-03-11 21:26 jingangel 阅读(1568) 评论(0) 推荐(0)
2012年3月9日
用javascript写简单的鼠标拖动效果
摘要： 用鼠标拖动一个元素，放到网页的任意一个位置上，这是很常见的，例如很多博客模板版块位置可以自己拖动到相应位置。下面先写一个简单的可以实现鼠标拖动的效果。当鼠标按下的时候，记录鼠标当前位置和元素左边距离的差值。当鼠标移动的时候，给元素的位置赋值，就是鼠标的位置，减去刚才的差值。当鼠标放开的时候，给鼠标移动和鼠标放开赋值null，让它们不要再有任何动作。要点一：disx = oevent.clientX - box.offsetLeft; 要确定拖动的时候鼠标点在元素的位置，就是鼠标位置减去元素的左边距离。要点二：box.style.left = oevent.clientX - disx + &q 阅读全文
posted @ 2012-03-09 23:00 jingangel 阅读(467) 评论(0) 推荐(0)
用js实现简单的左右两边固定广告效果
摘要： 大多数网站都有左右两边的固定广告位，下面呢就是实现这个效果的最简单的代码，可能在ie下滚动的时候会有一点抖动，这个问题以后再解决了，先实现再说。要点一： var adtop = adleft.offsetTop; 获得元素距离上边的位置，在滚动的时候需要用到。要点二：adleft.style.top = adtop + (document.documentElement.scrollTop || document.body.scrollTop) +"px"; 滚动时，给元素的上边位置赋值为元素本身距离上边的距离加上滚动的距离。上代码<!DOCTYPE html> 阅读全文
posted @ 2012-03-09 22:15 jingangel 阅读(2535) 评论(0) 推荐(0)
用js写交换运动效果
摘要： 如图所示地址http://nfc.qq.com/?&mz_ca=1000973&mz_sp=3xYDZ0&mz_cr=0&mz_sr=0&mz_sb=1实现后的效果，点击互相交换位置和距离左边和上角的信息。要点一：var now = s_pic_li[0]; for(var i=0; i<s_pic_li.length; i++){ s_pic_li[i].onclick = function(){ if(this == now) return false; var w = now.offsetWidth; var h = now.offsetHe 阅读全文
posted @ 2012-03-09 13:57 jingangel 阅读(584) 评论(0) 推荐(0)
2012年3月8日
用js实现简单的点击返回顶部效果
摘要： 当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。要点一：document.documentElement.clientWidth || document.body.clientWidth； 获得可视区的宽度。后面是兼容chrome，前面是兼容其它浏览器。要点二：oTop.style.left = screenw - oTop.offsetWidt 阅读全文
posted @ 2012-03-08 22:44 jingangel 阅读(100800) 评论(2) 推荐(0)
用js实现简单的鼠标跟随效果
摘要： 鼠标跟随，顾名思义，就是在鼠标移动的时候，有个动画跟随着鼠标一起移动。要点一：var oEvent = evt || window.event; 这个是为了兼容ie和ff而写的，在ie下window.event表示event对象，而ff下，是给事件函数传一个参数，这个参数就表示事件对象。要点二：document.onmousemove = function(evt) 鼠标跟随是在鼠标移动时发生的事情。要点三：document.documentElement.scrollTop|| document.body.scrollTop；这是为了兼容chrome和其它浏览器，滚动条距上边滚动的距离，c. 阅读全文
posted @ 2012-03-08 21:06 jingangel 阅读(10601) 评论(0) 推荐(0)
2012年3月6日
用js的DOM操作写简单的留言板
摘要： 如图，简易留言板，也就是自娱自乐版，说白了就是练习DOM操作。要点一：document.createElement("标签名") 新建元素要点二：父元素.appendChild("元素") 把新建的元素插入到页面的标签中（在标签的最后一个显示），这样才会在浏览器中显示出来要点三：父元素.insertBefore("元素","要插入哪个元素的前面") 把新建的元素插入到页面中指定的标签前面，这样后面输入的内容才会显示到前面要点四：父元素.removeChild(“元素”) 删除指定元素下面，上代码：<!DOCT 阅读全文
posted @ 2012-03-06 00:18 jingangel 阅读(2773) 评论(0) 推荐(0)
2012年3月3日
用js写简单选项卡 加 自动切换效果
摘要： 接上篇(用js写简单选项卡)，这篇就实现可以自动切换的切换效果，用这种效果就可以做简单的焦点图了。说明：设置一个标识数字置为0，写一个每过几秒标识+1,执行切换效果的函数，然后执行。当标识超过当前选项卡长度让标识置为0。在鼠标移到选项卡的时候关闭定时器，鼠标移走的时候打开定时器。<!DOCTYPE html><html><head><meta charset="gb2312" /><title>无标题文档</title><style>body,ul,li{margin:0; padding: 阅读全文
posted @ 2012-03-03 00:41 jingangel 阅读(4065) 评论(0) 推荐(2)