以下是 14款不同效果的圆点切换特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>14款不同效果的圆点切换特效</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="css/component.css" />
</head>
<body>
<div class="wrap clearfix">
<div class="dotstyle dotstyle-fillup">
<h2>Fill up</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-scaleup">
<h2>Scale up</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-stroke">
<h2>Stroke</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-fillin">
<h2>Fill in</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-circlegrow">
<h2>Circle grow</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-dotstroke">
<h2>Dot stroke</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-drawcircle">
<h2>Draw circle</h2>
<ul>
<li class="current"><a href="#">Home</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">About</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Products</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Portfolio</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Blog</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
<li><a href="#">Contact</a><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 16 16"preserveAspectRatio="none"><circle cx="8" cy="8" r="6.215"/></svg></li>
</ul>
</div>
<div class="dotstyle dotstyle-smalldotstroke">
<h2>Small dot stroke</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-puff">
<h2>Puff</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-flip">
<h2>Flip</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-tooltip">
<h2>Tooltip</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-dotmove">
<h2>Dot move</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
<li><!-- dummy dot --></li>
</ul>
</div>
<div class="dotstyle dotstyle-hop">
<h2>Hop</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="dotstyle dotstyle-fall">
<h2>Fall</h2>
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/dots.js"></script>
<script type="text/javascript">
[].slice.call(document.querySelectorAll('.dotstyle > ul')).forEach(function(nav){
new DotNav(nav,{
callback : function(idx){
//console.log( idx )
}
});
});
</script>
</body>
</html>
JS代码(dots.js):
/** * menu.js v1.0.0 * http://www.codrops.com * * Licensed under the MIT license. * http://www.opensource.org/licenses/mit-license.php * * Copyright 2014,Codrops * http://www.codrops.com */
;
( function( window ){
'use strict';
function extend( a,b ){
for( var key in b ){
if( b.hasOwnProperty( key ) ){
a[key] = b[key];
}
}
return a;
}
function DotNav( el,options ){
this.nav = el;
this.options = extend({
}
,this.options );
extend( this.options,options );
this._init();
}
DotNav.prototype.options ={
}
;
DotNav.prototype._init = function(){
// special case "dotstyle-hop"var hop = this.nav.parentNode.className.indexOf( 'dotstyle-hop' ) !== -1;
var dots = [].slice.call( this.nav.querySelectorAll( 'li' ) ),current = 0,self = this;
dots.forEach( function( dot,idx ){
dot.addEventListener( 'click',function( ev ){
ev.preventDefault();
if( idx !== current ){
dots[ current ].className = '';
// special caseif( hop && idx < current ){
dot.className += ' current-from-right';
}
setTimeout( function(){
dot.className += ' current';
current = idx;
if( typeof self.options.callback === 'function' ){
self.options.callback( current );
}
}
,25 );
}
}
);
}
);
}
// add to global namespacewindow.DotNav = DotNav;
}
)( window );
CSS代码(demo.css):
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
body{background:#fff;color:#777;font-weight:400;font-size:1em;font-family:'Lato',Arial,sans-serif;}
.clearfix:before,.clearfix:after{content:'';display:table;}
.clearfix:after{clear:both;}
a{color:#f4726d;text-decoration:none;outline:none;}
a:hover,a:focus{color:#c44d48;}
.codrops-header{margin:0 auto;padding:4.5em 2em;text-align:center;}
.codrops-header h1{margin:0;font-weight:300;font-size:2.5em;line-height:1.3;}
.codrops-header h1 span{display:block;padding:0 0 0.6em 0.1em;font-size:60%;opacity:0.7;}
/* To Navigation Style */
.codrops-top{width:100%;text-transform:uppercase;font-weight:700;font-size:0.69em;line-height:2.2;background:#fff;}
.codrops-top a{display:inline-block;padding:0 1em;text-decoration:none;letter-spacing:1px;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{display:block;float:left;}
.codrops-icon:before{margin:0 4px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'codropsicons';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
.related{text-align:center;font-size:1.25em;padding:3em 0;overflow:hidden;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;color:#777;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;}
.related a h3{font-weight:300;margin:0;padding:0.3em 0;}
.wrap{background-color:#f4726d}
.wrap > div{float:left;overflow:hidden;padding:0 0 8em;height:275px;width:50%;text-align:center;}
.wrap > div h2{text-transform:uppercase;letter-spacing:1px;margin:0;padding:4em 0 5em;font-size:0.85em;color:#c44d48;}
.dotstyle:nth-child(4n),.dotstyle:nth-child(4n-3){background-color:rgba(0,0,0,0.05);}
@media screen and (max-width:42em){.wrap > div{float:none;width:100%;}
.dotstyle:nth-child(4n),.dotstyle:nth-child(4n-3){background-color:rgba(0,0,0,0);}
.dotstyle:nth-child(odd){background-color:rgba(0,0,0,0.05);}
}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
.codrops-icon:before{font-size:160%;line-height:2;}
}
分享到QQ
分享到微博
微信扫一扫
