<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0090)http://www.17sucai.com/preview/3630/2013-06-28/Moving_Boxes_Content_with_jQuery/index.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Moving Boxes Menu with jQuery</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all">
</head>
<body>
<div id="mb_background" class="mb_background">
<img class="mb_bgimage" src="default.jpg" alt="Background">
<div class="mb_overlay"></div>
<div class="mb_loading"></div>
</div>
<div id="mb_pattern" class="mb_pattern"><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 154px; left: 200px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 154px; left: 300px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 154px; left: 400px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 154px; left: 500px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 254px; left: 200px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 254px; left: 300px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 254px; left: 400px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 254px; left: 500px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 354px; left: 200px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 354px; left: 300px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 354px; left: 400px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 354px; left: 500px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 454px; left: 200px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 454px; left: 300px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 454px; left: 400px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div><div data-transform="rotate(0deg)" class="ui-draggable" style="opacity: 1; top: 454px; left: 500px; -webkit-transform: rotate(0deg); width: 100px; height: 100px; display: none;"></div></div>
<div class="mb_heading">
<h1>Lack of Color</h1>
</div>
<div id="mb_menu" class="mb_menu">
<a href="http://www.17sucai.com/preview/3630/2013-06-28/Moving_Boxes_Content_with_jQuery/index.html#" data-speed="1000" data-easing="easeOutBack">About</a>
<a href="http://www.17sucai.com/preview/3630/2013-06-28/Moving_Boxes_Content_with_jQuery/index.html#" data-speed="1000" data-easing="easeInExpo">Work</a>
<a href="http://www.17sucai.com/preview/3630/2013-06-28/Moving_Boxes_Content_with_jQuery/index.html#" data-speed="1000" data-easing="easeOutBack">Media</a>
<a href="http://www.17sucai.com/preview/3630/2013-06-28/Moving_Boxes_Content_with_jQuery/index.html#" data-speed="1000" data-easing="easeInExpo">Contact</a>
</div>
<div id="mb_content_wrapper" class="mb_content_wrapper" style="display: block;">
<span class="mb_close"></span>
<div class="mb_content" style="display: block;">
<h2>About</h2>
<div class="mb_content_inner jspScrollable" tabindex="0" style="overflow: hidden; padding: 0px; width: 340px;">
<div class="jspContainer" style="width: 340px; height: 268px;"><div class="jspPane" style="padding: 0px; top: 0px; width: 326px;"><p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</p><p>He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.</p><p>The bedding was hardly able to cover it and seemed ready to slide off any moment.</p><p>His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream. His room, a proper human</p></div><div class="jspVerticalBar"><div class="jspCap jspCapTop"></div><div class="jspTrack" style="height: 268px;"><div class="jspDrag" style="height: 192px;"><div class="jspDragTop"></div><div class="jspDragBottom"></div></div></div><div class="jspCap jspCapBottom"></div></div></div></div>
</div>
<div class="mb_content" style="display: none;">
<h2>Work</h2>
<div class="mb_content_inner jspScrollable" tabindex="0" style="overflow: hidden; padding: 0px; width: 340px;">
<div class="jspContainer" style="width: 340px; height: 268px;"><div class="jspPane" style="padding: 0px; width: 326px; top: -313px;"><p>She packed her seven versalia, put her initial into the belt and made herself on the way.</p><ul id="mb_imagelist" class="mb_imagelist">
<li><img src="1.jpg" alt="image1" data-bgimg="images/image1.jpg"></li>
<li><img src="2.jpg" alt="image2" data-bgimg="images/image2.jpg"></li>
<li><img src="3.jpg" alt="image3" data-bgimg="images/image3.jpg"></li>
<li><img src="4.jpg" alt="image4" data-bgimg="images/image4.jpg"></li>
<li><img src="2.jpg" alt="image2" data-bgimg="images/image2.jpg"></li>
<li><img src="1.jpg" alt="image1" data-bgimg="images/image1.jpg"></li>
<li><img src="4.jpg" alt="image4" data-bgimg="images/image4.jpg"></li>
<li><img src="3.jpg" alt="image3" data-bgimg="images/image3.jpg"></li>
</ul><p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p><p>Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.</p><p>The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.</p><p>But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.</p></div><div class="jspVerticalBar"><div class="jspCap jspCapTop"></div><div class="jspTrack" style="height: 268px;"><div class="jspDrag" style="height: 99px; top: 114.24838012958963px;"><div class="jspDragTop"></div><div class="jspDragBottom"></div></div></div><div class="jspCap jspCapBott
超炫个人网站导航特效~
需积分: 34 180 浏览量
2014-12-29
15:10:43
上传
评论
收藏 227KB ZIP 举报
适合个人网站导航模板.zip （16个子文件） 
适合个人网站导航模板 
jquery.min.js 83KB
2.jpg 6KB 1.jpg 6KB default.jpg 77KB jquery.mousewheel.js 2KB 3.jpg 14KB jquery.transform-0.9.3.min_.js 20KB 4.jpg 3KB index.htm 15KB jquery-1.4.2.min.js 79KB jquery-ui.min.js 195KB h.js 12KB jquery.easing.1.3.js 8KB style.css 3KB jquery.jscrollpane.css 1KB jquery.jscrollpane.min.js 14KB资源评论
Monistion
- 粉丝: 3
- 资源: 19
