像酒店 酒吧 咖啡店连锁 小型餐厅 音乐网站等等 都可以采用我如下所讲的大气磅礴的网站效果 scroll+easing+animation+水平、竖直滚动。。。
主要运用的技术有jquery easing+jquery scroll
源码见页脚附件?
主要核心知识简单介绍如下所述:
?
在网页内首先要建立几个section 来实现滚动 如下
?
class="html" name="code"><div class="section black" id="section1"> <h2>Section 1</h2> <p> MY Spectre around me night and day Like a wild beast guards my way; My Emanation far within Weeps incessantly for my sin. </p> <ul class="nav"> <li>1</li> <li><a href="#section2">2</a></li> <li><a href="#section3">3</a></li> </ul> </div> <div class="section white" id="section2"> <h2>Section 2</h2> <p> A fathomless and boundless deep, There we wander, there we weep; On the hungry craving wind My Spectre follows thee behind. </p> <ul class="nav"> <li><a href="#section1">1</a></li> <li>2</li> <li><a href="#section3">3</a></li> </ul> </div> <div class="section black" id="section3"> <h2>Section 3</h2> <p> He scents thy footsteps in the snow Wheresoever thou dost go, Thro' the wintry hail and rain. When wilt thou return again? </p> <ul class="nav"> <li><a href="#section1">1</a></li> <li><a href="#section2">2</a></li> <li>3</li> </ul> </div>
?简易的css样式如下
?
*{ margin:0; padding:0; } body{ background:#000; font-family:Georgia; font-size: 34px; font-style: italic; letter-spacing:-1px; width:12000px; position:absolute; top:0px; left:0px; bottom:0px; } .section{ margin:0px; bottom:0px; width:4000px; float:left; height:100%; text-shadow:1px 1px 2px #f0f0f0; } .section h2{ margin:50px 0px 30px 50px; } .section p{ margin:20px 0px 0px 50px; width:600px; } .black{ color:#fff; background:#000 url(../images/black.jpg) no-repeat top right; } .white{ color:#000; background:#fff url(../images/white.jpg) no-repeat top right; } .section ul{ list-style:none; margin:20px 0px 0px 550px; } .black ul li{ float:left; padding:5px; margin:5px; color:#aaa; } .black ul li a{ display:block; color:#f0f0f0; } .black ul li a:hover{ text-decoration:none; color:#fff; } .white ul li{ float:left; padding:5px; margin:5px; color:#aaa; } .white ul li a{ display:block; color:#222; } .white ul li a:hover{ text-decoration:none; color:#000; }
?实现水平方向的滚动效果 需要如下js代码
$(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); /* if you want to use one of the easing effects: $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1500,'easeInOutExpo'); */ $('html, body').stop().animate({ scrollLeft: $($anchor.attr('href')).offset().left }, 1000); event.preventDefault(); }); });
?实现竖直方向的滚动如下js代码
?
$(function() { $('ul.nav a').bind('click',function(event){ var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500,'easeInOutExpo'); /* if you don't want to use the easing effects: $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1000); */ event.preventDefault(); }); });
?
?在线演示网站 xianbar.com
?