以下是 jQuery描点定位全屏滚动切换代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>jQuery��㶨λȫ�������л�����</title>
<meta name="description" content="jquery section scrolling plugin"/>
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection" />
<link rel="stylesheet" type="text/css" href="css/prism.css">
<link rel="stylesheet" type="text/css" href="css/section-scroll.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="hero-unit scrollable-section" data-section-title="Welcome">
<div class="box-container">
<img src="images/logo.png" alt="logo">
</div>
</div>
<section class="scrollable-section what-is-this" data-section-title="What is this">
<div class="content-wrapper">
<div class="container">
<div class="row">
<div class="col s6" style="position: relative;">
<img src="images/plugin.png" alt="plugin">
</div>
</div>
</div>
</div>
</section>
<section class="scrollable-section" data-section-title="HTML">
<div class="container">
<h2>HTML</h2>
<br>
<h4>INCLUDE</h4>
<pre class="line-numbers language-markup"><code><!-- -----Styles----- -->
<link rel="stylesheet" type="text/css" href="css/section-scroll.css">
<!-- -----Scripts----- -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js">
<!-- This is optional, if you want to use easings then please include jquery.easing.1.3.js. See options -->
<!-- Get it here (Please buy him a beer) -->
<script type="text/javascript" src="js/jquery.easing.1.3.js">
<!-- Last but not least -->
<script type="text/javascript" src="js/jquery.section-scroll.js"></code></pre>
<br>
<br>
<h4>HTML</h4>
<pre class="line-numbers language-markup"><code><div class="scrollable-section" data-section-title="About Us"></div>
<div class="scrollable-section" data-section-title="Example"></div>
<div class="scrollable-section" data-section-title="Testimonials"></div></code></pre>
<br>
<pre><code>scrollable-section</code></pre> Assign this class to each section you want to use as part of the navigation.
<br>
<br>
<pre><code>data-section-title</code></pre> Plugin picks this attribute's value to use as each menu item's title, e.g. right now it says HTML in navigation.
</div>
</section>
<section class="scrollable-section" data-section-title="Call and Customize">
<div class="container">
<h2>Call and Customize</h2>
<br>
<h3>Call Him</h3>
<pre class="language-markup"><code><script type="text/javascript">
$(document).ready(function () {
$('body').sectionScroll(); // Easy Peasy Lemon Squeezy
})
</script></code></pre>
<br>
<h3>Defaults</h3>
<pre class="language-js"><code>bulletsClass: 'section-bullets',
sectionsClass: 'scrollable-section',
scrollDuration: 1000,
titles: true,
topOffset: 0,
easing: ''</code></pre>
<br>
<h3>Options</h3>
<table class="bordered responsive-table">
<thead>
<tr>
<th data-field="variable" style="min-width: 160px;">Variable</th>
<th data-field="type" style="min-width: 100px;">Type</th>
<th data-field="example" style="min-width: 230px;">Example</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre class="secondary-text">bulletsClass</pre></td>
<td>string</td>
<td><div class="chip">bulletsClass: 'my-class'</div></td>
<td><span> This will override plugin's default class of bullet navigation, you can change this incase if you have your own styling.</span></td>
</tr>
<tr>
<td><pre class="secondary-text">sectionsClass</pre></td>
<td>string</td>
<td><div class="chip">sectionsClass: 'my-sections'</div></td>
<td><span> If you define your own class then you will use <pre><code><div class="my-sections"></div></code></pre> plugin will no more look for 'scrollable-section' class it will look for your defined class and generate bullets.</span></td>
</tr>
<tr>
<td><pre class="secondary-text">scrollDuration</pre></td>
<td>int</td>
<td><div class="chip">scrollDuration: 3000</div></td>
<td><span> Time it takes to scroll from one section to the other</span></td>
</tr>
<tr>
<td><pre class="secondary-text">titles</pre></td>
<td>boolean</td>
<td><div class="chip">titles: false</div></td>
<td><span> Setting it to false will hide the titles from navigation</span></td>
</tr>
<tr>
<td><pre class="secondary-text">topOffset</pre></td>
<td>int</td>
<td><div class="chip">topOffset: 100</div></td>
<td><span> Setting topOffset to 100 will cause the section to scroll but keep 100px distance from the top of window</span></td>
</tr>
<tr>
<td><pre class="secondary-text">easing</pre></td>
<td>string</td>
<td><div class="chip">easing: 'easeInOutQuart'</div></td>
<td><span> By default plugin uses no easing effects and this example uses 'easeInOutQuart', if you want to use easings you have to include</span></td>
</tr>
</tbody>
</table>
<br>
<h3>Events</h3>
<table class="bordered responsive-table">
<thead>
<tr>
<th data-field="event" style="min-width: 160px;">Event</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre class="secondary-text">section-reached</pre></td>
<td><span> This event is called every time a section is scrolled into view.</span></td>
</tr>
</tbody>
</table>
<pre class="language-js"><code>$('body').on('section-reached', function(){
console.log('section-reached');
})
</code></pre>
<br>
<h3>More</h3>
Plugin also gives us access to active section through variable <pre><code>activeSection</code></pre>
For example we can do this:
<pre class="language-js"><code>$('body').on('section-reached', function(){
var section_title = $('body').sectionScroll.activeSection.data('section-title');
alert(section_title);
})</code></pre>
<br>
<br>
Let's suppose we have
<pre class="language-markup"><code><section class="scrollable-section" data-short-description="We love coding"></section>
</code></pre>
<br>
Now we can get short description and print that in our imaginary div
<pre class="language-js"><code>$('body').on('section-reached', function(){
var short_description = $('.body').sectionScroll.activeSection.data('short-description');
$('div').html(short_description);
$('body').sectionScroll.activeSection.css('background-color', '#000'); // Let's change background color of active section
})</code></pre>
</div>
</section>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/prism.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="js/jquery.section-scroll.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('body').sectionScroll({
easing: 'easeInOutQuart',
scrollDuration: 1200
});
$('body').on('section-reached', function() {
var section_title = $('body').sectionScroll.activeSection.data('section-title');
Materialize.toast('In view: ' + section_title, 1000);
})
})
</script>
</body>
</html>
JS代码(prism.js):
/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */
var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{
}
,Prism=function(){
var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=_self.Prism={
util:{
encode:function(e){
return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&
").replace(/</g,"<
").replace(/\u00a0/g," ")}
,type:function(e){
return Object.prototype.toString.call(e).match(/\[object (\w+)\]/)[1]}
,clone:function(e){
var n=t.util.type(e);
switch(n){
case"Object":var a={
}
;
for(var r in e)e.hasOwnProperty(r)&&(a[r]=t.util.clone(e[r]));
return a;
case"Array":return e.map&&e.map(function(e){
return t.util.clone(e)}
)}
return e}
}
,languages:{
extend:function(e,n){
var a=t.util.clone(t.languages[e]);
for(var r in n)a[r]=n[r];
return a}
,insertBefore:function(e,n,a,r){
r=r||t.languages;
var l=r[e];
if(2==arguments.length){
a=arguments[1];
for(var i in a)a.hasOwnProperty(i)&&(l[i]=a[i]);
return l}
var o={
}
;
for(var s in l)if(l.hasOwnProperty(s)){
if(s==n)for(var i in a)a.hasOwnProperty(i)&&(o[i]=a[i]);
o[s]=l[s]}
return t.languages.DFS(t.languages,function(t,n){
n===r[e]&&t!=e&&(this[t]=o)}
),r[e]=o}
,DFS:function(e,n,a,r){
r=r||{
}
;
for(var l in e)e.hasOwnProperty(l)&&(n.call(e,l,e[l],a||l),"Object"!==t.util.type(e[l])||r[e[l]]?"Array"!==t.util.type(e[l])||r[e[l]]||(r[e[l]]=!0,t.languages.DFS(e[l],n,l,r)):(r[e[l]]=!0,t.languages.DFS(e[l],n,null,r)))}
}
,plugins:{
}
,highlightAll:function(e,n){
for(var a,r=document.querySelectorAll('code[class*="language-"],[class*="language-"] code,code[class*="lang-"],[class*="lang-"] code'),l=0;
a=r[l++];
)t.highlightElement(a,e===!0,n)}
,highlightElement:function(n,a,r){
for(var l,i,o=n;
o&&!e.test(o.className);
)o=o.parentNode;
o&&(l=(o.className.match(e)||[,""])[1],i=t.languages[l]),n.className=n.className.replace(e,"").replace(/\s+/g," ")+" language-"+l,o=n.parentNode,/pre/i.test(o.nodeName)&&(o.className=o.className.replace(e,"").replace(/\s+/g," ")+" language-"+l);
var s=n.textContent,u={
element:n,language:l,grammar:i,code:s}
;
if(!s||!i)return t.hooks.run("complete",u),void 0;
if(t.hooks.run("before-highlight",u),a&&_self.Worker){
var g=new Worker(t.filename);
g.onmessage=function(e){
u.highlightedCode=e.data,t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(u.element),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)}
,g.postMessage(JSON.stringify({
language:u.language,code:u.code,immediateClose:!0}
))}
else u.highlightedCode=t.highlight(u.code,u.grammar,u.language),t.hooks.run("before-insert",u),u.element.innerHTML=u.highlightedCode,r&&r.call(n),t.hooks.run("after-highlight",u),t.hooks.run("complete",u)}
,highlight:function(e,a,r){
var l=t.tokenize(e,a);
return n.stringify(t.util.encode(l),r)}
,tokenize:function(e,n){
var a=t.Token,r=[e],l=n.rest;
if(l){
for(var i in l)n[i]=l[i];
delete n.rest}
e:for(var i in n)if(n.hasOwnProperty(i)&&n[i]){
var o=n[i];
o="Array"===t.util.type(o)?o:[o];
for(var s=0;
s<o.length;
++s){
var u=o[s],g=u.inside,c=!!u.lookbehind,f=0,h=u.alias;
u=u.pattern||u;
for(var p=0;
p<r.length;
p++){
var d=r[p];
if(r.length>e.length)break e;
if(!(d instanceof a)){
u.lastIndex=0;
var m=u.exec(d);
if(m){
c&&(f=m[1].length);
var y=m.index-1+f,m=m[0].slice(f),v=m.length,k=y+v,b=d.slice(0,y+1),w=d.slice(k+1),P=[p,1];
b&&P.push(b);
var A=new a(i,g?t.tokenize(m,g):m,h);
P.push(A),w&&P.push(w),Array.prototype.splice.apply(r,P)}
}
}
}
}
return r}
,hooks:{
all:{
}
,add:function(e,n){
var a=t.hooks.all;
a[e]=a[e]||[],a[e].push(n)}
,run:function(e,n){
var a=t.hooks.all[e];
if(a&&a.length)for(var r,l=0;
r=a[l++];
)r(n)}
}
}
,n=t.Token=function(e,t,n){
this.type=e,this.content=t,this.alias=n}
;
if(n.stringify=function(e,a,r){
if("string"==typeof e)return e;
if("Array"===t.util.type(e))return e.map(function(t){
return n.stringify(t,a,e)}
).join("");
var l={
type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{
}
,language:a,parent:r}
;
if("comment"==l.type&&(l.attributes.spellcheck="true"),e.alias){
var i="Array"===t.util.type(e.alias)?e.alias:[e.alias];
Array.prototype.push.apply(l.classes,i)}
t.hooks.run("wrap",l);
var o="";
for(var s in l.attributes)o+=(o?" ":"")+s+'="'+(l.attributes[s]||"")+'"';
return"<"+l.tag+' class="'+l.classes.join(" ")+'" '+o+">"+l.content+"</"+l.tag+">"}
,!_self.document)return _self.addEventListener?(_self.addEventListener("message",function(e){
var n=JSON.parse(e.data),a=n.language,r=n.code,l=n.immediateClose;
_self.postMessage(t.highlight(r,t.languages[a],a)),l&&_self.close()}
,!1),_self.Prism):_self.Prism;
var a=document.getElementsByTagName("script");
return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),_self.Prism}
();
"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
Prism.languages.markup={
comment:/<!--[\w\W]*?-->/,prolog:/<\?[\w\W]+?\?>/,doctype:/<!DOCTYPE[\w\W]+?>/,cdata:/<!\[CDATA\[[\w\W]*?]]>/i,tag:{
pattern:/<\/?(?!\d)[^\s>\/=.$<]+(?:\s+[^\s>\/=]+(?:=(?:("|')(?:\\\1|\\?(?!\1)[\w\W])*\1|[^\s'">=]+))?)*\s*\/?>/i,inside:{
tag:{
pattern:/^<\/?[^\s>\/]+/i,inside:{
punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}
}
,"attr-value":{
pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{
punctuation:/[=>"']/}
}
,punctuation:/\/?>/,"attr-name":{
pattern:/[^\s>\/]+/,inside:{
namespace:/^[^\s>\/:]+:/}
}
}
}
,entity:/&#?[\da-z]{
1,8}
;
/i}
,Prism.hooks.add("wrap",function(a){
"entity"===a.type&&(a.attributes.title=a.content.replace(/&
/,"&"))}
),Prism.languages.xml=Prism.languages.markup,Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup;
Prism.languages.css={
comment:/\/\*[\w\W]*?\*\//,atrule:{
pattern:/@[\w-]+?.*?(;
|(?=\s*\{
))/i,inside:{
rule:/@[\w-]+/}
}
,url:/url\((?:(["'])(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1|.*?)\)/i,selector:/[^\{
\}
\s][^\{
\}
;
]*?(?=\s*\{
)/,string:/("|')(\\(?:\r\n|[\w\W])|(?!\1)[^\\\r\n])*\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,"function":/[-a-z0-9]+(?=\()/i,punctuation:/[(){
}
;
:]/}
,Prism.languages.css.atrule.inside.rest=Prism.util.clone(Prism.languages.css),Prism.languages.markup&&(Prism.languages.insertBefore("markup","tag",{
style:{
pattern:/(<style[\w\W]*?>)[\w\W]*?(?=<\/style>)/i,lookbehind:!0,inside:Prism.languages.css,alias:"language-css"}
}
),Prism.languages.insertBefore("inside","attr-value",{
"style-attr":{
pattern:/\s*style=("|').*?\1/i,inside:{
"attr-name":{
pattern:/^\s*style/i,inside:Prism.languages.markup.tag.inside}
,punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{
pattern:/.+/i,inside:Prism.languages.css}
}
,alias:"language-css"}
}
,Prism.languages.markup.tag));
Prism.languages.clike={
comment:[{
pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0}
,{
pattern:/(^|[^\\:])\/\/.*/
,lookbehind:!0}
],string:/(["'])(\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,"class-name":{
pattern:/((?:\b(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{
punctuation:/(\.|\\)/}
}
,keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":/[a-z0-9_]+(?=\()/i,number:/\b-?(?:0x[\da-f]+|\d*\.?\d+(?:e[+-]?\d+)?)\b/i,operator:/--?|\+\+?|!=?=?|<=?|>=?|==?=?|&&?|\|\|?|\?|\*|\/|~|\^|%/,punctuation:/[{
}
[\];
(),.:]/}
;
Prism.languages.javascript=Prism.languages.extend("clike",{
keyword:/\b(as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|0b[01]+|0o[0-7]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|Infinity)\b/,"function":/[_$a-zA-Z\xA0-\uFFFF][_$a-zA-Z0-9\xA0-\uFFFF]*(?=\()/i}
),Prism.languages.insertBefore("javascript","keyword",{
regex:{
pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\\\r\n])+\/[gimyu]{
0,5}
(?=\s*($|[\r\n,.;
}
)]))/,lookbehind:!0}
}
),Prism.languages.insertBefore("javascript","class-name",{
"template-string":{
pattern:/`(?:\\`|\\?[^`])*`/,inside:{
interpolation:{
pattern:/\$\{
[^}
]+\}
/,inside:{
"interpolation-punctuation":{
pattern:/^\$\{
|\}
$/,alias:"punctuation"}
,rest:Prism.languages.javascript}
}
,string:/[\s\S]+/}
}
}
),Prism.languages.markup&&Prism.languages.insertBefore("markup","tag",{
script:{
pattern:/(<script[\w\W]*?>)[\w\W]*?(?=<\/script>)/i,lookbehind:!0,inside:Prism.languages.javascript,alias:"language-javascript"}
}
),Prism.languages.js=Prism.languages.javascript;
CSS代码(prism.css):
/* http://prismjs.com/download.html?themes=prism-twilight&languages=markup+css+clike+javascript */
/** * prism.js Twilight theme * Based (more or less) on the Twilight theme originally of Textmate fame. * @author Remy Bach */
code[class*="language-"],pre[class*="language-"]{color:white;direction:ltr;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;text-align:left;text-shadow:0 -.1em .2em black;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;}
pre[class*="language-"],:not(pre) > code[class*="language-"]{background:hsl(0,0%,8%);/* #141414 */
}
/* Code blocks */
pre[class*="language-"]{border-radius:.5em;border:.3em solid hsl(0,0%,33%);/* #282A2B */
box-shadow:1px 1px .5em black inset;margin:.5em 0;overflow:auto;padding:1em;}
pre[class*="language-"]::selection{/* Safari */
background:hsl(200,4%,16%);/* #282A2B */
}
pre[class*="language-"]::selection{/* Firefox */
background:hsl(200,4%,16%);/* #282A2B */
}
/* Text Selection colour */
pre[class*="language-"]::-moz-selection,pre[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection,code[class*="language-"]::-moz-selection{text-shadow:none;background:hsla(0,0%,93%,0.15);/* #EDEDED */
}
pre[class*="language-"]::selection,pre[class*="language-"]::selection,code[class*="language-"]::selection,code[class*="language-"]::selection{text-shadow:none;background:hsla(0,0%,93%,0.15);/* #EDEDED */
}
/* Inline code */
:not(pre) > code[class*="language-"]{border-radius:.3em;border:.13em solid hsl(0,0%,33%);/* #545454 */
box-shadow:1px 1px .3em -.1em black inset;padding:.15em .2em .05em;white-space:normal;}
.token.comment,.token.prolog,.token.doctype,.token.cdata{color:hsl(0,0%,47%);/* #777777 */
}
.token.punctuation{opacity:.7;}
.namespace{opacity:.7;}
.token.tag,.token.boolean,.token.number,.token.deleted{color:hsl(14,58%,55%);/* #CF6A4C */
}
.token.keyword,.token.property,.token.selector,.token.constant,.token.symbol,.token.builtin{color:hsl(53,89%,79%);/* #F9EE98 */
}
.token.attr-name,.token.attr-value,.token.string,.token.char,.token.operator,.token.entity,.token.url,.language-css .token.string,.style .token.string,.token.variable,.token.inserted{color:hsl(76,21%,52%);/* #8F9D6A */
}
.token.atrule{color:hsl(218,22%,55%);/* #7587A6 */
}
.token.regex,.token.important{color:hsl(42,75%,65%);/* #E9C062 */
}
.token.important,.token.bold{font-weight:bold;}
.token.italic{font-style:italic;}
.token.entity{cursor:help;}
pre[data-line]{padding:1em 0 1em 3em;position:relative;}
/* Markup */
.language-markup .token.tag,.language-markup .token.attr-name,.language-markup .token.punctuation{color:hsl(33,33%,52%);/* #AC885B */
}
/* Make the tokens sit above the line highlight so the colours don't look faded. */
.token{position:relative;z-index:1;}
.line-highlight{background:-moz-linear-gradient(left,hsla(0,0%,33%,.1) 70%,hsla(0,0%,33%,0));/* #545454 */
background:-o-linear-gradient(left,hsla(0,0%,33%,.1) 70%,hsla(0,0%,33%,0));/* #545454 */
background:-webkit-linear-gradient(left,hsla(0,0%,33%,.1) 70%,hsla(0,0%,33%,0));/* #545454 */
background:hsla(0,0%,33%,0.25);/* #545454 */
background:linear-gradient(left,hsla(0,0%,33%,.1) 70%,hsla(0,0%,33%,0));/* #545454 */
border-bottom:1px dashed hsl(0,0%,33%);/* #545454 */
border-top:1px dashed hsl(0,0%,33%);/* #545454 */
left:0;line-height:inherit;margin-top:0.75em;/* Same as .prism鈥檚 padding-top */
padding:inherit 0;pointer-events:none;position:absolute;right:0;white-space:pre;z-index:0;}
.line-highlight:before,.line-highlight[data-end]:after{background-color:hsl(215,15%,59%);/* #8794A6 */
border-radius:999px;box-shadow:0 1px white;color:hsl(24,20%,95%);/* #F5F2F0 */
content:attr(data-start);font:bold 65%/1.5 sans-serif;left:.6em;min-width:1em;padding:0 .5em;position:absolute;text-align:center;text-shadow:none;top:.4em;vertical-align:.3em;}
.line-highlight[data-end]:after{bottom:.4em;content:attr(data-end);top:auto;}
CSS代码(section-scroll.css):
.bullets-container{display:table;position:fixed;right:0;height:100%;z-index:1049;font-weight:normal;}
.section-bullets{transition-duration:.3s;list-style:none;margin:0;display:table-cell;vertical-align:middle;}
.section-bullets li{display:block;text-align:right;font-size:13px;text-transform:uppercase;line-height:1;position:relative;border-top-left-radius:30px;border-bottom-left-radius:30px;cursor:pointer;margin-bottom:1px;}
.section-bullets li a:before{content:' ';width:0;height:100%;background-color:#eee;position:absolute;right:0;top:0;border-top-left-radius:30px;border-bottom-left-radius:30px;transition-duration:.1s;}
.section-bullets li a:after{content:' ';width:6px;height:6px;border-radius:50%;background-color:#000;position:absolute;right:8px;top:8px;transition-duration:.2s;}
.section-bullets li a{color:#000;overflow:hidden;position:relative;display:inline-block;transition-duration:.3s;opacity:0.5;margin-left:5px;padding:5px 20px 5px 10px;text-decoration:none;min-height:11px;}
.section-bullets li span{position:relative;right:0;transition-duration:0.3s;opacity:0;}
.section-bullets li.active a{opacity:1;}
.section-bullets li.active a:before{width:100%;transition-duration:.3s;transition-delay:0.5s;}
.section-bullets li:hover a{opacity:1;}
.section-bullets li:hover span{opacity:1;transition-delay:0.1s;}
.section-bullets li.active span{opacity:1;transition-duration:.3s;transition-delay:0.6s;}
CSS代码(style.css):
body{font-family:'Open Sans',sans-serif;color:#5A5A5A;font-weight:400;font-size:18px;}
h1,h2,h3,h4,h5,h6{font-family:'Montserrat',sans-serif;font-weight:bolder;color:#444;}
.primary-btn{color:#056367;background-color:#fff;}
.hero-unit{height:100vh;width:100%;background:#ff9a7c;background:-moz-linear-gradient(top,#ff9a7c 0%,#3b6db7 77%);background:-webkit-linear-gradient(top,#ff9a7c 0%,#3b6db7 77%);background:linear-gradient(to bottom,#ff9a7c 0%,#3b6db7 77%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9a7c',endColorstr='#3b6db7',GradientType=0 );display:table;}
.box-container{width:556px;height:479px;text-align:center;margin:auto;position:relative;margin-top:8%;}
.primary-text{color:#ffd092;}
.secondary-text{color:#ff9a7c;font-size:21px;}
.primary-btn{background-color:#ffd092;}
.white-btn{background-color:#fff;color:#056367;}
table tbody tr:last-child{border-bottom:0;}
.button{position:absolute;right:0;left:0;bottom:73px;font-size:28px;color:#626262;border:3px solid #626262;display:inline-block;width:190px;margin:0 auto;border-radius:5px;font-family:'Montserrat',sans-serif;}
.button:hover{border-color:#ff9a7c;color:#ff9a7c;}
section{padding-top:30px;background:#F7F7F7;background:-moz-linear-gradient(top,#F7F7F7 0%,#fff 37%);background:-webkit-linear-gradient(top,#F7F7F7 0%,#fff 37%);background:linear-gradient(to bottom,#F7F7F7 0%,#fff 37%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F7F7F7',endColorstr='#fff',GradientType=0 );padding-bottom:30px;}
.what-is-this{background:#292929 !important;font-size:22px;min-height:100vh;display:table;width:100%;}
.content-wrapper{display:table-cell;vertical-align:middle;}
.what-is-this img{margin:0 auto;position:absolute;right:0;left:0;top:-69px;opacity:0.2;transition-duration:1s;}
.what-is-this img:hover{opacity:0.3;}
.highlight-text{background:#FFF;}
.gray-section{background:#F5F2F0;background:-moz-linear-gradient(top,#F5F2F0 0%,#fff 77%);background:-webkit-linear-gradient(top,#F5F2F0 0%,#fff 77%);background:linear-gradient(to bottom,#F5F2F0 0%,#fff 77%);filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#F5F2F0',endColorstr='#fff',GradientType=0 );}
分享到QQ
分享到微博
微信扫一扫
