<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘宝</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#big{
360px;
height: 360px;
background:url(01big.jpg) top center;
border: 1px solid gray;
margin-left: 300px;
margin-top: 200px;
}
.box{
360px;
height: 70px;
margin-left: 300px;
}
ul{
list-style: none;
}
li{
float: left;
border: 1px solid gray;
}
ul img {
cursor: pointer;
}
</style>
</head>
<body>
<div id="big" ></div>
<div class="box">
<ul class="box01">
<li><img src="01.jpg" alt="连接失败" id="pic"></li>
<li><img src="02.jpg" alt="连接失败" id="pic1"></li>
<li><img src="03.jpg" alt="连接失败" id="pic2"></li>
<li><img src="04.jpg" alt="连接失败" id="pic3"></li>
<li><img src="05.jpg" alt="连接失败" id="pic4"></li>
</ul>
</div>
<script type="text/javascript">
window.onload = function(){
var imgbig = document.getElementById("big");
var pic = document.getElementById("pic");
var pic1 = document.getElementById("pic1");
var pic2 = document.getElementById("pic2");
var pic3 = document.getElementById("pic3");
var pic4 = document.getElementById("pic4");
pic.onmouseover = function(){
imgbig.style.backgroundImage = "url(01big.jpg)"
}
pic1.onmouseover = function(){
imgbig.style.backgroundImage = "url(02big.jpg)"
}
pic2.onmouseover = function(){
imgbig.style.backgroundImage = "url(03big.jpg)"
}
pic3.onmouseover = function(){
imgbig.style.backgroundImage = "url(04big.jpg)"
}
pic4.onmouseover = function(){
imgbig.style.backgroundImage = "url(05big.jpg)"
}
}
</script>
</body>
</html>
一. 主要应用了javascript当中响应事件的方法，其中也应用到了window.onload = function(){}这个方法。下面我们就说说javascript的：window.onload = function(){}与(function(){})区别 。
1. $(function(){})可以写多个..但是window.onload只能写一个..各种函数要可以写在window.onload=function(){//这里..}
2 . window.onload = demo()跟window.onload=demo的区别在于. 前者的window.onload是demo()这个函数的结果,相当于一个事件... 后者是demo这个函数.
3. $(function(){}).它其实不是它.囧..它是jQuery(document).ready(function(){})的简写..window.onload很单纯..很纯粹.没有简写..它是它..+_+
window.onload = function(){}与(function(){}) 这两个
1-区别:
window.onload 算 事件
function(){}很平常的一个函数,外加一个()实际返回的就是一个匿名函数对象.
2-那个比较好,这个问题不存在~!因为这是2个不同的用途~!
window.onload这个表示网页加载完执行后面的那个函数,而一般形式定义的普通函数,只要常规调用就行了.
记住:函数:
是对象-有属性有方法,
是数据-可传进任何函数当数据使用
也是作用域---函数就是限制作用域的一段代码集合,js的作用域是相当于其他程序块级作用域~!
二 . 响应事件的方式
nmouseover和onmouseout鼠标移入移出时触发的事件：
onmouseover 用户鼠标移入元素时触发的事件。并执行onmouseover调用的函数。
onmouseout 用户鼠标移开元素时触发的事件。并执行onmouseout调用的函数。
onmouseover和onmouseout 这两个事件在javascript中较常用。