[转]来自于慕课网学习整理。
一、QQ面板拖拽效果
功能实现:
1.可拖拽QQ登录面板移动
onmousedown:按下鼠标,获取鼠标的坐标 (保存在event.clientX和event.clientY属性中)
onmousemove: 当鼠标指针在元素内部移动时,执行移动操作:面板的top,left跟随光标
onmouseup:当释放鼠标按钮时触发,不执行移动操作
鼠标移动时的具体计算:
2.选择QQ在线状态:
onmouseover:鼠标滑过状态时改变背景颜色:this.style.background=""
onmouseout:鼠标离开时恢复背景颜色。
onclick:点击之后-->状态列表隐藏,xx.style.display="none";
并且鼠标点击的文本替换掉原来显示状态栏里的文本,xx.innerHTML=yy.innerHTML
注意:阻止事件冒泡
3.当状态选择栏展开时,点击面板其他地方可以隐藏状态选择栏;而选择状态栏区域时时是显示的(阻止事件冒泡)
document.οnclick=function(){ xx.style.display="none"},
二、抽奖系统
1.鼠标点击”开始”,滚动显示奖品;点击停止,停止滚动
play.onclick: 实现函数中用setInterval每隔一段时间显示奖品,注意clearInterval
(奖品为数组中的随机奖品,index为随机数,用Math.floot(Math.random()*n))
并且开始显示”灰色”
stop.onclick: clearInterval
2.用键盘(回车)开始和停止
(keyDown/keyPress/keyUp)
设置全局flag,标志key表示开始还是停止
keyUp: 按下回车时(event.keyCode=13)根据flag的值判断是想开始还是停止,执行相应的动作。
三、实现JS动画
1.当鼠标移入移出时,单个物体做简单动画:
速度动画:如矩形的宽,高匀速或者缓冲变大或变小,矩形的位置匀速或缓冲改变。改变css中,{top,left,width,height}
透明度动画:改变css中,{filter:alpha(opacity:30);opacity:0.3}
onmouseover: startMove(xxx);
onmouseout:startMove(yyy);
startMove(iTarget){timer=setInterval}
匀速:每隔一定时间计算(setInterval):left/top= width/height +(-) speed (speed为固定值)
缓冲:每隔一定时间计算(setInterval):left/top= width/height +(-) speed
注:speed为非固定:speed=speed>0?Math.ceil((iTarget-cur)/20):Math.floot((iTarget-cur)/20);
2.当鼠标移入移出时,多个物体做某种简单动画:
aLi[i].onmouseover: aLi[i].timer=null;(aLi[i].alpha=xxx)startMove(this,xxx);
aLi[i].onmouseout:
//当前宽高+改变的量 赋值给css中属性
startMove(obj,iTarget){obj.timer=setInterval;改变obj.style.width/Height}
注意:定时器归属于某个对象,不能共用一个;自己定义的变量(如透明度)也不能共用。
如何获取当前宽高??
改变宽、高:obj.style.widht/height=curW/curH;
1)curW=parseInt(obj.style.width)+'px'; //如果HTML中设置有style="width:xx”
2)正确的:(HTML中无style,且有边框也可用),用obj.currentStyle['width']//ie ;
或obj.getComputedStyle(obj,false)['width']//火狐, 如下:
3)curW/curH=(obj.offesetWidth/offsetHeight //当无边框时可表示当前宽高,否则不行
3.当鼠标移入移出时,多个物体做不同的简单动画:
aLi[i].onmouseover: aLi[i].timer=null;(aLi[i].alpha=xxx)startMove(this,'width',xxx);
aLi[i].onmouseout:
startMove(obj,attr,iTarget){obj.timer=setInterval;改变obj.style.attr}//把要改变的属性作为参数传入
eg:如果改变的是透明度,即传入的参数attr="opacity",需要适当更改代码。
4.当鼠标移入移出时,物体做链式动画:
先做变宽-->然后变高
aLi[i].onmouseover:startMove(this,'widht',xxx,function(){startMove(this,'Height',yyy)})
aLi[i].onmouseout:
startMove(obj,attr,iTarget,fn) { 在停止的时候:if(fn){fn()} else(clearInterval)}//fn为执行完startMove之后再执行fn
5.当鼠标移入移出时,物体同时做多运动动画:
如,宽高同时运动,
1) 用JSON
Json格式:json={name:value,name:value},
遍历Json中成对的值:for(var i in json){i;//表示name json[i] //表示value}
aLi[i].onmouseover:startMove(this,{width:xxx,height:yyy},function})
aLi[i].onmouseout:
startMove(obj,attr,iTarget,fn) -->
startMove(obj,json,fn){
for(var attr in json){用json[attr]代替iTarget}
判断停止时改成:当json中的属性都到达了目标值时,才clearInterval
startMove(){ if(iCur==json[attr]){clearInterval}}-->
startMove(){flag=true; if(iCur!=json[attr]) {flag=flase,继续做运动}else if(flag){clearInterval}}
}
2)用JQuery
四、时间显示、倒计时
1、显示当前具体时间,用new Date()对象
2、倒计时:天/天,小时,分,秒
五、marquee标签实现信息滚动
1.循环滚动,并且鼠标移入悬停
克隆 要滚动的区域,当卷去的区域正好等于一个滚动内容的完整高度时,让滚动高度规0.
鼠标移入,停止计时器;移出,开启定时器。
ps: scrollTop:(卷去的高)设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
2.间歇性滚动
(每滚动一条信息,停止一段时间,再继续滚动一条信息,停止。。。循环)
六、商城分类导航效果
竖向列表-->一级菜单,二级菜单
功能:当鼠标划过一级菜单时,展开相应的二级菜单。
样式效果:鼠标滑过一级菜单时,一级菜单有阴影边框;弹出二级菜单叠在一级菜单之上。
一级菜单:li
二级菜单:<div class="submenu"-><div class="leftdiv">->dl->dt->dd
<div class="rightdiv">dl->dt->dd
鼠标移入移出一级标签产生效果的两种实现方式:
CSS,a:hover
javascript,添加onmouseover/onmouseout,动态添加className