仿Apple产品滑动展示效果

哼唱，这恋曲 · 发表于 2011-9-2 23:05:28

好的东西，我也不多说了，你们自己去看看就知道了http://www.ixdy.net/portal.php

代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>仿Apple产品滑动展示效果</title>
<script src="Slider.js"></script>
<script src="Drag.js"></script>
</head>
<body>
<p>最新电影：</p>
<style type="text/css">
.container{width:900px; background:#3E3E3E; overflow:hidden; color:#fff; padding:10px 20px; font-size:12px;}
.content{ overflow:hidden; margin-bottom:10px;width:900px;}
.content div{ width:130px; margin:5px; padding:5px; padding-bottom:0; height:120px; line-height:20px; background-color:#000000;}
.content div img{ width:130px; height:100px; border:0;display:block;}
.slider{ padding:1px 0; position:relative;background:#0A0A0A; height:15px; border-bottom:1px solid #545454;border-top:1px solid #545454; float:left; width:844px;cursor:pointer; }
.slider_left, .slider_right{ background:url(http://pic002.cnblogs.com/img/cloudgamer/200812/2008122223581198.gif) no-repeat; height:19px; width:28px; float:left; cursor:pointer;}
.slider_left{background-position:left top;}
.slider_right{background-position:right top;}
.bar{ height:15px; width:150px; background:url(http://pic002.cnblogs.com/img/cloudgamer/200812/2008122223573480.gif) left top repeat-x;}
.bar_left, .bar_right{background:url(http://pic002.cnblogs.com/img/cloudgamer/200812/2008122223580168.gif) no-repeat;height:15px; _font-size:0; width:6px; position:absolute; top:0px;}
.bar_left{background-position:left top;left:-6px;}
.bar_right{background-position:right top;right:-6px;}
</style>
<div id="idContainer" class="container">
<div id="idContent" class="content">
  <table cellpadding="0" cellspacing="0">
<tr align="center">
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=1989"><img
src="http://cdn3a.dvdempire.org/products/90/1580290h.jpg" /></a>1. 雷神</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2102&extra=page%3D1"><img src="http://www.ixdy.net/static/image/common/none.gif" /></a>2. 天使纯净的脸蛋为你展示内衣诱惑</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2101&extra=page%3D1"><img src="http://bbs.cn.yimg.com/user_img/200701/18/tzxc888_116911989524213.jpg" /></a>3. 模特兒被撕破衣服後強拍 </div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2100&extra=page%3D1"><img src="http://www.meinv2.com/uploads/allimg/c100614/12L4XW42P-6210I.jpg" /></a>4. 台湾版娇娃可爱泳衣篇</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2099&extra=page%3D1"><img src="http://image208.poco.cn/mypoco/myphoto/20100923/22/55786157201009232214051231121908443_004.jpg" /></a>5. bomb的美女，绝对清纯</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2098&extra=page%3D1"><img src="http://www.ixdy.net/data/attachment/forum/201109/02/002116ckpqg7q7l0ptz262.jpg" /></a>6. 放毒~邻家少女</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2097&extra=page%3D1"><img src="http://image208.poco.cn/mypoco/myphoto/20100917/16/54704062201009171650193261374501399_000.jpg" /></a>7. 疑似仙子下凡尘</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2096&extra=page%3D1"><img src="http://gb.cri.cn/mmsource/images/2008/11/20/ei081120029.jpg" /></a>8. 职装短发美女黄静茵</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2095&extra=page%3D1"><img src="http://i296.photobucket.com/albums/mm165/iamzoziam/2.jpg" /></a>9. 小倉優子 - 中学制服</div></td>
<td><div><a href="http://www.ixdy.net/forum.php?mod=viewthread&tid=2094&extra=page%3D1"><img src="http://bbs.cn.yimg.com/user_img/200701/07/mazhj2000_1168142500444525.jpg" /></a>10.陶醉你的双眸</div></td>
</tr>
  </table>
</div>
<div class="slider_left" id="idSliderLeft"></div>
<div class="slider" id="idSlider">
  <div class="bar" id="idBar">
<div class="bar_left"></div>
<div class="bar_right"></div>
  </div>
</div>
<div class="slider_right" id="idSliderRight"></div>
</div>
<br><br>
作者：ixdy.net<br>
网站：<a href="http://www.ixdy.net/">爱下电影论坛</a>

<script>
var sld = new Slider("idSlider", "idBar", {
MaxValue: $("idContent").scrollWidth - $("idContent").clientWidth,
onMin: function(){ $("idSliderLeft").style.backgroundPosition = "bottom left"; },
onMax: function(){ $("idSliderRight").style.backgroundPosition = "bottom right"; },
onMid: function(){ $("idSliderLeft").style.backgroundPosition = "top left"; $("idSliderRight").style.backgroundPosition = "top right"; },
onMove: function(){ $("idContent").scrollLeft = this.GetValue(); }
});
sld.SetPercent(.5);
sld.Ease = true;
$("idSliderLeft").onmouseover = function(){ sld.Run(false); }
$("idSliderLeft").onmouseout = function(){ sld.Stop(); }
$("idSliderRight").onmouseover = function(){ sld.Run(true); }
$("idSliderRight").onmouseout = function(){ sld.Stop(); }
</script>
</body>
</html>

使用方法：把下面的文件传到根目录
复制代码DIY选择模板展示类静态模板
修改调用图片和地址
只能说到这里了，小人口才不佳，不懂的话加97372959 注意说明网站

展示：

		自动登录	找回密码
密码			立即注册

[发布] 仿Apple产品滑动展示效果

本帖子中包含更多资源