以下是 jquery旋转木马插件TikslusCarousel特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE HTML>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--><html class="no-js"><!--<![endif]-->
<head>
<title>Tikslus carousel examples</title>
<script src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/tiksluscarousel.js"></script>
<script type="text/javascript" src="js/rainbow.min.js"></script>
<link rel="stylesheet" href="css/normalize.css" />
<link rel="stylesheet" href="css/tiksluscarousel.css" />
<link rel="stylesheet" href="css/github.css" />
<link rel="stylesheet" href="css/animate.css" />
<style>
body{
padding:20px;
}
#wrapper{
margin:auto;
width:80%;
}
a{
text-decoration:none;
color: cornflowerblue;
}
a:hover{
text-decoration:underline;
}
#fruits{
border:10px solid #000;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="fruits">
<ul>
<li><img src="images/fruits1.jpg" /></li>
<li><img src="images/fruits2.jpg" /></li>
<li><img src="images/fruits3.jpg" /></li>
<li><img src="images/fruits4.jpg" /></li>
<li><img src="images/fruits5.jpg" /></li>
<li><img src="images/fruits6.jpg" /></li>
<li><img src="images/fruits7.jpg" /></li>
<li><img src="images/fruits8.jpg" /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#fruits").tiksluscarousel({width:640,height:480,nav:'thumbnails',current:1,type:'zoom'});
});
</script>
<h4 class="heading">Example 1 - custom width and height</h4>
<p>HTML</p>
<PRE>
<code data-language="html">
<div id="example1">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4.jpg" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
</ul>
</div>
</code>
</PRE>
<p>Javascript</p>
<pre>
<code data-language="javascript">
$(document).ready(function(){
$("#example1").tiksluscarouse({width:640,height:480});
});
</code>
</pre>
<!--code implementation -->
<div id="carousel1">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4.jpg" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4.jpg" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4.jpg" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4.jpg" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#carousel1").tiksluscarousel({width:640,height:480,nav:'thumbnails',type:"slide"});
});
</script>
<h4 class="heading">Example 2 - CSS3 animation using animate.css</h4>
<p>HTML</p>
<PRE>
<code data-language="html">
<div id="example2">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
</ul>
</div>
</code>
</PRE>
<p>Javascript</p>
<pre>
<code data-language="javascript">
$(document).ready(function(){
$("#example2").tiksluscarouse({width:640,height:480,customAnimationClassIn:'bounceIn',customAnimationClassOut:'bounceOut',type:'custom'});
});
</code>
</pre>
<!--code implementation -->
<div id="carousel2">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4.jpg" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#carousel2").tiksluscarousel({width:640,height:480,customAnimationClassIn:'bounceIn',customAnimationClassOut:'bounceOut',type:'custom'});
});
</script>
<h4 class="heading">Example 3 - Adding Captions</h4>
<p>HTML</p>
<PRE>
<code data-language="html">
<div id="example3">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li> </ul>
</div>
</code>
</PRE>
<p>Javascript</p>
<pre>
<code data-language="javascript">
$(document).ready(function(){
$("#example3").tiksluscarouse({width:640,height:480});
});
</code>
</pre>
<!--code implementation -->
<div id="carousel3">
<ul>
<li><img src="images/disney1.jpg" caption="The Walt Disney Cartoon Picture Birds With Flying Elephant and enjoy the flying" /></li>
<li><img src="images/disney2.jpg" caption="The Walt Disney Cartoon Elephant Landing in the village." /></li>
<li><img src="images/disney3.jpg" caption="The Walt Disney Cartoon Elephant and Mouse Playing with bubbles." /></li>
<li><img src="images/disney4.jpg" caption="The Walt Disney Cartoon Donald Duck at Daisy home." /></li>
<li><img src="images/disney5.jpg" caption="The Walt Disney Cartoon Micky Mouse and Pluto."/></li>
<li><img src="images/disney6.jpg" caption="The Walt Disney Cartoon Micky, Minny and Guffy." /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#carousel3").tiksluscarousel({width:640,height:480});
});
</script>
<h4 class="heading">Example 4 - Rotating images</h4>
<p>HTML</p>
<PRE>
<code data-language="html">
<div id="example4">
<ul>
<li><img src="images/s1.jpg" /></li>
<li><img src="images/s2.jpg" /></li>
<li><img src="images/s3.jpg" /></li>
<li><img src="images/s4.jpg" /></li>
<li><img src="images/s5.jpg" /></li>
<li><img src="images/s6.jpg" /></li>
</ul>
</div>
</code>
</PRE>
<p>Javascript</p>
<pre>
<code data-language="javascript">
$(document).ready(function(){
$("#example4").tiksluscarouse({width:259,height:194,type:'rotate'});
});
</code>
</pre>
<!--code implementation -->
<div id="carousel4">
<ul>
<li><img src="images/s1.jpg" /></li>
<li><img src="images/s2.jpg" /></li>
<li><img src="images/s3.jpg" /></li>
<li><img src="images/s4" /></li>
<li><img src="images/s5.jpg" /></li>
<li><img src="images/s6.jpg" /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#carousel4").tiksluscarousel({width:259,height:194,type:'rotate'});
});
</script>
<h4 class="heading">Example 5 - Animating Captions</h4>
<p>HTML</p>
<PRE>
<code data-language="html">
<div id="example5">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li> </ul>
</div>
</code>
</PRE>
<p>Javascript</p>
<pre>
<code data-language="javascript">
$(document).ready(function(){
$("#example5").tiksluscarouse({width:640,height:480,customAnimationCaption:'bounceIn'});
});
</code>
</pre>
<!--code implementation -->
<div id="carousel5">
<ul>
<li><img src="images/disney1.jpg" caption="The Walt Disney Cartoon Picture Birds With Flying Elephant and enjoy the flying" /></li>
<li><img src="images/disney2.jpg" caption="The Walt Disney Cartoon Elephant Landing in the village." /></li>
<li><img src="images/disney3.jpg" caption="The Walt Disney Cartoon Elephant and Mouse Playing with bubbles." /></li>
<li><img src="images/disney4.jpg" caption="The Walt Disney Cartoon Donald Duck at Daisy home." /></li>
<li><img src="images/disney5.jpg" caption="The Walt Disney Cartoon Micky Mouse and Pluto."/></li>
<li><img src="images/disney6.jpg" caption="The Walt Disney Cartoon Micky, Minny and Guffy." /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#carousel5").tiksluscarousel({width:640,height:480,customAnimationCaption:'bounceIn'});
});
</script>
<h4 class="heading">Example 6 - full screen (do not specify width and height)</h4>
<p>HTML</p>
<PRE>
<code data-language="html">
<div id="example6">
<ul>
<li><img src="images/disney1.jpg" /></li>
<li><img src="images/disney2.jpg" /></li>
<li><img src="images/disney3.jpg" /></li>
<li><img src="images/disney4" /></li>
<li><img src="images/disney5.jpg" /></li>
<li><img src="images/disney6.jpg" /></li> </ul>
</div>
</code>
</PRE>
<p>Javascript</p>
<pre>
<code data-language="javascript">
$(document).ready(function(){
$("#example6").tiksluscarouse();
});
</code>
</pre>
<!--code implementation -->
<div id="carousel6">
<ul>
<li><img src="images/disney1.jpg" caption="The Walt Disney Cartoon Picture Birds With Flying Elephant and enjoy the flying" /></li>
<li><img src="images/disney2.jpg" caption="The Walt Disney Cartoon Elephant Landing in the village." /></li>
<li><img src="images/disney3.jpg" caption="The Walt Disney Cartoon Elephant and Mouse Playing with bubbles." /></li>
<li><img src="images/disney4.jpg" caption="The Walt Disney Cartoon Donald Duck at Daisy home." /></li>
<li><img src="images/disney5.jpg" caption="The Walt Disney Cartoon Micky Mouse and Pluto."/></li>
<li><img src="images/disney6.jpg" caption="The Walt Disney Cartoon Micky, Minny and Guffy." /></li>
</ul>
</div>
<script language="javascript">
$(document).ready(function(){
$("#carousel6").tiksluscarousel({nav:'thumbnails'});
});
</script>
</div>
</body>
</html>
JS代码(rainbow.min.js):
/* Rainbow v1.2 rainbowco.de | included languages:generic,javascript,php,html,css */
window.Rainbow=function(){
function A(a){
var b=a.getAttribute("data-language")||a.parentNode.getAttribute("data-language");
if(!b){
var c=/\blang(?:uage)?-(\w+)/;
(a=a.className.match(c)||a.parentNode.className.match(c))&&(b=a[1])}
return b}
function B(a,b){
for(var c in f[d]){
c=parseInt(c,10);
if(a==c&&b==f[d][c]?0:a<=c&&b>=f[d][c])delete f[d][c],delete j[d][c];
if(a>=c&&a<f[d][c]||b>c&&b<f[d][c])return!0}
return!1}
function q(a,b){
return'<span class="'+a.replace(/\./g," ")+(l?" "+l:"")+'">'+b+"</span>"}
function r(a,b,c,i){
if("undefined"===typeof a||null===a)i();
else{
var e=a.exec(c);
if(e){
++s;
!b.name&&"string"==typeof b.matches[0]&&(b.name=b.matches[0],delete b.matches[0]);
var k=e[0],g=e.index,t=e[0].length+g,h=function(){
function e(){
r(a,b,c,i)}
s%100>0?e():setTimeout(e,0)}
;
if(B(g,t))h();
else{
var m=u(b.matches),l=function(a,c,i){
if(a>=c.length)i(k);
else{
var d=e[c[a]];
if(d){
var g=b.matches[c[a]],f=g.language,h=g.name&&g.matches?g.matches:g,j=function(b,d,g){
var f;
f=0;
var h;
for(h=1;
h<c[a];
++h)e[h]&&(f=f+e[h].length);
d=g?q(g,d):d;
k=k.substr(0,f)+k.substr(f).replace(b,d);
l(++a,c,i)}
;
f?n(d,f,function(a){
j(d,a)}
):typeof g==="string"?j(d,d,g):v(d,h.length?h:[h],function(a){
j(d,a,g.matches?g.name:0)}
)}
else l(++a,c,i)}
}
;
l(0,m,function(a){
b.name&&(a=q(b.name,a));
if(!j[d]){
j[d]={
}
;
f[d]={
}
}
j[d][g]={
replace:e[0],"with":a}
;
f[d][g]=t;
h()}
)}
}
else i()}
}
function u(a){
var b=[],c;
for(c in a)a.hasOwnProperty(c)&&b.push(c);
return b.sort(function(a,c){
return c-a}
)}
function v(a,b,c){
function i(b,k){
k<b.length?r(b[k].pattern,b[k],a,function(){
i(b,++k)}
):C(a,function(a){
delete j[d];
delete f[d];
--d;
c(a)}
)}
++d;
i(b,0)}
function C(a,b){
function c(a,b,i,f){
if(i<b.length){
++w;
var h=b[i],l=j[d][h],a=a.substr(0,h)+a.substr(h).replace(l.replace,l["with"]),h=function(){
c(a,b,++i,f)}
;
0<w%250?h():setTimeout(h,0)}
else f(a)}
var i=u(j[d]);
c(a,i,0,b)}
function n(a,b,c){
var d=m[b]||[],e=m[x]||[],b=y[b]?d:d.concat(e);
v(a.replace(/</g,"<
").replace(/>/g,">
").replace(/&(?![\w\#]+;
)/g,"&
"),b,c)}
function o(a,b,c){
if(b<a.length){
var d=a[b],e=A(d);
return!(-1<(" "+d.className+" ").indexOf(" rainbow "))&&e?(e=e.toLowerCase(),d.className+=d.className?" rainbow":"rainbow",n(d.innerHTML,e,function(k){
d.innerHTML=k;
j={
}
;
f={
}
;
p&&p(d,e);
setTimeout(function(){
o(a,++b,c)}
,0)}
)):o(a,++b,c)}
c&&c()}
function z(a,b){
var a=a&&"function"==typeof a.getElementsByTagName?a:document,c=a.getElementsByTagName("pre"),d=a.getElementsByTagName("code"),e,f=[],g=[];
for(e=0;
e<c.length;
++e)c[e].getElementsByTagName("code").length?c[e].innerHTML=c[e].innerHTML.replace(/^\s+/,"").replace(/\s+$/,""):f.push(c[e]);
for(e=0;
e<d.length;
++e)g.push(d[e]);
o(g.concat(f),0,b)}
var j={
}
,f={
}
,m={
}
,y={
}
,d=0,x=0,s=0,w=0,l,p;
return{
extend:function(a,b,c){
1==arguments.length&&(b=a,a=x);
y[a]=c;
m[a]=b.concat(m[a]||[])}
,b:function(a){
p=a}
,a:function(a){
l=a}
,color:function(a,b,c){
if("string"==typeof a)return n(a,b,c);
if("function"==typeof a)return z(0,a);
z(a,b)}
}
}
();
document.addEventListener&&document.addEventListener("DOMContentLoaded",Rainbow.color,!1);
Rainbow.onHighlight=Rainbow.b;
Rainbow.addClass=Rainbow.a;
Rainbow.extend([{
matches:{
1:[{
name:"keyword.operator",pattern:/\=|\+/g}
,{
name:"keyword.dot",pattern:/\./g}
],2:{
name:"string",matches:{
name:"constant.character.escape",pattern:/\\('|"){
1}
/g}
}
}
,pattern:/(\(|\s|\[|\=|:|\+|\.)(('|")([^\\\1]|\\.)*?(\3))/gm}
,{
name:"comment",pattern:/\/\*[\s\S]*?\*\/|(\/\/|\#)[\s\S]*?$/gm}
,{
name:"constant.numeric",pattern:/\b(\d+(\.\d+)?(e(\+|\-)?\d+)?(f|d)?|0x[\da-f]+)\b/gi}
,{
matches:{
1:"keyword"}
,pattern:/\b(and|array|as|b(ool(ean)?|reak)|c(ase|atch|har|lass|on(st|tinue))|d(ef|elete|o(uble)?)|e(cho|lse(if)?|xit|xtends|xcept)|f(inally|loat|or(each)?|unction)|global|if|import|int(eger)?|long|new|object|or|pr(int|ivate|otected)|public|return|self|st(ring|ruct|atic)|switch|th(en|is|row)|try|(un)?signed|var|void|while)(?=\(|\b)/gi}
,{
name:"constant.language",pattern:/true|false|null/g}
,{
name:"keyword.operator",pattern:/\+|\!|\-|&(gt|lt|amp);
|\||\*|\=/g}
,{
matches:{
1:"function.call"}
,pattern:/(\w+?)(?=\()/g}
,{
matches:{
1:"storage.function",2:"entity.name.function"}
,pattern:/(function)\s(.*?)(?=\()/g}
]);
Rainbow.extend("javascript",[{
name:"selector",pattern:/(\s|^)\$(?=\.|\()/g}
,{
name:"support",pattern:/\b(window|document)\b/g}
,{
matches:{
1:"support.property"}
,pattern:/\.(length|node(Name|Value))\b/g}
,{
matches:{
1:"support.function"}
,pattern:/(setTimeout|setInterval)(?=\()/g}
,{
matches:{
1:"support.method"}
,pattern:/\.(getAttribute|push|getElementById|getElementsByClassName|log|setTimeout|setInterval)(?=\()/g}
,{
name:"string.regexp",matches:{
1:"string.regexp.open",2:{
name:"constant.regexp.escape",pattern:/\\(.){
1}
/g}
,3:"string.regexp.close",4:"string.regexp.modifier"}
,pattern:/(\/)(?!\*)(.+)(\/)([igm]{
0,3}
)/g}
,{
matches:{
1:"storage",3:"entity.function"}
,pattern:/(var)?(\s|^)(\S*)(?=\s?=\s?function\()/g}
,{
matches:{
1:"keyword",2:"entity.function"}
,pattern:/(new)\s+(.*)(?=\()/g}
,{
name:"entity.function",pattern:/(\w+)(?=:\s{
0,}
function)/g}
]);
Rainbow.extend("php",[{
name:"support",pattern:/\becho\b/g}
,{
matches:{
1:"variable.dollar-sign",2:"variable"}
,pattern:/(\$)(\w+)\b/g}
,{
name:"constant.language",pattern:/true|false|null/ig}
,{
name:"constant",pattern:/\b[A-Z0-9_]{
2,}
\b/g}
,{
name:"keyword.dot",pattern:/\./g}
,{
name:"keyword",pattern:/\b(die|end(for(each)?|switch|if)|case|require(_once)?|include(_once)?)(?=\(|\b)/g}
,{
matches:{
1:"keyword",2:{
name:"support.class",pattern:/\w+/g}
}
,pattern:/(instanceof)\s([^\$].*?)(\)|;
)/g}
,{
matches:{
1:"support.function"}
,pattern:/\b(array(_key_exists|_merge|_keys|_shift)?|isset|count|empty|unset|printf|is_(array|string|numeric|object)|sprintf|each|date|time|substr|pos|str(len|pos|tolower|_replace|totime)?|ord|trim|in_array|implode|end|preg_match|explode|fmod|define|link|list|get_class|serialize|file|sort|mail|dir|idate|log|intval|header|chr|function_exists|dirname|preg_replace|file_exists)(?=\()/g}
,{
name:"variable.language.php-tag",pattern:/(<
\?(php)?|\?>
)/g}
,{
matches:{
1:"keyword.namespace",2:{
name:"support.namespace",pattern:/\w+/g}
}
,pattern:/\b(namespace|use)\s(.*?);
/g}
,{
matches:{
1:"storage.modifier",2:"storage.class",3:"entity.name.class",4:"storage.modifier.extends",5:"entity.other.inherited-class",6:"storage.modifier.extends",7:"entity.other.inherited-class"}
,pattern:/\b(abstract|final)?\s?(class|interface|trait)\s(\w+)(\sextends\s)?([\w\\]*)?(\simplements\s)?([\w\\]*)?\s?\{
?(\n|\}
)/g}
,{
name:"keyword.static",pattern:/self::|static::/g}
,{
matches:{
1:"storage.function",2:"support.magic"}
,pattern:/(function)\s(__.*?)(?=\()/g}
,{
matches:{
1:"keyword.new",2:{
name:"support.class",pattern:/\w+/g}
}
,pattern:/\b(new)\s([^\$].*?)(?=\)|\(|;
)/g}
,{
matches:{
1:{
name:"support.class",pattern:/\w+/g}
,2:"keyword.static"}
,pattern:/([\w\\]*?)(::)(?=\b|\$)/g}
,{
matches:{
2:{
name:"support.class",pattern:/\w+/g}
}
,pattern:/(\(|,\s?)([\w\\]*?)(?=\s\$)/g}
]);
Rainbow.extend("html",[{
name:"source.php.embedded",matches:{
2:{
language:"php"}
}
,pattern:/<
\?=?(?!xml)(php)?([\s\S]*?)(\?>
)/gm}
,{
name:"source.css.embedded",matches:{
1:{
matches:{
1:"support.tag.style",2:[{
name:"entity.tag.style",pattern:/^style/g}
,{
name:"string",pattern:/('|")(.*?)(\1)/g}
,{
name:"entity.tag.style.attribute",pattern:/(\w+)/g}
],3:"support.tag.style"}
,pattern:/(<
\/?)(style.*?)(>
)/g}
,2:{
language:"css"}
,3:"support.tag.style",4:"entity.tag.style",5:"support.tag.style"}
,pattern:/(<
style.*?>
)([\s\S]*?)(<
\/)(style)(>
)/gm}
,{
name:"source.js.embedded",matches:{
1:{
matches:{
1:"support.tag.script",2:[{
name:"entity.tag.script",pattern:/^script/g}
,{
name:"string",pattern:/('|")(.*?)(\1)/g}
,{
name:"entity.tag.script.attribute",pattern:/(\w+)/g}
],3:"support.tag.script"}
,pattern:/(<
\/?)(script.*?)(>
)/g}
,2:{
language:"javascript"}
,3:"support.tag.script",4:"entity.tag.script",5:"support.tag.script"}
,pattern:/(<
script(?! src).*?>
)([\s\S]*?)(<
\/)(script)(>
)/gm}
,{
name:"comment.html",pattern:/<
\!--[\S\s]*?-->
/g}
,{
matches:{
1:"support.tag.open",2:"support.tag.close"}
,pattern:/(<
)|(\/?\??>
)/g}
,{
name:"support.tag",matches:{
1:"support.tag",2:"support.tag.special",3:"support.tag-name"}
,pattern:/(<
\??)(\/|\!?)(\w+)/g}
,{
matches:{
1:"support.attribute"}
,pattern:/([a-z-]+)(?=\=)/gi}
,{
matches:{
1:"support.operator",2:"string.quote",3:"string.value",4:"string.quote"}
,pattern:/(=)('|")(.*?)(\2)/g}
,{
matches:{
1:"support.operator",2:"support.value"}
,pattern:/(=)([a-zA-Z\-0-9]*)\b/g}
,{
matches:{
1:"support.attribute"}
,pattern:/\s(\w+)(?=\s|>
)(?![\s\S]*<
)/g}
],!0);
Rainbow.extend("css",[{
name:"comment",pattern:/\/\*[\s\S]*?\*\//gm}
,{
name:"constant.hex-color",pattern:/#([a-f0-9]{
3}
|[a-f0-9]{
6}
)(?=;
|\s|,|\))/gi}
,{
matches:{
1:"constant.numeric",2:"keyword.unit"}
,pattern:/(\d+)(px|em|cm|s|%)?/g}
,{
name:"string",pattern:/('|")(.*?)\1/g}
,{
name:"support.css-property",matches:{
1:"support.vendor-prefix"}
,pattern:/(-o-|-moz-|-webkit-|-ms-)?[\w-]+(?=\s?:)(?!.*\{
)/g}
,{
matches:{
1:[{
name:"entity.name.sass",pattern:/&
/g}
,{
name:"direct-descendant",pattern:/>
/g}
,{
name:"entity.name.class",pattern:/\.[\w\-_]+/g}
,{
name:"entity.name.id",pattern:/\#[\w\-_]+/g}
,{
name:"entity.name.pseudo",pattern:/:[\w\-_]+/g}
,{
name:"entity.name.tag",pattern:/\w+/g}
]}
,pattern:/([\w\,\n:\.\#\&\;
\-_]+)(?=.*\{
)/g}
,{
matches:{
2:"support.vendor-prefix",3:"support.css-value"}
,pattern:/(:|,)\s*(-o-|-moz-|-webkit-|-ms-)?([a-zA-Z-]*)(?=\b)(?!.*\{
)/g}
],!0);
CSS代码(github.css):
/** * GitHub theme * * @author Craig Campbell * @version 1.0.4 */
pre{border:1px solid #ccc;word-wrap:break-word;padding:6px 10px;line-height:19px;margin-bottom:20px;}
code{border:1px solid #eaeaea;margin:0px 2px;padding:0px 5px;font-size:12px;}
pre code{border:0px;padding:0px;margin:0px;-moz-border-radius:0px;-webkit-border-radius:0px;border-radius:0px;}
pre,code{font-family:Consolas,'Liberation Mono',Courier,monospace;color:#333;background:#EFF0EE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}
pre,pre code{font-size:13px;}
pre .comment{color:#998;}
pre .support{color:#0086B3;}
pre .tag,pre .tag-name{color:navy;}
pre .keyword,pre .css-property,pre .vendor-prefix,pre .sass,pre .class,pre .id,pre .css-value,pre .entity.function,pre .storage.function{font-weight:bold;}
pre .css-property,pre .css-value,pre .vendor-prefix,pre .support.namespace{color:#333;}
pre .constant.numeric,pre .keyword.unit,pre .hex-color{font-weight:normal;color:#099;}
pre .entity.class{color:#458;}
pre .entity.id,pre .entity.function{color:#900;}
pre .attribute,pre .variable{color:teal;}
pre .string,pre .support.value{font-weight:normal;color:#d14;}
pre .regexp{color:#009926;}
CSS代码(tiksluscarousel.css):
.tiksluscarousel{position:relative;overflow:hidden;display:block;}
.tiksluscarousel ul.carousel{list-style:none;padding:0;margin:0;left:0px;position:relative;overflow:hidden;}
.tiksluscarousel ul li{float:left;overflow:hidden;}
.tiksluscarousel .slider_nav{position:absolute;z-index:5000;bottom:1%;}
.tiksluscarousel .slider_nav div.nav{float:left;margin:5px;width:0.7em;height:0.7em;background-color:#000;border-radius:50%;border:1px solid #fff;opacity:0.5;cursor:pointer;z-index:95400;}
.tiksluscarousel .slider_nav .selected{background-color:#fff !important;border:1px solid #000 !important;}
.tiksluscarousel .slider_nav div.nav:hover{background-color:#fff;border:1px solid #000;}
.tiksluscarousel .nav_left{position:absolute;width:27px;height:27px;background-color:#000;opacity:.5;text-align:center;font-size:1em;border-radius:12px;cursor:pointer;z-index:95400;top:45%;left:1%;}
.tiksluscarousel .nav_left span,.tiksluscarousel .nav_right span{font-size:1em;color:#fff;font-weight:bold;text-align:center;}
.tiksluscarousel .nav_right{position:absolute;width:27px;height:27px;background-color:#000;opacity:.5;text-align:center;font-size:1em;border-radius:12px;cursor:pointer;right:1%;top:45%;}
#tslide1{position:relative;/* max-width:640px;*/
height:auto;}
.tslider{/* width:auto;max-width:100%;height:auto;max-height:100%;*/
}
.tiksluscarousel .caption{position:absolute;bottom:2.3em;background-color:#000;opacity:0.5;font-size:1.2em;color:#fff;padding:0.6em;margin:auto;display:none;}
.tiksluscarousel ul li img{/* max-width:640px;*/
height:auto;width:100%;}
.thumbnails_wrapper{width:100%;display:block;position:relative;float:left;background-color:#000;overflow:hidden;}
.thumbnails_wrapper .thumbnails{list-style:none;padding:0;margin:0;}
.thumbnails_wrapper .thumbnails li.thumb{float:left;display:block;margin:1px;}
.thumbnails_wrapper .thumbnails li.thumb a{display:block;opacity:0.8;}
.thumbnails_wrapper .thumbnails li.thumb a:hover{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);opacity:1;}
.thumbnails_wrapper .thumbnails li img{max-width:100%;display:block;height:auto;}
.matrix{width:100%;height:100%;}
.block{position:absolute;z-index:95000;}
.responsive_img{max-width:100%;height:auto;display:block;}
.volunteer{position:absolute;top:0;left:0;display:block;}
.responsive_img{max-width:100%;height:auto;display:block;}
.rotate{-webkit-animation:roate 4.6523s 1 ease;-moz-animation:roate 4.6523s 1 ease;-o-animation:roate 4.6523s 1 ease;}
@-webkit-keyframes roate{from{-webkit-transform:rotate(0deg) scale(1) skew(1deg) translate(0px);}
to{-webkit-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);}
}
@-moz-keyframes roate{from{-moz-transform:rotate(0deg) scale(1) skew(1deg) translate(0px);}
to{-moz-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);}
}
@-o-keyframes roate{from{-o-transform:rotate(0deg) scale(1) skew(1deg) translate(0px);}
to{-o-transform:rotate(360deg) scale(1) skew(1deg) translate(0px);}
}
.scale{-webkit-animation:scale 2s 1 ease;-moz-animation:scale 1s 1 ease;-o-animation:scale 1s 1 ease;}
@-webkit-keyframes scale{from{-webkit-transform:scale(0);}
to{-webkit-transform:scale(1);}
}
@-moz-keyframes scale{from{-moz-transform:scale(0);}
to{-moz-transform:scale(1);}
}
@-o-keyframes scale{from{-o-transform:scale(0);}
to{-o-transform:scale(1);}
}
.translate{-webkit-animation:translate 1s 1 ease;-moz-animation:translate 1s 1 ease;-o-animation:translate 1s 1 ease;}
@-webkit-keyframes translate{from{-webkit-transform:scale(0.5) rotate(0deg) translate(100%);}
to{-webkit-transform:scale(1) rotate(360deg) translate(0%);}
}
@-moz-keyframes translate{from{-moz-transform:scale(0.5) translate(100%);}
to{-moz-transform:scale(1) translate(0%);}
}
@-o-keyframes translate{from{-o-transform:scale(0.5) translate(100%);}
to{-o-transform:scale(1) translate(0%);}
}
.op{position:absolute;top:1%;right:1%;background-color:#fff;opacity:0.8;margin:1em;display:none;z-index:95400;}
.op ul{list-style:none;margin:0;padding:0;}
.op ul li{float:left;padding:0.2em;margin:0.2em;border:1px solid #04AEDA;margin:0.3em;}
.op a{display:block;width:2em;height:2em;max-width:100%;z-index:50000;}
.op .stats{color:#00A9EC;background-color:#fff;padding:0.8em;font-size:0.8em;text-align:center;}
.op .fullscreenbutton{background-image:url('fullscreen.png');background-repeat:no-repeat;background-position:center;}
.op .exit_fullscreenbutton{background-image:url('fullscreen_exit.png');background-repeat:no-repeat;background-position:center;}
.op .pausebutton{background-image:url('pause.png');background-repeat:no-repeat;background-position:center;}
.op .resumebutton{background-image:url('resume.png');background-repeat:no-repeat;background-position:center;}
:-webkit-full-screen{background-color:#000;}
:-moz-full-screen{background-color:#000;}
:-ms-fullscreen{background-color:#000;}
:fullscreen{background-color:#000;}
.fullscreen{width:100% !important;height:auto;max-width:100% !important;}
.fullscreen_thumbnails{position:absolute;bottom:0;}
.navIcons{width:15% !important;height:15% !important;opacity:0.8 !important;background-color:#000;-webkit-border-radius:1em !important;-moz-border-radius:1em !important;border-radius:1em !important;top:30% !important;padding:0.2%;}
.navIcons img{/*border-radius:50% !important;*/
width:100% !important;height:100% !important;-webkit-border-radius:1em !important;-moz-border-radius:1em !important;border-radius:1em !important;}
.tiksluscarousel .navIcons_prev{left:-20px;}
.tiksluscarousel .navIcons_next{right:-20px;}
.tiksluscarousel .progress{position:absolute;top:0;left:0;height:1%;background-color:#00A9EC;width:0;opacity:0.5;}
.tiksluscarousel .msg{position:absolute;top:0;left:0;opacity:0.8;background-color:#fff;width:100%;text-align:center;}
.tiksluscarousel .info{color:#00A9EC;font-size:0.8em;padding:0.5em;}
.tiksluscarousel .error{color:#ff0000;font-size:0.8em;padding:0.5em;}
分享到QQ
分享到微博
微信扫一扫
