<一>初探js特效魅力之鼠标悬浮事件01
2013-10-06 23:05
573 查看
初探js特效魅力01
通常js特效在浏览器中不太兼容,是因为我们获取对象ID上出了问题,比如在body里面有个div,它的id="div1",如果对它更改样式,我们通常是div1.style..,这是不兼容的做法,正确来说,应该是document.getElementById("div1"),这才是兼容的做法。
一.(初探js魅力01)鼠标悬浮单选按钮时出现提示内容,鼠标离开时,提示内容消失,或者鼠标悬浮div2时放大,离开变小其他特效自己扩展:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js特效</title>
<script>
function go(){
document.getElementById('div1').style.display='block';
}
function out(){
document.getElementById('div1').style.display='none';
}
function toGreen(){
document.getElementById("div2").style.width="300px";
document.getElementById("div2").style.height="300px";
document.getElementById("div2").style.background="green";
}
function toRed(){
document.getElementById("div2").style.width="100px";
document.getElementById("div2").style.height="100px";
document.getElementById("div2").style.background="red";
}
</script>
<style>
#div1{
width:300px;
height:100px;
border:1px solid black;
background-color:#F00;
display:none;
}
#div2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="go()" onmouseout="out()"/>复选框
<div id="div1">鼠标悬浮复选框是提示内容!div1</div>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="div2" onmouseover="toGreen()" onmouseout="toRed()">div2</div>
</body>
</html>
关键内容是:鼠标的悬浮、离开:onmouseover、onmouseout
未完待续,请继续查看初识js魅力02
通常js特效在浏览器中不太兼容,是因为我们获取对象ID上出了问题,比如在body里面有个div,它的id="div1",如果对它更改样式,我们通常是div1.style..,这是不兼容的做法,正确来说,应该是document.getElementById("div1"),这才是兼容的做法。
一.(初探js魅力01)鼠标悬浮单选按钮时出现提示内容,鼠标离开时,提示内容消失,或者鼠标悬浮div2时放大,离开变小其他特效自己扩展:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js特效</title>
<script>
function go(){
document.getElementById('div1').style.display='block';
}
function out(){
document.getElementById('div1').style.display='none';
}
function toGreen(){
document.getElementById("div2").style.width="300px";
document.getElementById("div2").style.height="300px";
document.getElementById("div2").style.background="green";
}
function toRed(){
document.getElementById("div2").style.width="100px";
document.getElementById("div2").style.height="100px";
document.getElementById("div2").style.background="red";
}
</script>
<style>
#div1{
width:300px;
height:100px;
border:1px solid black;
background-color:#F00;
display:none;
}
#div2{
width:100px;
height:100px;
background:red;
}
</style>
</head>
<body>
<input type="checkbox" onmouseover="go()" onmouseout="out()"/>复选框
<div id="div1">鼠标悬浮复选框是提示内容!div1</div>
<br /><br /><br /><br /><br /><br /><br /><br />
<div id="div2" onmouseover="toGreen()" onmouseout="toRed()">div2</div>
</body>
</html>
关键内容是:鼠标的悬浮、离开:onmouseover、onmouseout
未完待续,请继续查看初识js魅力02
相关文章推荐
- Ringo.js字符集问题解决
- 轻松弄清JavaScript中的offset、scroll、client
- JS之逻辑运算问题
- excelpanel--extjs中嵌入excel,并封装简单操作
- JS之DOM
- JS之函数定义的三种方式
- JS之浏览器对象含义
- JavaScript核心组成部分
- 【学习笔记】JavaScript(2013-10-06)
- javascript 创建对象的几种方式
- (转)JavaScript跨域总结与解决办法
- JavaScript的单线程性质以及定时器的工作原理
- ExtJS21:ComboBox联动下拉菜单示例
- ExtJS26:身份证号码验证
- C# Json处理日期和Table
- ExtJS13:Google Chart应用
- ExtJS14:GoogleChart渲染的性能优化
- ExtJS12:Ajax发送请求:同步和异步
- ExtJS10:ComboBox动态加载数据
- ExtJS09:选中表格中指定行