鼠标移动到一张图片另几张堆叠的实现
偶然打开京东众筹页面看到这种类型的效果就想着怎么实现它,现在代码放上来做个笔记,
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title></title> 7 <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> 8 <script type="text/javascript" src="js/jquery.cookie.js"></script> 9 <style> 10 ul li { 11 float: left; 12 list-style: none; 13 width: 130px; 14 -webkit-transition: width 0.5s; 15 opacity: 0.5; 16 filter: alpha(opacity=50); 17 } 18 19 #gd { 20 overflow: hidden; 21 height: 220px; 22 } 23 24 .viewcolor {} 25 26 .viewgray { 27 filter: gray(enable) 28 } 29 30 #img_bg { 31 float: left; 32 } 33 34 .title { 35 float: left; 36 width: 220px; 37 padding: 20px; 38 } 39 40 #title_c { 41 width: 220px; 42 } 43 44 #tt { 45 background-color: #f8f8f8; 46 height: 220px; 47 } 48 49 #tt hr { 50 height: 2px; 51 border-color: #e6e6e6; 52 background-color: #e6e6e6; 53 text-align: center; 54 } 55 56 .x_current { 57 width: 130px; 58 -webkit-transition: width 1s; 59 } 60 61 .current { 62 width: 540px; 63 -webkit-transition: width 0.5s; 64 opacity: 1; 65 filter: alpha(opacity=50); 66 } 67 </style> 68 69 <script> 70 $(function() { 71 var $div_li = $("#content ul li"); 72 $div_li.hover(function() { 73 $(this).addClass("current").siblings().removeClass("current"); 74 }) 75 }) 76 </script> 77 </head> 78 79 <body> 80 <div id="content"> 81 <ul> 82 <li class="current"> 83 <div id="gd"> 84 <div id="img_bg"> 85 <img src="img/t1.jpg"> 86 </div> 87 <div id="tt" class="title"> 88 <p>TTi-120 钛金 钢笔</p> 89 <p id="title_c"> 90 钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑…… 91 </p> 92 <hr/> 93 </div> 94 </div> 95 </li> 96 <li> 97 <div id="gd"> 98 <div id="img_bg"> 99 <img src="img/t2.jpg"> 100 </div> 101 <div id="tt" class="title"> 102 <p>TTi-120 钛金 钢笔</p> 103 <p id="title_c"> 104 钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑…… 105 </p> 106 <hr /> 107 </div> 108 </div> 109 </li> 110 <li> 111 <div id="gd"> 112 <div id="img_bg"> 113 <img src="img/t3.jpg"> 114 </div> 115 <div id="tt" class="title"> 116 <p>TTi-120 钛金 钢笔</p> 117 <p id="title_c"> 118 钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑…… 119 </p> 120 <hr /> 121 </div> 122 </div> 123 </li> 124 <li> 125 <div id="gd"> 126 <div id="img_bg"> 127 <img src="img/t4.jpg" style="filter:invert"> 128 </div> 129 <div id="tt" class="title"> 130 <p>TTi-120 钛金 钢笔</p> 131 <p id="title_c"> 132 钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑…… 133 </p> 134 <hr /> 135 </div> 136 </div> 137 </li> 138 <li> 139 <div id="gd"> 140 <div id="img_bg"> 141 <img src="img/t5.jpg" style="filter:invert"> 142 </div> 143 <div id="tt" class="title"> 144 <p>TTi-120 钛金 钢笔</p> 145 <p id="title_c"> 146 钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑…… 147 </p> 148 <hr /> 149 </div> 150 </div> 151 </li> 152 </ul> 153 </div> 154 </body> 155 </html>
-
TTi-120 钛金 钢笔
钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑……
-
TTi-120 钛金 钢笔
钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑……
-
TTi-120 钛金 钢笔
钛金钢笔,可定制篆刻和各式文字、图形,定制德国笔尖,书写顺滑……
一切为了梦想!