一, 弹出提示框
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 必须大写;
来源: http://www.jianshu.com/p/2bc785b7e546