HTML+CSS生成静态网页
JS可以在静态网页上添加交互和功能
部分事件可以理解为用户的操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 200px;height: 100px;background: #55aaff;border: 1px solid #999;}
</style>
</head>
<body>
<input type="checkbox" />
<div id="div1">
为了您的信息安全,请...
</div>
</body>
</html>
效果:
设置display:none;可以把文字隐藏
目标
:鼠标移入到input上的时候,让div1显示,鼠标移出input的时候,让div1隐藏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 200px;height: 100px;background: #55aaff;border: 1px solid #999;display: none;}
</style>
</head>
<body>
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>
<div id="div1">
为了您的信息安全,请...
</div>
</body>
</html>
在有些浏览器中,可能要把下面的代码作更改才能达到效果:
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>
换成:
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>
特效原理概括:响应用户操作,对页面元素(标签)进行某种修改
可以借用变量和函数实现代码重用
继续更改
<input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';"/>
更改后:(函数在script标签里面)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {
width: 200px;
height: 100px;
background: #55aaff;
border: 1px solid #999;
display: none;}
</style>
<script>
function showtext()
{document.getElementById('div1').style.display='block';}
function hidetext()
{document.getElementById('div1').style.display='none';}
</script>
</head>
<body>
<input type="checkbox"
onmouseover="showtext()"
onmouseout="hidetext()"/>
<div id="div1">
为了您的信息安全,请...
</div>
</body>
</html>