JavaScript是什么
目录
1.网页特效原理:
-新浪、百度、淘宝
-JavaScript就是修改样式
2.编写JavaScript的流程:
-布局:HTML+CSS
-属性:确定要修改的属性
-事件:确定用户要做那些操作
-编写JS:在事件中,用JS来修改页面元素的样式
3:第一个JS特效鼠标提示框
1.分析效果原理实现
-样式:Div的display
-事件:onmouseover、onmouseout
-动手编写效果
<DOCTYPE HTML>
<html>
<head>
<meat charset="utf-8">
<title>鼠标点击特效-JS</title>
<style>
#div1{
width:200px; height:100px; background:#CCC; border:1px solid #999;
}
</style>
<body>
<input type="checkbox"/>
<div id="div1">
为了您的信息安全,请不要再网吧等场所勾选此选项。
</div>
</body>
</head>
</html>
鼠标移入input时,显示div1(也就是让div的display变成block),鼠标移出input时,隐藏div1(就是将div1的display变成)。
<input type="button" value="点击" onClick="alert('请点击完成任务');"/>
这个就是一个简单的事件,点击按钮弹出窗口提示信息“请点击完成任务”,click(点击)
<input type="checkbox" onmouseover="alert('请勾选该选项');"/>
一个鼠标移入就显示提示窗口的事件 οnmοuseοver="alert('请勾选该选项');" οnmοuseοut="alert('请勾选该选项');" 鼠标移出时显示的提示窗口信息。
<input type="checkbox" onmouseover="div1.style.display='block';"/>
div1.style.display='block';的意思就是div1的style样式display属性,“=”的意思就是将div1的style样式display属性变成block,鼠标移上去之后就会显示提示信息。
<input type="checkbox" onmouseover="div1.style.display='block';" onmouseout="div1.style.display='none';"/>
上面的代码就完整的实现鼠标移到input,提示信息显示,移开后提示信息消失的效果。
经过上面的代码完善,基本可以说是没什么问题了,但是在火狐上面运行的时候你会发现我们前面设置的JS特效居然不会显示出效果,如下图
这是什么原因呢?其实这就是大家知道的不兼容的问题,在一些低版本或者别的一些浏览器中,会存在不兼容的问题,这就导致我们所做的效果不会显示出来,为了解决这种情况我们需要在原先的代码上作出一些修改。
<input type="checkbox"
onmouseover="document.getElementById('div1').style.display='block';"
onmouseout="document.getElementById('div1').style.display='none';"/>
document.getElementById('div1')是什么意思呢,从中文的释义就可以看出来,document 就是文档对象,文档对象获取元素的ID,也就是在文档对象中通过ID获取元素。这样一来,我们就达到了我们的期望了。在火狐这些浏览器中都可以正常显示。
总结:
在上面的演示中我们了解到了三种事件,onClick、onmouseover、onmouseout三种。其JS效果也是通过这三种事件来编写的。
特效基础:
-事件驱动:onmouseover
-元素属性操作:object.style.[……]
-特效实现原理概括:响应用户操作,对页面元素(标签)进行修改。