显示图片，透明度设置，大图设置（未优化）

 1 <!DOCTYPE html>
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5     <title></title>
 6     <script src="jquery-3.1.1.js"></script>
 7     <script type="text/javascript">
 8         $(document).ready(function () {
 9             $('#div1').fadeTo(1, 0.1); $('#div2').fadeTo(1, 0.1); $('#div3').fadeTo(1, 0.1); $('#div4').fadeTo(1, 0.1);
10             $("#div1").mouseover(function () {
11                 var imageA = document.getElementById('image1').src;
12                 document.getElementById('imageB').src = imageA;
13                 $(this).fadeTo(1, 1);
14             });
15             $("#div1").mouseout(function () {
16                 $(this).fadeTo(1, 0.1);
17             });
18             $("#div2").mouseover(function () {
19                 var imageA = document.getElementById('image2').src;
20                 document.getElementById('imageB').src = imageA;
21                 $(this).fadeTo(1, 1);
22             });
23             $("#div2").mouseout(function () {
24 
25                 $(this).fadeTo(1, 0.1);
26             });
27             $("#div3").mouseover(function () {
28                 var imageA = document.getElementById('image3').src;
29                 document.getElementById('imageB').src = imageA;
30                 $(this).fadeTo(1, 1);
31             });
32             $("#div3").mouseout(function () {
33                 $(this).fadeTo(1, 0.1);
34             });
35             $("#div4").mouseover(function () {
36                 $(this).fadeTo(1, 1);
37             });
38             $("#div4").mouseout(function () {
39                 $(this).fadeTo(1, 0.1);
40             });
41         });
42     </script>
43 </head>
44 <body>
45     <div id="divA" style="float:left">
46         <div id="div1" style="background-color:red;width:350px;height:241px">
47             <img id="image1" src="image/0.jpg" /></div>
48         <div id="div2" style="background-color: #8739cb; width: 350px; height: 241px; ">
49             <img id="image2" src="image/1.jpg" /></div>
50         <div id="div3" style="background-color: #b6ff00; width: 350px; height: 241px; ">
51             <img id="image3" src="image/2.jpg" /></div>
52         <div id="div4" style="background-color: #808080; width: 350px; height: 241px; ">
53             <img id="image4" src="image/3.jpg" /></div>
54     </div>
55     <div id="divB" style="float:right;width:750px;height:516px">
56 
57         <img id="imageB" src="image/3.jpg" style="width: 750px; height: 516px" />
58     </div>
59 </body>
60 </html>
显示图片，透明度设置，大图设置（未优化）

猜你喜欢
