鼠标移动到一张图片另几张堆叠的实现

 偶然打开京东众筹页面看到这种类型的效果就想着怎么实现它，现在代码放上来做个笔记,

  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>
View Code

 

 

  • TTi-120 钛金 钢笔

    钛金钢笔，可定制篆刻和各式文字、图形，定制德国笔尖，书写顺滑……

  • TTi-120 钛金 钢笔

    钛金钢笔，可定制篆刻和各式文字、图形，定制德国笔尖，书写顺滑……

  • TTi-120 钛金 钢笔

    钛金钢笔，可定制篆刻和各式文字、图形，定制德国笔尖，书写顺滑……

posted @ 2015-12-09 16:52  Victor——  阅读(312)  评论(0)  编辑  收藏  举报