中士
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<title>滑竿滚动展示图片 by 25175</title>
<meta name="Design Corp" content="顺通网络" />
<meta name="Author" content="powered by 25175">
<meta name="description" content="滑竿滚动展示图片,25175-你我一起舞-软件定制服务"/>
<meta name="Keywords" content="滑竿,滚动,展示图片" />
<style type="text/css" media="screen">
<!--
body {
padding: 0;
font: 1em "Trebuchet MS", verdana, arial, sans-serif;
font-size: 100%;
background-color: #fff;
margin: 0;
}
h1 {
margin-bottom: 2px;
}
#container {
background-color: #fff;
width: 580px;
margin: 15px auto;
padding: 50px;
}
/* slider specific CSS */
.sliderGallery {
overflow: hidden;
position: relative;
padding: 10px;
height: 160px;
width: 560px;
}
.sliderGallery UL {
position: absolute;
list-style: none;
overflow: none;
white-space: nowrap;
padding: 0;
margin: 0;
}
.sliderGallery UL LI {
display: inline;
}
.slider {
width: 542px;
height: 17px;
margin-top: 140px;
margin-left: 5px;
padding: 1px;
position: relative;
}
.handle {
position: absolute;
cursor: move;
height: 17px;
width: 181px;
top: 0;
z-index: 100;
}
.slider span {
color: #bbb;
font-size: 80%;
cursor: pointer;
position: absolute;
z-index: 110;
top: 3px;
}
.slider .slider-lbl1 {
left: 50px;
}
.slider .slider-lbl2 {
left: 107px;
}
.slider .slider-lbl3 {
left: 156px;
}
.slider .slider-lbl4 {
left: 280px;
}
.slider .slider-lbl5 {
left: 455px;
}
-->
</style>
<!-- updated to jQ 1.2.6 and UI 1.5.2 2008-11-28 -->
<script src="slider-gallery_files/jquery-1.js" type="text/javascript" charset="utf-8"></script>
<script src="slider-gallery_files/jquery-ui-full-1.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
window.onload = function () {
var container = $('div.sliderGallery');
var ul = $('ul', container);
var itemsWidth = ul.innerWidth() - container.outerWidth();
$('.slider', container).slider({
min: 0,
max: itemsWidth,
handle: '.handle',
stop: function (event, ui) {
ul.animate({'left' : ui.value * -1}, 500);
},
slide: function (event, ui) {
ul.css('left', ui.value * -1);
}
});
};
</script>
</head>
<body>
<div id="container">
<h1>25175</h1>
<p>最全jquery特效收集站点,提供jquery特效及jquery插件下载</p>
<div class="sliderGallery">
<ul style="left: -1479px;">
<li><img class="pb-airportexpress" src="slider-gallery_files/pb_airport_express.jpg"></li>
<li><img src="slider-gallery_files/pb_airport_extreme.jpg"></li>
<li><img src="slider-gallery_files/pb_timecapsule_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_keyboards20070807.jpg"></li>
<li><img src="slider-gallery_files/pb_mighty_mouse.jpg"></li>
<li><img src="slider-gallery_files/pb_cinema_display20071026.jpg"></li>
<li><img src="slider-gallery_files/pb_mac_pro_20070622.jpg"></li>
<li><img class="pb-macmini" src="slider-gallery_files/pb_mac_mini.jpg"></li>
<li><img src="slider-gallery_files/pb_macbook20071026.jpg"></li>
<li><img class="pb-macbookair" src="slider-gallery_files/pb_macbookair_20080115.jpg"></li>
<li><img class="pb-macbookpro" src="slider-gallery_files/pb_macbook_pro20071026.jpg"></li>
<li><img class="pb-imac" src="slider-gallery_files/pb_imac20071026.jpg"></li>
<li><img src="slider-gallery_files/pb_macosx_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_ilife_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_dot_mac_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_iwork_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_quicktime.jpg"></li>
<li><img src="slider-gallery_files/pb_aperture20080212.jpg"></li>
<li><img src="slider-gallery_files/pb_final_cut_studio2_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_final_cut_express_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_logic_studio_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_logic_express_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_shake_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_apple_remote_desktop_20080115.jpg"></li>
<li><img src="slider-gallery_files/pb_xserve.jpg"></li>
<li><img src="slider-gallery_files/pb_xserve_raid.jpg"></li>
<li><img class="pb-xsan" src="slider-gallery_files/pb_xsan_20080115.jpg"></li>
<li><img class="pb-macosxserver" src="slider-gallery_files/pb_macosx_server20071016.jpg"></li>
</ul>
<div class="slider ui-slider">
<a href="javascript:void(0)" style="outline: medium none; border: medium none;"><div style="left: 264px;" class="handle"></div></a>
<span class="slider-lbl1">Wi-Fi</span>
<span class="slider-lbl3">Macs</span>
<span class="slider-lbl4">Applications</span>
<span class="slider-lbl5">Servers</span>
</div>
</div>
</div>
<div id="ui-datepicker-div" style="display: none;"></div></body></html>
|
|
滑竿滚动展示图片特效
分享到：
 购买记录 其他最新源码
           
|
新兵
