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

一、弹出提示框

onmouseover="alert('a')"

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

示例：<input type="password" onmouseover="alert('弹出提示框')">

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

图 Eleven

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

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

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

示例：<label onmouseover="document.getElementById('div1').style.display='block';"onmouseout="document.getElementById('div1').style.display='none';">

<input type="checkbox" />十天内免登录</label>

<div id="div1" style="width: 100px;height: 50px;background-color: #FFCC99;border: 1px solid #FF9900;display: none;">

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

  </div>

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

图 Eleven

【拓展】

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

onmouseover="document.getElementById('div1').className='box';"

2、鼠标移入时显示绿色div，鼠标移出时显示红色div

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

     <style>

      div { width: 100px; height: 100px; background-color: red;}

      .box { width: 200px; height: 200px; background-color: green;}

    </style>

三、网页换肤

<input id="btn1" type="button" value="皮肤1" onclick="document.getElementById('link1').href='/css/.css1';"/>

 <input id="btn2" type="button" value="皮肤2" onclick="document.getElementById('link2').href='/css/.css2';"/>

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

onclick当鼠标点击时；

四、改变div的样式

<div id="div1" onmouseover="document.getElementById('div1').style.width='200px';document.getElementById('div1').style.height='200px';document.getElementById('div1').style.background='green';"  onmouseout="document.getElementById('div1').style.width='100px';document.getElementById('div1').style.height='100px';document.getElementById('div1').style.background='red';"/>

<style media="screen">

  #div1 { width: 100px; height: 100px; background: red;}

 </style>

默认显示宽100px，高100px，颜色为红色的div；鼠标移入显示宽200px，高200px，颜色为绿色的div；鼠标移入显出宽100px，高100px，颜色为红色的div；

五、js中的函数

<div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>【函数的调用】

<script type="text/javascript">【script标签，放在head里来写】

    function toGreen()【函数的定义】

    {

      var oDiv1=document.getElementById('div1');【变量的使用】

      oDiv1.style.width='200px';

      oDiv1.style.height='200px';

      oDiv1.style.background='green';

    }

      function toRed()

      {

        var oDiv1=document.getElementById('div1');

        oDiv1.style.width='100px';

        oDiv1.style.height='100px';

        oDiv1.style.background='red';

      }

    </script>

页面实现效果，同改变div的样式；

六、小结

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

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

3、alert弹窗；

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

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

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

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