偶然打开京东众筹页面看到这种类型的效果就想着怎么实现它，现在代码放上来做个笔记,
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 钛金 钢笔
钛金钢笔，可定制篆刻和各式文字、图形，定制德国笔尖，书写顺滑……
时间： 2024-08-10 23:29:13