以下是 jElevator jQuery导航插件特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jElevator jQuery导航插件</title>
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/jelevator.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/jquery-jelevator-1.0.2.min.js"></script>
<script type="text/javascript">
jQuery(function ($) {
$("h1, h2, h3, h4, h5").jElevator({
showTopButton: true,
showBottomButton: true,
showSectionsMenu: true
});
});
</script>
</head>
<body>
<div id="page">
<div id="header"></div>
<div id="content">
<div class="demo-description">
<h1>Demo #1 — Menu Generator + Scroll Top & Bottom Buttons</h1>
<p>
This demo shows how the jElevator jQuery Plugin works. In the
sample content below, you'll see when a user moves the mouse to
the left side of the screen a tiny panel appears which contains
the automatically generated menu, scroll-to-top button, and
scroll-to-bottom button. A great feature of the jElevator script
is that it can build an outline (or table of contents) based
on the tags you provide to it. For example, in this demo we used
all heading tags to generate the outline (h1, h2, ... h5).
To see the outline, move the mouse to the left side of the page
and click the center button to display the outline menu. There
are three buttons total (scroll top, scroll bottom, sections
menu). Per your preference, you can select to show one, two,
or all three.
</p>
<p><strong>To add this functionality to your page just add:</strong></p>
<pre>
jQuery(function($){
$("h1, h2, h3, h4, h5").jElevator({
showTopButton: true,
showBottomButton: true,
showSectionsMenu: true
});
});
</pre>
</div>
<hr>
<h2>Cras Mattis Consectetur</h2>
<p class="preface">
Aenean eu leo quam. Pellentesque ornare sem
lacinia quam venenatis vestibulum. Morbi leo risus, porta ac
consectetur ac, vestibulum at eros. Curabitur blandit tempus
porttitor. Aenean lacinia bibendum nulla sed consectetur.
</p>
<div class="column-l">
<p>
Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Donec ullamcorper nulla non metus auctor
fringilla. Morbi leo risus, porta ac consectetur ac, vestibulum
at eros. Vivamus sagittis lacus vel augue laoreet rutrum
faucibus dolor auctor. Integer posuere erat a ante venenatis
dapibus posuere velit aliquet. Aenean eu leo quam. Pellentesque
ornare sem lacinia quam venenatis vestibulum. Cras mattis
consectetur purus sit amet fermentum.
</p>
<p>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Etiam porta sem malesuada magna mollis
euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at
eros. Nulla vitae elit libero, a pharetra augue. Cras mattis
consectetur purus sit amet fermentum. Vestibulum id ligula porta
felis euismod semper.
</p>
</div>
<div class="column-r">
<p>
Donec sed odio dui. Nullam quis risus eget urna mollis ornare
vel eu leo. Maecenas sed diam eget risus varius blandit sit amet
non magna. Duis mollis, est non commodo luctus, nisi erat
porttitor ligula, eget lacinia odio sem nec elit.
</p>
<p>
Sed posuere consectetur est at lobortis. Cras justo odio,
dapibus ac facilisis in, egestas eget quam. Duis mollis, est non
commodo luctus, nisi erat porttitor ligula, eget lacinia odio
sem nec elit. Praesent commodo cursus magna, vel scelerisque
nisl consectetur et. Praesent commodo cursus magna, vel
scelerisque nisl consectetur et. Aenean lacinia bibendum nulla
sed consectetur. Lorem ipsum dolor sit amet, consectetur
adipiscing elit.
</p>
</div>
<div class="clear"></div>
<h2>Justo Venenatis Vulputate</h2>
<div class="box-1"></div>
<p>
Donec id elit non mi porta gravida at eget metus. Donec
ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget
risus varius blandit sit amet non magna. Praesent commodo cursus
magna, vel scelerisque nisl consectetur et.
</p>
<p>
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam
id dolor id nibh ultricies vehicula ut id elit.
</p>
<p>
Nullam quis risus eget urna mollis ornare vel eu leo. Donec id
elit non mi porta gravida at eget metus. Donec id elit non mi porta
gravida at eget metus. Donec ullamcorper nulla non metus auctor
fringilla. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et.
</p>
<div class="clear"></div>
<h2>Egestas Eget Quam</h2>
<p>
Etiam porta sem malesuada magna mollis euismod. Nullam id dolor
id nibh ultricies vehicula ut id elit. Aenean lacinia bibendum nulla
sed consectetur. Sed posuere consectetur est at lobortis. Lorem
ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante venenatis dapibus posuere velit aliquet. Donec
ullamcorper nulla non metus auctor fringilla.
</p>
<p>
Cras mattis consectetur purus sit amet fermentum. Nullam id dolor
id nibh ultricies vehicula ut id elit. Vivamus sagittis lacus vel
augue laoreet rutrum faucibus dolor auctor. Curabitur blandit tempus
porttitor. Praesent commodo cursus magna, vel scelerisque nisl
consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem
malesuada magna mollis euismod.
</p>
<hr>
<h1>Vehicula Aenean Dapibus Commodo Pharetra</h1>
<p class="preface">
Vivamus sagittis lacus vel augue laoreet rutrum
faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit. Aenean
lacinia bibendum nulla sed consectetur.
</p>
<div class="column-l">
<p>
Donec ullamcorper nulla non metus auctor fringilla. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula,
eget lacinia odio sem nec elit. Nulla vitae elit libero, a
pharetra augue. Etiam porta sem malesuada magna mollis euismod.
Praesent commodo cursus magna, vel scelerisque nisl consectetur
et.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
posuere consectetur est at lobortis. Nullam id dolor id nibh
ultricies vehicula ut id elit. Integer posuere erat a ante
venenatis dapibus posuere velit aliquet. Vestibulum id ligula
porta felis euismod semper. Cras justo odio, dapibus ac
facilisis in, egestas eget quam. Nullam quis risus eget urna
mollis ornare vel eu leo.
</p>
</div>
<div class="column-r">
<p>
Donec ullamcorper nulla non metus auctor fringilla. Sed
posuere consectetur est at lobortis. Etiam porta sem malesuada
magna mollis euismod. Duis mollis, est non commodo luctus, nisi
erat porttitor ligula, eget lacinia odio sem nec elit.
</p>
<p>
Cum sociis natoque penatibus et magnis dis parturient montes,
nascetur ridiculus mus. Duis mollis, est non commodo luctus,
nisi erat porttitor ligula, eget lacinia odio sem nec elit.
Nulla vitae elit libero, a pharetra augue. Nullam quis risus
eget urna mollis ornare vel eu leo.
</p>
</div>
<div class="clear"></div>
<h2>Vestibulum Ridiculus Adipiscing Lorem</h2>
<p>
Cras mattis consectetur purus sit amet fermentum. Sed posuere
consectetur est at lobortis. Etiam porta sem malesuada magna mollis
euismod. Maecenas faucibus mollis interdum.
</p>
<p>
Aenean eu leo quam. Pellentesque ornare sem lacinia quam
venenatis vestibulum. Vestibulum id ligula porta felis euismod
semper.
</p>
<h3>Purus Ridiculus Sollicitudin</h3>
<p>
Donec ullamcorper nulla non metus auctor fringilla. Vivamus
sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Fusce
dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh,
ut fermentum massa justo sit amet risus. Curabitur blandit tempus
porttitor. Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus.
</p>
<p>
Fusce dapibus, tellus ac cursus commodo, tortor mauris
condimentum nibh, ut fermentum massa justo sit amet risus. Nulla
vitae elit libero, a pharetra augue. Lorem ipsum dolor sit amet,
consectetur adipiscing elit. Integer posuere erat a ante venenatis
dapibus posuere velit aliquet. Curabitur blandit tempus porttitor.
</p>
<h3>Fermentum Dolor Vestibulum Inceptos Mollis</h3>
<p>
Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
Nullam quis risus eget urna mollis ornare vel eu leo. Lorem ipsum
dolor sit amet, consectetur adipiscing elit. Vestibulum id ligula
porta felis euismod semper.
</p>
<p>
Maecenas sed diam eget risus varius blandit sit amet non magna.
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum
nibh, ut fermentum massa justo sit amet risus. Nullam id dolor id
nibh ultricies vehicula ut id elit. Nullam id dolor id nibh
ultricies vehicula ut id elit. Aenean lacinia bibendum nulla sed
consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at
eros. Sed posuere consectetur est at lobortis.
</p>
<p>
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
auctor. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec
id elit non mi porta gravida at eget metus. Vivamus sagittis lacus
vel augue laoreet rutrum faucibus dolor auctor.
</p>
</div>
</div>
</body>
</html>
JS代码(jquery-jelevator-1.0.2.min.js):
/*! jelevator jQuery Plugin (c) 2013 www.w3Blender.com For any questions and support please visit www.w3blender.com. */
(function(e){
var t=!1,n={
settings:null,closeItemsPanel:function(t){
if(e(t.target).parents(".jelevator").length>0&&!e(t.currentTarget).hasClass("jelevator-menu"))return!1;
e(".jelevator-navi-items").hide();
e(".jelevator-navigation").removeClass("open");
typeof n.settings.onSectionsMenuClick=="function"&&n.settings.onSectionsMenuClick(t,"hide")}
,scrollToPosition:function(r){
t=!0;
if(n.settings.animatedScroll)e("body,html").animate({
scrollTop:r}
,n.settings.animationSpeed,function(){
t=!1}
);
else{
e(document).scrollTop(r);
t=!1}
}
}
,r={
showTopButton:!0,showBottomButton:!1,showSectionsMenu:!1,onSectionsMenuClick:null,sectionsMenuTitle:"",animatedScroll:!0,animationSpeed:500}
;
e.fn.jElevator=function(i){
var s=e.extend(r,i);
n.settings=s;
var o=e(this),u=0,a=0,f=0;
this.init=function(){
this.createInDomTree();
s.showSectionsMenu&&e(".jelevator-menu").bind("click",this.onShowMenuBtnClick);
if(s.showTopButton){
e(".jelevator-scroll-top").bind("click",this.onScrollTopBtnClick);
e(".jelevator-navi-items").on("click","a",this.onMenuItemClick);
e(document).bind("click",n.closeItemsPanel)}
s.showBottomButton&&e(".jelevator-scroll-bottom").bind("click",this.onScrollBottomBtnClick);
e(document).unbind("scroll").bind("scroll",function(){
if(!t){
e(".jelevator-scroll-top").removeClass("return-back").attr("title","Scroll to Top");
e(".jelevator-scroll-bottom").removeClass("return-back").attr("title","Scroll to Bottom")}
}
);
e(document).bind("mousemove",this.onMouseMove)}
;
this.createInDomTree=function(){
var t="",n="";
s.sectionsMenuTitle!==""&&(n="<li><strong>"+s.sectionsMenuTitle+":</strong></li>");
o.each(function(t,r){
n+='<li><a href="javascript:;
">'+e(r).text()+"</a></li>"}
);
var r="";
if(s.showTopButton){
!s.showSectionsMenu&&!s.showBottomButton?r=" full-height":s.showSectionsMenu||(r=" half-height");
t+='<a href="javascript:;
" title="Scroll to Top" class="jelevator-scroll-top'+r+'"><span>
</span></a>'}
if(s.showSectionsMenu){
!s.showTopButton&&!s.showBottomButton&&(r=" full-height");
t+='<a href="javascript:;
" class="jelevator-menu'+r+'"><span>
</span></a>'}
if(s.showBottomButton){
!s.showTopButton&&!s.showSectionsMenu?r=" full-height":s.showSectionsMenu||(r=" half-height");
t+='<a href="javascript:;
" class="jelevator-scroll-bottom'+r+'"><span>
</span></a>'}
var i='<div class="jelevator-navi-items"><ul>'+n+"</ul></div>",u='<div class="jelevator"><div class="jelevator-navigation">'+t+"</div>"+(s.showSectionsMenu?i:"")+"</div>";
t!==""&&e("body").append(u)}
;
this.onShowMenuBtnClick=function(t){
if(e(".jelevator-navigation").hasClass("open"))n.closeItemsPanel(t);
else{
e(".jelevator-navigation").addClass("open");
e(".jelevator-navi-items").css({
left:-1*e(".jelevator-navi-items").width(),display:"block"}
);
e(".jelevator-navi-items").animate({
left:0}
,100,function(){
typeof s.onSectionsMenuClick=="function"&&s.onSectionsMenuClick(t,"open")}
)}
return!1}
;
this.onScrollTopBtnClick=function(){
var t=e(document).scrollTop(),r=0;
if(t===0&&u!==0){
r=u;
e(".jelevator-scroll-top").removeClass("return-back").attr("title","Scroll to Top")}
else if(t>0){
u=t;
r=0;
e(".jelevator-scroll-top").addClass("return-back").attr("title","Return to Previous Position")}
n.scrollToPosition(r);
return!1}
;
this.onScrollBottomBtnClick=function(){
var t=0,r=e(document).scrollTop(),i=e(document).height(),s=i-r-e(window).height()===0;
if(s&&a>=0){
t=a;
e(".jelevator-scroll-bottom").removeClass("return-back").attr("title","Scroll to Bottom")}
else{
e(".jelevator-scroll-bottom").addClass("return-back").attr("title","Return to Previous Position");
a=r;
t=i}
n.scrollToPosition(t);
return!1}
;
this.onMenuItemClick=function(){
var t=e(this).index("ul a"),r=e(o.get(t)).position().top;
n.scrollToPosition(r);
return!1}
;
this.onMouseMove=function(t){
t.stopImmediatePropagation();
var r=t.clientX>0?t.clientX:1,i=parseInt(100/parseInt(e(document).width()/r,10),10),s=!1;
if(Math.abs(i-f)<5)return;
e(".jelevator-navigation").hasClass("open")&&r>e(".jelevator").width()&&n.closeItemsPanel(t);
if(i>=10&&i<=50){
var o=e(".jelevator").width()*i*2.5/100;
f>i?s=e(".jelevator").width()-o:s=-o;
s=Math.ceil(s);
s>0&&(s=0)}
else i>50?s=-parseInt(e(".jelevator").width(),10):i>=0&&i<10&&(s=0);
if(s!==!1){
e(".jelevator").stop();
e(".jelevator").animate({
left:s}
,100)}
f=i}
;
this.init();
return this}
}
)(jQuery);
CSS代码(demo.css):
body{background-color:#444;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;color:#333;background-color:#333}
#page{width:990px;padding:10px;background-color:#fff;margin:auto}
p{line-height:135%}
#header{height:80px;background-color:#ecd078}
#footer{height:150px;background-color:#eee}
div.clear{clear:both;line-height:0;font-size:0;width:100%}
div.box-1{width:220px;height:200px;float:right;background-color:#fff;margin-left:40px;margin-bottom:40px;background-color:#542437}
#content{margin:40px 20px}
h1{font-size:270%;color:#542437}
h2{font-size:200%}
h3{font-size:140%}
hr{border:1px solid #fff;border-top:4px solid #eee;margin-top:20px;margin-bottom:20px}
.column-l{float:left;width:49%}
.column-r{float:right;width:49%}
p.preface{font-style:italic;font-size:150%;padding-left:20px;border-left:5px solid #542437}
a{color:#c02942}
a:hover{color:#d95b43}
p.copyright{font-size:11px;padding:10px;text-align:center;color:#aaa}
.demo-description{padding:25px;border-radius:5px;background-color:#f89205}
.demo-description p{color:#111;text-shadow:0 1px 0 rgba(255,255,255,0.3);font-size:16px}
.demo-description a{color:#fff;text-shadow:0 1px 1px rgba(0,0,0,0.5)}
.demo-description a:hover{text-decoration:none}
.demo-description pre{border:2px dashed #fff;padding:15px;border-radius:5px}
.demo-description h1{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,0.5);margin:0;padding:0}
CSS代码(jelevator.css):
/*! jelevator jQuery Plugin (c) 2013 www.w3Blender.com For any questions and support please visit www.w3blender.com.*/
.jelevator{position:fixed;left:0;top:0;width:30px;height:100%;background-color:#fff;background-color:rgba(255,255,255,0.30000000000000004);z-index:100;left:-30px;-webkit-transition:background-color .3s;-moz-transition:background-color .3s;-ms-transition:background-color .3s;-o-transition:background-color .3s;transition:background-color .3s}
.jelevator:hover{left:0}
.jelevator:hover .jelevator-navigation{background:#fff}
.jelevator.expanded{width:250px}
.jelevator .jelevator-navigation{position:absolute;left:0;top:0;width:30px;height:100%;z-index:101}
.jelevator .jelevator-navigation.open{border-right:1px solid #525556}
.jelevator .jelevator-navi-items{position:fixed;left:30px;top:0;width:220px;height:100%;background:#3c3f41;background:rgba(60,63,65,0.95);display:none;z-index:100;padding-left:30px;box-shadow:3px 0 3px #333;-webkit-box-shadow:3px 0 3px #333}
.jelevator .jelevator-navi-items ul{list-style:none;margin:0;padding:10px 10px 0;color:#bbb;font-size:12px;text-shadow:-1px 0 0 #000;height:98%;overflow:auto}
.jelevator .jelevator-navi-items ul a{color:#bbb;text-decoration:none;display:block;padding:5px;-webkit-transition:background-color .3s;-moz-transition:background-color .3s;-ms-transition:background-color .3s;-o-transition:background-color .3s;transition:background-color .3s}
.jelevator .jelevator-navi-items ul a:hover{color:#FFF;background-color:rgba(255,255,255,0.09999999999999998)}
.jelevator .jelevator-navi-items ul li{display:block;line-height:150%;padding:2px 0}
.jelevator .jelevator-navi-items ul li strong{color:white}
.jelevator .jelevator-scroll-top,.jelevator .jelevator-scroll-bottom{float:left;line-height:1%;text-align:center;width:100%;height:40%}
.jelevator .jelevator-scroll-top.full-height,.jelevator .jelevator-scroll-bottom.full-height{height:100%}
.jelevator .jelevator-scroll-top.half-height,.jelevator .jelevator-scroll-bottom.half-height{height:50%}
.jelevator .jelevator-scroll-bottom,.jelevator .jelevator-scroll-bottom span{position:absolute;bottom:0;left:0}
.jelevator .jelevator-scroll-top span,.jelevator .jelevator-scroll-bottom span{height:18px;float:left;background:no-repeat center top;width:100%;margin:10px 0;line-height:1%;font-size:0}
.jelevator .jelevator-scroll-top span{background:url("../images/icons.png") no-repeat 11px 0}
.jelevator .jelevator-scroll-top.return-back span{background:url("../images/icons.png") no-repeat -19px 0}
.jelevator .jelevator-scroll-bottom span{background:url("../images/icons.png") no-repeat -109px 0}
.jelevator .jelevator-scroll-bottom.return-back span{background:url("../images/icons.png") no-repeat -139px 0}
.jelevator .jelevator-scroll-top:hover,.jelevator .jelevator-scroll-bottom:hover,.jelevator .jelevator-menu:hover{background-color:rgba(60,63,65,0.19999999999999996)}
.jelevator .jelevator-menu{left:0;top:40%;position:absolute;width:100%;text-align:center;height:20%;opacity:.5;-webkit-transition:opacity .3s;-moz-transition:opacity .3s;-ms-transition:opacity .3s;-o-transition:opacity .3s;transition:opacity .3s}
.jelevator .jelevator-menu:hover{opacity:1}
.jelevator .jelevator-menu span{display:block;width:100%;height:16px;background:url("../images/icons.png") no-repeat -48px 0;font-size:0;margin:-8px auto 0;position:absolute;top:50%;left:0}
.jelevator .open .jelevator-menu span{background-position:-78px 0}
.jelevator .jelevator-menu.full-height{height:100%;top:0;margin-top:0}
分享到QQ
分享到微博
微信扫一扫
