淘寶商品的頁面詳情展現裏面的圖片展現

時間 2019-11-12

標籤淘寶商品頁面詳情展現裏面圖片简体版

原文原文鏈接

<!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(){})區別。javascript

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的做用域是至關於其餘程序塊級做用域~!

css

二 . 響應事件的方式html

　　　　nmouseover和onmouseout鼠標移入移出時觸發的事件：

　　　　onmouseover 用戶鼠標移入元素時觸發的事件。並執行onmouseover調用的函數。

　　　　onmouseout 用戶鼠標移開元素時觸發的事件。並執行onmouseout調用的函數。

　　　　onmouseover和onmouseout 這兩個事件在javascript中較經常使用。java

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。