前端学习笔记--javascript--实践

[转]来自于慕课网学习整理。

一、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

转载于:https://my.oschina.net/u/3176241/blog/823228