技术标签 TAGS
专业技术精选
- 2020-03-20非常不错的骰子案例
- 2019-05-26vscode git and gitlens中文乱码问题
- 2011-12-14什么是网站制作的web标准
- 2011-12-14上海网站建设之六大不利优化因素
模仿apple横向滚动条移动效果(原创jquery)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模仿apple横向滚动条移动效果</title>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<style type="text/css">
*{ padding:0; margin:0;}
li{ list-style:none;}
.profile{ background:#000; width:120px; margin-left:25px;}
.profile .current{ background:#F00; color:#fff; left:-25px; position:relative; }
.newsContainer{}
.newsContainer ul.newsList{ float:right;}
</style>
<script type="text/javascript">
jQuery.fn.drag_div = function(){
var self = $(this);
this.each(function(){
self.bind('mousedown',function(event){
var x=event.pageX-parseInt(self.css('left'));
self.bind('mousemove',function(event){
var _x=parseInt(self.css('left'));
var width=parseInt(self.width());
if(event.pageX>_x){
var pagex=event.pageX;
var now_x=event.pageX-x;
self.css({left:now_x});
$("#pb-productslider").css({left:-now_x*4});
}else{
self.unbind('mousemove');
}
});
$(document).mouseup(function() {
self.unbind('mousemove');
});
return false;
}).mouseup(function(){
self.unbind('mousemove');
});
});
return this;
};
$(function(){
$('#pb-productsliderhandleimage').drag_div();
});
</script>
</head>
<link rel="stylesheet" href="http://images.apple.com/global/styles/base.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/global/styles/buystrip.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/global/styles/ac_media.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/mac/home/styles/productbrowser.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/mac/home/styles/mac.css" type="text/css" />
<link rel="stylesheet" href="http://images.apple.com/mac/home/styles/promos.css" type="text/css" />
<body>
<div id="productbrowser" style="overflow: hidden; margin:0 auto">
<div id="pb-productbrowsercontainer" style="overflow: hidden;">
<ul id="pb-productslider" style="left: -3.88467px;">
<li id="pb-airportexpress" class="pb-productimage"><a href="/airportexpress/" onclick="s_objectID="http://www.apple.com/airportexpress/_1";return this.s_oc?this.s_oc(e):true">AirPort Express</a></li>
<li id="pb-airportextreme" class="pb-productimage"><a href="/airportextreme/" onclick="s_objectID="http://www.apple.com/airportextreme/_1";return this.s_oc?this.s_oc(e):true">AirPort Extreme</a></li>
<li id="pb-timecapsule" class="pb-productimage"><a href="/timecapsule/" onclick="s_objectID="http://www.apple.com/timecapsule/_1";return this.s_oc?this.s_oc(e):true">Time Capsule</a></li>
<li id="pb-keyboards" class="pb-productimage"><a href="/keyboard/" onclick="s_objectID="http://www.apple.com/keyboard/_1";return this.s_oc?this.s_oc(e):true">Keyboard</a></li>
<li id="pb-magicmouse" class="pb-productimage"><a href="/magicmouse/" onclick="s_objectID="http://www.apple.com/magicmouse/_1";return this.s_oc?this.s_oc(e):true">Magic Mouse</a></li>
<li id="pb-magictrackpad" class="pb-productimage"><a href="/magictrackpad/" onclick="s_objectID="http://www.apple.com/magictrackpad/_1";return this.s_oc?this.s_oc(e):true">Magic Trackpad</a></li>
<li id="pb-displays" class="pb-productimage"><a href="/displays/" onclick="s_objectID="http://www.apple.com/displays/_1";return this.s_oc?this.s_oc(e):true">LED Cinema Display</a></li>
<li id="pb-macbook" class="pb-productimage"><a href="/macbook/" onclick="s_objectID="http://www.apple.com/macbook/_1";return this.s_oc?this.s_oc(e):true">MacBook</a></li>
<li id="pb-macbookair" class="pb-productimage"><a href="/macbookair/" onclick="s_objectID="http://www.apple.com/macbookair/_1";return this.s_oc?this.s_oc(e):true">MacBook Air</a></li>
<li id="pb-macbookpro" class="pb-productimage"><a href="/macbookpro/" onclick="s_objectID="http://www.apple.com/macbookpro/_1";return this.s_oc?this.s_oc(e):true">MacBook Pro</a></li>
<li id="pb-imac" class="pb-productimage"><a href="/imac/" onclick="s_objectID="http://www.apple.com/imac/_1";return this.s_oc?this.s_oc(e):true">iMac</a></li>
<li id="pb-macmini" class="pb-productimage"><a href="/macmini/" onclick="s_objectID="http://www.apple.com/macmini/_1";return this.s_oc?this.s_oc(e):true">Mac mini</a></li>
<li id="pb-macpro" class="pb-productimage"><a href="/macpro/" onclick="s_objectID="http://www.apple.com/macpro/_1";return this.s_oc?this.s_oc(e):true">Mac Pro</a></li>
<li id="pb-macosx" class="pb-productimage"><a href="/macosx/" onclick="s_objectID="http://www.apple.com/macosx/_1";return this.s_oc?this.s_oc(e):true">Mac OS X</a></li>
<li id="pb-ilife" class="pb-productimage"><a href="/ilife/" onclick="s_objectID="http://www.apple.com/ilife/_1";return this.s_oc?this.s_oc(e):true">iLife</a></li>
<li id="pb-iwork" class="pb-productimage"><a href="/iwork/" onclick="s_objectID="http://www.apple.com/iwork/_1";return this.s_oc?this.s_oc(e):true">iWork</a></li>
<li id="pb-mobileme" class="pb-productimage"><a href="/mobileme/" onclick="s_objectID="http://www.apple.com/mobileme/_1";return this.s_oc?this.s_oc(e):true">MobileMe</a></li>
<li id="pb-safari" class="pb-productimage"><a href="/safari/" onclick="s_objectID="http://www.apple.com/safari/_1";return this.s_oc?this.s_oc(e):true">Safari</a></li>
<li id="pb-quicktime" class="pb-productimage"><a href="/quicktime/" onclick="s_objectID="http://www.apple.com/quicktime/_1";return this.s_oc?this.s_oc(e):true">QuickTime</a></li>
<li id="pb-aperture" class="pb-productimage"><a href="/aperture/" onclick="s_objectID="http://www.apple.com/aperture/_1";return this.s_oc?this.s_oc(e):true">Aperture</a></li>
<li id="pb-finalcut" class="pb-productimage"><a href="/finalcutstudio/" onclick="s_objectID="http://www.apple.com/finalcutstudio/_1";return this.s_oc?this.s_oc(e):true">Final Cut Studio</a></li>
<li id="pb-finalcutserver" class="pb-productimage"><a href="/finalcutserver/" onclick="s_objectID="http://www.apple.com/finalcutserver/_1";return this.s_oc?this.s_oc(e):true">Final Cut Server</a></li>
<li id="pb-finalcutexpress" class="pb-productimage"><a href="/finalcutexpress/" onclick="s_objectID="http://www.apple.com/finalcutexpress/_1";return this.s_oc?this.s_oc(e):true">Final Cut Express</a></li>
<li id="pb-logicstudio" class="pb-productimage"><a href="/logicstudio/" onclick="s_objectID="http://www.apple.com/logicstudio/_1";return this.s_oc?this.s_oc(e):true">Logic Studio</a></li>
<li id="pb-logicexpress" class="pb-productimage"><a href="/logicexpress/" onclick="s_objectID="http://www.apple.com/logicexpress/_1";return this.s_oc?this.s_oc(e):true">Logic Express</a></li>
<li id="pb-ard" class="pb-productimage"><a href="/remotedesktop/" onclick="s_objectID="http://www.apple.com/remotedesktop/_1";return this.s_oc?this.s_oc(e):true">Apple Remote Desktop</a></li>
<li id="pb-macosxserver" class="pb-productimage"><a href="/server/macosx/" onclick="s_objectID="http://www.apple.com/server/macosx/_1";return this.s_oc?this.s_oc(e):true">Mac OS X Server</a></li>
<li id="pb-xserve" class="pb-productimage"><a href="/xserve/" onclick="s_objectID="http://www.apple.com/xserve/_1";return this.s_oc?this.s_oc(e):true">Xserve</a></li>
<li id="pb-xsan" class="pb-productimage"><a href="/xsan/" onclick="s_objectID="http://www.apple.com/xsan/_1";return this.s_oc?this.s_oc(e):true">Xsan</a></li>
</ul>
<div id="pb-productslidertrack" style="visibility: visible;">
<div id="pb-productsliderhandle" class="selected" style="left: 0px; z-index: 5;"></div>
<div id="pb-productsliderhandleimage" style="left: 0px;"></div>
<!--<span id="pb-cat1" class="pb-catclass7">Accessories</span>
<span id="pb-cat2" class="pb-catclass3">Macs</span>
<span id="pb-cat3" class="pb-catclass2">Applications</span>
<span id="pb-cat4" class="pb-catclass1">Servers</span>-->
</div>
<div id="pb-leftarrow"></div>
<div id="pb-rightarrow"></div>
</div>
</div>
</body>
</html>