淘宝商品的页面详情展现里面的图片展现

时间 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