1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 body,ul,dl,dd{ margin:0; padding:0; font-size:12px; font-family:‘微软雅黑‘;}
8 .clear{ zoom:1}
9 .clear:after{ display:block; content:""; clear:both}
10
11 .box{margin:28px auto; width:350px; height:440px; background:#000; padding:8px;}
12 #wrap{ width:324px; height:386px; background:#1c1c1d; overflow:hidden; position:relative; }
13 #listbox{ float:left; width:309px; position:absolute; left:0; top:0; }
14 #scrollbox{ float:right; width:3px; height:386px; background: #333; position:relative;}
15 #scrollbar{ width:3px; height:30px; background:#cc3f2e; position:absolute; left:0; top:0;}
16
17 li{ height:80px; margin-bottom:8px; list-style:none;}
18 .picbox,.div{ float:left;}
19 .picbox{ width:150px; position:relative; }
20 .picbox span{ position:absolute; left:0px; bottom:0px; width:90px; height:22px;}
21 .picbox span.a1{ background:url(img/b.jpg)}
22 .picbox span.a2{ background:url(img/a.jpg)}
23 dl{ width:139px; height:76px; color:#fff; padding:4px 0 0 10px;line-height:18px; position:absolute;left:0; top:0; opacity:0.2; filter:alpha(opacity=20); }
24 .div{width:149px; height:80px; position:relative; }
25 .mark{width:149px; height:80px; position:absolute; top:0; left:0; background:#fff; opacity:0.1; filter:alpha(opacity=10);}
26
27 .nav{ width:324px; height:35px; font-family:‘微软雅黑‘;background:#1c1c1d; padding-top:5px;}
28 .a,.b{ width:152px; height:24px; line-height:24px; background:#666; text-align:center; float:left; color:#fff; cursor:pointer}
29 .a{margin-right:5px; display:inline; background:#333; color:#666; }
30
31 li.active .mark{opacity:0.2; filter:alpha(opacity=20);}
32 li.active dl{ opacity:0.7; filter:alpha(opacity=70);}
33 </style>
34 </head>
35
36 <body>
37 <div class="box">
38 <div class="nav">
39 <div class="a">猜你喜欢</div>
40 <div class="b">独家热播</div>
41 </div>
42 <div id="wrap">
43 <ul id="listbox">
44 <li class="active">
45 <div class="picbox">
46 <img src="img/1.jpg">
47 <span class="a1"></span>
48 </div>
49 <div class="div">
50 <div class="mark"></div>
51 <dl class="textbox">
52 <dt>飞狐外传</dt>
53 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
54 <dd>史上身材最棒狐仙</dd>
55 </dl>
56 </div>
57 </li>
58 <li>
59 <div class="picbox">
60 <img src="img/2.jpg">
61 <span class="a2"></span>
62 </div>
63 <div class="div">
64 <div class="mark"></div>
65 <dl class="textbox">
66 <dt>飞狐外传</dt>
67 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
68 <dd>史上身材最棒狐仙</dd>
69 </dl>
70 </div>
71 </li>
72 <li>
73 <div class="picbox">
74 <img src="img/3.jpg">
75 <span class="a2"></span>
76 </div>
77 <div class="div">
78 <div class="mark"></div>
79 <dl class="textbox">
80 <dt>飞狐外传</dt>
81 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
82 <dd>史上身材最棒狐仙</dd>
83 </dl>
84 </div>
85 </li>
86 <li>
87 <div class="picbox">
88 <img src="img/4.jpg">
89 <span></span>
90 </div>
91 <div class="div">
92 <div class="mark"></div>
93 <dl class="textbox">
94 <dt>飞狐外传</dt>
95 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
96 <dd>史上身材最棒狐仙</dd>
97 </dl>
98 </div>
99 </li>
100 <li>
101 <div class="picbox">
102 <img src="img/5.jpg">
103 </div>
104 <div class="div">
105 <div class="mark"></div>
106 <dl class="textbox">
107 <dt>飞狐外传</dt>
108 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
109 <dd>史上身材最棒狐仙</dd>
110 </dl>
111 </div>
112 </li>
113 <li>
114 <div class="picbox">
115 <img src="img/6.jpg">
116 </div>
117 <div class="div">
118 <div class="mark"></div>
119 <dl class="textbox">
120 <dt>飞狐外传</dt>
121 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
122 <dd>史上身材最棒狐仙</dd>
123 </dl>
124 </div>
125 </li>
126 <li>
127 <div class="picbox">
128 <img src="img/7.jpg">
129 </div>
130 <div class="div">
131 <div class="mark"></div>
132 <dl class="textbox">
133 <dt>飞狐外传</dt>
134 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
135 <dd>史上身材最棒狐仙</dd>
136 </dl>
137 </div>
138 </li>
139 <li>
140 <div class="picbox">
141 <img src="img/4.jpg">
142 </div>
143 <div class="div">
144 <div class="mark"></div>
145 <dl class="textbox">
146 <dt>飞狐外传</dt>
147 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
148 <dd>史上身材最棒狐仙</dd>
149 </dl>
150 </div>
151 </li>
152 <li>
153 <div class="picbox">
154 <img src="img/5.jpg">
155 </div>
156 <div class="div">
157 <div class="mark"></div>
158 <dl class="textbox">
159 <dt>飞狐外传</dt>
160 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
161 <dd>史上身材最棒狐仙</dd>
162 </dl>
163 </div>
164 </li>
165 <li>
166 <div class="picbox">
167 <img src="img/6.jpg">
168 </div>
169 <div class="div">
170 <div class="mark"></div>
171 <dl class="textbox">
172 <dt>飞狐外传</dt>
173 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
174 <dd>史上身材最棒狐仙</dd>
175 </dl>
176 </div>
177 </li>
178 <li>
179 <div class="picbox">
180 <img src="img/7.jpg">
181 </div>
182 <div class="div">
183 <div class="mark"></div>
184 <dl class="textbox">
185 <dt>飞狐外传</dt>
186 <dd>主演：方力申 周秀娜 谈莉娜 周秀娜施展媚术</dd>
187 <dd>史上身材最棒狐仙</dd>
188 </dl>
189 </div>
190 </li>
191 </ul>
192 <div id="scrollbox">
193 <div id="scrollbar"></div>
194 </div>
195 </div>
196 </div>
197 </body>
198 <script>
199
200 var listWrap = document.getElementById(‘wrap‘);
201 var listBox = document.getElementById(‘listbox‘);
202 var scrollBox = document.getElementById(‘scrollbox‘);
203 var scrollBar = document.getElementById(‘scrollbar‘);
204
205 var scale = 0, height = 0, maxTop = 0, listMaxTop = 0, t = 0;
206
207 scale = listWrap.clientHeight / listBox.scrollHeight;//滚动条可以滚动的比例
208
209 if(scale>1){scale = 1;}
210
211 height = scale * scrollBox.scrollHeight;//滚动条的高度
212
213 maxTop = scrollBox.scrollHeight - height;//最大可以滚动的大小
214
215 listMaxTop = listWrap.clientHeight - listBox.scrollHeight;//内容可以滚动的最大高度
216
217 if( scale == 1 ){scrollBox.style.display = ‘none‘;}//内容不足，滚动条隐藏
218
219 scrollBar.style.height = height + ‘px‘;
220
221 scrollBar.onmousedown = function(ev){
222
223 var ev = ev || event;
224
225 var disY = ev.clientY - this.offsetTop;//获取滚动条距离浏览器的竖直距离
226
227 document.onmousemove = function(ev){
228
229 var ev = ev || event;
230
231 t = ev.clientY - disY;//滚动条距离scrollBox顶部距离
232
233 fnScroll();
234
235 };
236
237 document.onmouseup = function(){
238 document.onmouseup = document.onmousemove = null;
239 };
240
241 return false;
242
243 };
244
245 listWrap.onmousewheel = mouseScroll;
246
247 if(listWrap.addEventListener){
248 listWrap.addEventListener(‘DOMMouseScroll‘,mouseScroll,false);
249 }
250
251 function mouseScroll(ev){
252
253 var ev = ev || event;
254 var fx = ev.wheelDelta || ev.detail;
255 //当用户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向下还是向上），就会触发mousewheel事件。这个事件可以在任何元素上面触发，最终会冒泡到document(IE)或window(Opera、Chrome、及Safari)对象。与mousewheel事件对应的event对象包含鼠标事件的所有标准信息之外，还包含一个特殊的wheelDelta属性。当用于向前滚动鼠标滚轮是，wheelDelta是120的倍数；当用户向后滚动鼠标滚轮是，wheelDelta是-120的倍数，datial适用于火狐浏览器且向下滚动是整数，想上滚动是负数，与谷歌浏览器的显示方式是相反的
256
257 var bDown = true;
258
259 if( ev.detail ){
260 bDown = fx > 0 ? true : false;
261 }else{
262 bDown = fx > 0 ? false : true;
263 }
264
265 if( bDown ){
266 t += 10;
267 }else{
268 t -= 10;
269 }
270
271 fnScroll();
272
273 if( ev.preventDefault ){
274 ev.preventDefault();
275 }
276
277 return false;
278 }
279
280 function fnScroll(){
281
282 if(t < 0 ){t = 0;}
283 if(t > maxTop){t = maxTop;}
284
285 var scale = t / maxTop;//滚动条滚动的比例
286 var listTop = scale * listMaxTop;//内容应移动的距离
287
288 scrollBar.style.top = t + ‘px‘;
289 listBox.style.top = listTop + ‘px‘;
290
291 }
292
293
294 </script>
295 </html>
ps：摘自妙味论坛
时间： 2024-10-10 16:18:42