<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>淘寶</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#big{
width: 360px;
height: 360px;
background:url(01big.jpg) top center;
border: 1px solid gray;
margin-left: 300px;
margin-top: 200px;
}
.box{
width: 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中較常用。