js入门小知识_网页特效原理

一、弹出提示框

onmouseover="alert('a')"

onmouseover 当鼠标移入的时；alert弹出提示框；a提示框内显示的内容；

示例：【网页提示框】

当鼠标移入这个input时，弹出提示框，提示框显示内容为“弹出提示框”；

图 Eleven

二、鼠标移入显示提示，鼠标移出提示隐藏

原理：当鼠标移入的时候，把div1的style的display变成block；

鼠标移入显示提示：onmouseover="document.getElementById('div1').style.display='block';"

鼠标移出提示隐藏：onmouseout="document.getElementById('div1').style.display='none';"

示例：【126邮箱记住密码提示框】

十天内免登录

 为了信息安全，请勿在网吧或公用电脑上使用此功能！

 

（注：div的style样式需自行调整）

图 Eleven

【拓展】

1、赋值：在数学里a=b，表示a和b相等；在js里，a=b，表示把b放到a里，即把等号右边的东西放到等号左边；

三、网页换肤

 

通过改变link的href属性，切换不同的样式表以更改样式；

onclick当鼠标点击时；

四、改变div的样式——鼠标移入时显示绿色div，鼠标移出时显示红色div

默认显示宽100px，高100px，颜色为红色的div；

鼠标移入显示宽200px，高200px，颜色为绿色的div；

鼠标移入显出宽100px，高100px，颜色为红色的div；

1、className改变div样式

【注：在js里面class属性必须写成className，且N必须大写】

     

   

2、行间js改变div样式

3、【js中的函数】优化行间样式

【函数的调用】

六、小结

1、网页特效原理：当用户做了什么事的时候，做什么样的处理，让用户感觉到变化；

2、onmouseover鼠标移入、onmouseout鼠标移出、onclick点击三个事件；

3、alert弹窗；

4、document.getElementById用来通过id获取某个元素，用于后面做相关操作；

5、元素的属性操作，操作元素的某些属性，如：改变div中的宽、link中的href；

6、js中的函数，把一块代码单独的拎出来，可以到处去用，和class很想；

7、在js里面class属性必须写成className，且N必须大写；