jQuery图片滑动特效集合代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片滑动特效集合代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content=" " />
<meta name="description" content=" " />
<title>jQuery图片滑动特效集合</title>
<script type="text/javascript" src="jquery.pack.js"></script>
<script type="text/javascript" src="jQuery.blockUI.js"></script>
<link href="default.css" rel="stylesheet" type="text/css">
<link href="demo.css" rel="stylesheet" type="text/css">
</head>
<body>


<!-- content S -->
<div id="content">
		<table class="param" border="0" cellspacing="0" cellpadding="0">
		  <tr>
		    <th width="100">参数</th>
		    <th width="80">默认值</th>
			<th>说明</th>
		  </tr>
		  <tr>
		    <td class="t">effect</td>
			<td class="t">fade</td>
		    <td class="intro">效果 ||  fade：渐显； ||   top：上滚动；||   left：左滚动；||  topLoop：上循环滚动；||   leftLoop：左循环滚动；||  topMarquee：上无缝循环滚动；||   leftMarquee：左无缝循环滚动；</td>
		  </tr>
		  <tr class="new">
		    <td class="t">autoPage:</td>
			<td class="t">false</td>
		    <td class="intro">系统自动分页（v1.2新增） &nbsp;&nbsp;<a class="link" target="_balnk" href="demoEffect/6.1-autoPage-Intro.html">&gt;&gt;详解</a></td>
		  </tr>
		  <tr>
		    <td class="t">titCell:</td>
			<td class="t">.hd li</td>
		    <td class="intro">导航元素--鼠标的触发元素 &nbsp;&nbsp;<a class="link" target="_balnk" href="images/cellIntro.gif">&gt;&gt;图解</a></td>
		  </tr>

		  <tr>
		    <td class="t">mainCell</td>
			<td class="t">.bd</td>
		    <td class="intro">内容元素的父层对象&nbsp;&nbsp;<a class="link" target="_balnk" href="images/cellIntro.gif">&gt;&gt;图解</a></td>
		  </tr>

		  <tr>
		    <td class="t">autoPlay</td>
			<td class="t">false</td>
		    <td class="intro">自动运行</td>
		  </tr>

		  <tr>
		    <td class="t">interTime</td>
			<td class="t">2500（毫秒）</td>
		    <td class="intro">自动运行间隔。当effect为无缝滚动的时候，相当于运行速度。</td>
		  </tr>

		  <tr>
		    <td class="t">delayTime</td>
			<td class="t">500（毫秒）</td>
		    <td class="intro">效果持续时间（一次效果执行所用的时间长度）。</td>
		  </tr>

		  <tr>
		    <td class="t">defaultIndex</td>
			<td class="t">0</td>
		    <td class="intro">默认的当前位置索引。0是第一个； defaultIndex:1 时，相当于从2个开始执行</td>
		  </tr>

		  <tr>
		    <td class="t">trigger</td>
			<td class="t">mouseover</td>
		    <td class="intro">触发方式 || mouseover：鼠标移过触发；|| click：鼠标点击触发；</td>
		  </tr>

		  <tr>
		    <td class="t">scroll</td>
			<td class="t">1</td>
		    <td class="intro">每次滚动个数。</td>
		  </tr>

		  <tr>
		    <td class="t">vis</td>
			<td class="t">1</td>
		    <td class="intro">visible，可视范围个数，当内容个数少于可视个数的时候，不执行效果。</td>
		  </tr>

		  <tr>
		    <td class="t">prevCell</td>
			<td class="t">.prev</td>
		    <td class="intro">前一个按钮元素。</td>
		  </tr>

		  <tr>
		    <td class="t">.nextCell</td>
			<td class="t">.next</td>
		    <td class="intro">后一个按钮元素。</td>
		  </tr>

		  <tr>
		    <td class="t">titOnClassName</td>
			<td class="t">on</td>
		    <td class="intro">当前位置自动增加的class名称</td>
		  </tr>
		</table>
		<div class="contact">
		 大话主席 QQ：1216419047。 有bug，call我。
		</div>
		<script type="text/javascript">
		jQuery("#showContact").click(function(){ jQuery(".contact").toggle(); });
		jQuery("#showParam").click(function(){ jQuery(".param").toggle(); });</script>


		<h1 class="topic">SuperSlide<i>v1.2</i></h1>

		<!-- 渐显效果 S -->
		<div class="indIntro">
			 
			<a class="demoBtn down" href="demo.html"><em>代码预览</em></a>
			<a href="demoEffect/6.1-autoPage-Intro.html" target="_blank" class="demoBtn down"><em>使用详解</em></a>
		</div>
</div>
<!-- content E -->


</body>
</html>

JS代码(DD_belatedPNG.js):

/*** DD_belatedPNG:Adds IE6 support:PNG images for CSS background-image and HTML <IMG/>.* Author:Drew Diller* Email:drew.diller@gmail.com* URL:http://www.dillerdesign.com/experiment/DD_belatedPNG/* Version:0.0.8a* Licensed under the MIT License:http://dillerdesign.com/experiment/DD_belatedPNG/#license** Example usage:* DD_belatedPNG.fix('.png_bg');
	// argument is a CSS selector* DD_belatedPNG.fixPng( someNode );
	// argument is an HTMLDomElement**/
var DD_belatedPNG={
	ns:"DD_belatedPNG",imgSize:{
}
,delay:10,nodesFixed:0,createVmlNameSpace:function(){
	if(document.namespaces&&!document.namespaces[this.ns]){
	document.namespaces.add(this.ns,"urn:schemas-microsoft-com:vml")}
}
,createVmlStyleSheet:function(){
	var b,a;
	b=document.createElement("style");
	b.setAttribute("media","screen");
	document.documentElement.firstChild.insertBefore(b,document.documentElement.firstChild.firstChild);
	if(b.styleSheet){
	b=b.styleSheet;
	b.addRule(this.ns+"\\:*","{
	behavior:url(#default#VML)}
");
	b.addRule(this.ns+"\\:shape","position:absolute;
	");
	b.addRule("img."+this.ns+"_sizeFinder","behavior:none;
	border:none;
	position:absolute;
	z-index:-1;
	top:-10000px;
	visibility:hidden;
	");
	this.screenStyleSheet=b;
	a=document.createElement("style");
	a.setAttribute("media","print");
	document.documentElement.firstChild.insertBefore(a,document.documentElement.firstChild.firstChild);
	a=a.styleSheet;
	a.addRule(this.ns+"\\:*","{
	display:none !important;
}
");
	a.addRule("img."+this.ns+"_sizeFinder","{
	display:none !important;
}
")}
}
,readPropertyChange:function(){
	var b,c,a;
	b=event.srcElement;
	if(!b.vmlInitiated){
	return}
if(event.propertyName.search("background")!=-1||event.propertyName.search("border")!=-1){
	DD_belatedPNG.applyVML(b)}
if(event.propertyName=="style.display"){
	c=(b.currentStyle.display=="none")?"none":"block";
	for(a in b.vml){
	if(b.vml.hasOwnProperty(a)){
	b.vml[a].shape.style.display=c}
}
}
if(event.propertyName.search("filter")!=-1){
	DD_belatedPNG.vmlOpacity(b)}
}
,vmlOpacity:function(b){
	if(b.currentStyle.filter.search("lpha")!=-1){
	var a=b.currentStyle.filter;
	a=parseInt(a.substring(a.lastIndexOf("=")+1,a.lastIndexOf(")")),10)/100;
	b.vml.color.shape.style.filter=b.currentStyle.filter;
	b.vml.image.fill.opacity=a}
}
,handlePseudoHover:function(a){
	setTimeout(function(){
	DD_belatedPNG.applyVML(a)}
,1)}
,fix:function(a){
	if(this.screenStyleSheet){
	var c,b;
	c=a.split(",");
	for(b=0;
	b<c.length;
	b++){
	this.screenStyleSheet.addRule(c[b],"behavior:expression(DD_belatedPNG.fixPng(this))")}
}
}
,applyVML:function(a){
	a.runtimeStyle.cssText="";
	this.vmlFill(a);
	this.vmlOffsets(a);
	this.vmlOpacity(a);
	if(a.isImg){
	this.copyImageBorders(a)}
}
,attachHandlers:function(i){
	var d,c,g,e,b,f;
	d=this;
	c={
	resize:"vmlOffsets",move:"vmlOffsets"}
;
	if(i.nodeName=="A"){
	e={
	mouseleave:"handlePseudoHover",mouseenter:"handlePseudoHover",focus:"handlePseudoHover",blur:"handlePseudoHover"}
;
	for(b in e){
	if(e.hasOwnProperty(b)){
	c[b]=e[b]}
}
}
for(f in c){
	if(c.hasOwnProperty(f)){
	g=function(){
	d[c[f]](i)}
;
	i.attachEvent("on"+f,g)}
}
i.attachEvent("onpropertychange",this.readPropertyChange)}
,giveLayout:function(a){
	a.style.zoom=1;
	if(a.currentStyle.position=="static"){
	a.style.position="relative"}
}
,copyImageBorders:function(b){
	var c,a;
	c={
	borderStyle:true,borderWidth:true,borderColor:true}
;
	for(a in c){
	if(c.hasOwnProperty(a)){
	b.vml.color.shape.style[a]=b.currentStyle[a]}
}
}
,vmlFill:function(e){
	if(!e.currentStyle){
	return}
else{
	var d,f,g,b,a,c;
	d=e.currentStyle}
for(b in e.vml){
	if(e.vml.hasOwnProperty(b)){
	e.vml[b].shape.style.zIndex=d.zIndex}
}
e.runtimeStyle.backgroundColor="";
	e.runtimeStyle.backgroundImage="";
	f=true;
	if(d.backgroundImage!="none"||e.isImg){
	if(!e.isImg){
	e.vmlBg=d.backgroundImage;
	e.vmlBg=e.vmlBg.substr(5,e.vmlBg.lastIndexOf('")')-5)}
else{
	e.vmlBg=e.src}
g=this;
	if(!g.imgSize[e.vmlBg]){
	a=document.createElement("img");
	g.imgSize[e.vmlBg]=a;
	a.className=g.ns+"_sizeFinder";
	a.runtimeStyle.cssText="behavior:none;
	position:absolute;
	left:-10000px;
	top:-10000px;
	border:none;
	margin:0;
	padding:0;
	";
	c=function(){
	this.width=this.offsetWidth;
	this.height=this.offsetHeight;
	g.vmlOffsets(e)}
;
	a.attachEvent("onload",c);
	a.src=e.vmlBg;
	a.removeAttribute("width");
	a.removeAttribute("height");
	document.body.insertBefore(a,document.body.firstChild)}
e.vml.image.fill.src=e.vmlBg;
	f=false}
e.vml.image.fill.on=!f;
	e.vml.image.fill.color="none";
	e.vml.color.shape.style.backgroundColor=d.backgroundColor;
	e.runtimeStyle.backgroundImage="none";
	e.runtimeStyle.backgroundColor="transparent"}
,vmlOffsets:function(d){
	var h,n,a,e,g,m,f,l,j,i,k;
	h=d.currentStyle;
	n={
	W:d.clientWidth+1,H:d.clientHeight+1,w:this.imgSize[d.vmlBg].width,h:this.imgSize[d.vmlBg].height,L:d.offsetLeft,T:d.offsetTop,bLW:d.clientLeft,bTW:d.clientTop}
;
	a=(n.L+n.bLW==1)?1:0;
	e=function(b,p,q,c,s,u){
	b.coordsize=c+","+s;
	b.coordorigin=u+","+u;
	b.path="m0,0l"+c+",0l"+c+","+s+"l0,"+s+" xe";
	b.style.width=c+"px";
	b.style.height=s+"px";
	b.style.left=p+"px";
	b.style.top=q+"px"}
;
	e(d.vml.color.shape,(n.L+(d.isImg?0:n.bLW)),(n.T+(d.isImg?0:n.bTW)),(n.W-1),(n.H-1),0);
	e(d.vml.image.shape,(n.L+n.bLW),(n.T+n.bTW),(n.W),(n.H),1);
	g={
	X:0,Y:0}
;
	if(d.isImg){
	g.X=parseInt(h.paddingLeft,10)+1;
	g.Y=parseInt(h.paddingTop,10)+1}
else{
	for(j in g){
	if(g.hasOwnProperty(j)){
	this.figurePercentage(g,n,j,h["backgroundPosition"+j])}
}
}
d.vml.image.fill.position=(g.X/n.W)+","+(g.Y/n.H);
	m=h.backgroundRepeat;
	f={
	T:1,R:n.W+a,B:n.H,L:1+a}
;
	l={
	X:{
	b1:"L",b2:"R",d:"W"}
,Y:{
	b1:"T",b2:"B",d:"H"}
}
;
	if(m!="repeat"||d.isImg){
	i={
	T:(g.Y),R:(g.X+n.w),B:(g.Y+n.h),L:(g.X)}
;
	if(m.search("repeat-")!=-1){
	k=m.split("repeat-")[1].toUpperCase();
	i[l[k].b1]=1;
	i[l[k].b2]=n[l[k].d]}
if(i.B>n.H){
	i.B=n.H}
d.vml.image.shape.style.clip="rect("+i.T+"px "+(i.R+a)+"px "+i.B+"px "+(i.L+a)+"px)"}
else{
	d.vml.image.shape.style.clip="rect("+f.T+"px "+f.R+"px "+f.B+"px "+f.L+"px)"}
}
,figurePercentage:function(d,c,f,a){
	var b,e;
	e=true;
	b=(f=="X");
	switch(a){
	case"left":case"top":d[f]=0;
	break;
	case"center":d[f]=0.5;
	break;
	case"right":case"bottom":d[f]=1;
	break;
	default:if(a.search("%")!=-1){
	d[f]=parseInt(a,10)/100}
else{
	e=false}
}
d[f]=Math.ceil(e?((c[b?"W":"H"]*d[f])-(c[b?"w":"h"]*d[f])):parseInt(a,10));
	if(d[f]%2===0){
	d[f]++}
return d[f]}
,fixPng:function(c){
	c.style.behavior="none";
	var g,b,f,a,d;
	if(c.nodeName=="BODY"||c.nodeName=="TD"||c.nodeName=="TR"){
	return}
c.isImg=false;
	if(c.nodeName=="IMG"){
	if(c.src.toLowerCase().search(/\.png$/)!=-1){
	c.isImg=true;
	c.style.visibility="hidden"}
else{
	return}
}
else{
	if(c.currentStyle.backgroundImage.toLowerCase().search(".png")==-1){
	return}
}
g=DD_belatedPNG;
	c.vml={
	color:{
}
,image:{
}
}
;
	b={
	shape:{
}
,fill:{
}
}
;
	for(a in c.vml){
	if(c.vml.hasOwnProperty(a)){
	for(d in b){
	if(b.hasOwnProperty(d)){
	f=g.ns+":"+d;
	c.vml[a][d]=document.createElement(f)}
}
c.vml[a].shape.stroked=false;
	c.vml[a].shape.appendChild(c.vml[a].fill);
	c.parentNode.insertBefore(c.vml[a].shape,c)}
}
c.vml.image.shape.fillcolor="none";
	c.vml.image.fill.type="tile";
	c.vml.color.fill.on=false;
	g.attachHandlers(c);
	g.giveLayout(c);
	g.giveLayout(c.offsetParent);
	c.vmlInitiated=true;
	g.applyVML(c)}
}
;
	try{
	document.execCommand("BackgroundImageCache",false,true)}
catch(r){
}
DD_belatedPNG.createVmlNameSpace();
	DD_belatedPNG.createVmlStyleSheet();

CSS代码(default.css):

@charset "utf-8";/* CSS Document */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,img{padding:0;margin:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var,i{font-weight:normal;font-style:normal;}
ol,ul,li{list-style:none;}
div,dl,dt,dd,ul,ol,li{zoom:1;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-weight:normal;font-size:100%;}
q:before,q:after{content:'';}
abbr,acronym{border:0;}
/*-- All --*/
body{color:#333;font:12px/20px Georgia,Arial,"Microsoft YaHei",sans-serif;text-align:center;}
a{color:#105B49;text-decoration:none;outline:none;}
a:hover{color:#f00;text-decoration:underline;}
table{border-collapse:collapse;border-spacing:0;empty-cells:show;}
table td,table th{border:#ddd solid 1px;padding:5px 10px;}
table th{background:#f3f3f3;}
table .new td{color:#f60;font-weight:bold;}
/*-- Public --*/
.fl{float:left !important;_display:inline;}
.fr{float:right !important;_display:inline;}
#test{position:fixed;left:0px;top:100px;background:#fff;display:none;}
/* 顶部导航条 */
#topBar{height:32px;line-height:30px;color:#fff;text-align:left;padding:0 20px;-webkit-box-shadow:#ddd 2px 0px 0px;-moz-box-shadow:#ddd 2px 0px 0px;box-shadow:#ddd 0px 2px 0px;background:#1b80b2;background:-webkit-gradient(linear,0 0,0 bottom,from(#1b80b2),to(#1974a1));background:-webkit-linear-gradient(#1b80b2,#1974a1);background:-moz-linear-gradient(#1b80b2,#1974a1);background:-ms-linear-gradient(#1b80b2,#1974a1);background:-o-linear-gradient(#1b80b2,#1974a1);background:linear-gradient(#1b80b2,#1974a1);-pie-background:linear-gradient(#1b80b2,#1974a1);behavior:url(PIE.htc);}
#topBar a{color:#fff;}
#topBar #logo{display:inline-block;*display:inline;zoom:1;font-size:14px;font-weight:bold;}
#topBar .nav{float:right;}
#topBar .nav a{padding:0 10px;}
#content{width:90%;margin:40px auto;position:relative;}
#footer{height:34px;line-height:34px;border-top:1px solid #ddd;background:-webkit-gradient(linear,0 0,0 bottom,from(#F0F0F0),to(#FFFFFF));background:-webkit-linear-gradient(#F0F0F0,#FFFFFF);background:-moz-linear-gradient(#F0F0F0,#FFFFFF);background:-ms-linear-gradient(#F0F0F0,#FFFFFF);background:-o-linear-gradient(#F0F0F0,#FFFFFF);background:linear-gradient(#F0F0F0,#FFFFFF);-pie-background:linear-gradient(#F0F0F0,#FFFFFF);behavior:url(PIE.htc);}
/* index.html */
.topic{text-align:center;font-size:72px;line-height:100px;color:#1974A1;}
.topic i{font-size:12px;line-height:18px;background:#ccc;color:#fff;text-align:center;vertical-align:top;font-family:Arial;padding:0 5px;}
.indIntro{width:800px;margin:40px auto;}
.indIntro h2{text-align:left;font-size:18px;line-height:30px;text-indent:36px;}
.indIntro p{text-align:left;padding:20px 0 20px 0;color:#999;text-indent:36px;}
.indIntro .demoBtn{background:#89c941;vertical-align:middle;margin:8px 10px 0 10px;display:inline-block;*display:inline;zoom:1;width:180px;height:60px;line-height:55px;color:#fff;font-family:Arial;font-size:48px;}
.indIntro .down{font-family:"微软雅黑";font-size:30px;}
.indIntro .demoBtn:hover{text-decoration:none;background:#89c941;}
.version{border:1px dotted #ccc;margin-top:10px;text-align:left;padding:10px 20px;}
.version h3{color:#1974A1;font-weight:bold;padding-bottom:5px;}
.version a{color:#f60;}
/* 联系作者 */
#content .contact{display:none;color:#c00;margin-bottom:20px;}
/* 参数 */
#content .param{display:none;width:100%;margin-bottom:20px;background:#fff;}
#content .param th{text-align:center;}
#content .param .intro{text-align:left;}
#content .param .link{color:#c00;text-decoration:underline;}
/* demo图片列表盒子 */
.demoBox{text-align:left;}
.demoBox .hd{position:relative;z-index:1;font-size:40px;height:60px;line-height:60px;padding-bottom:20px;border-bottom:3px solid #ddd;}
.demoBox .hd em{display:inline-block;*display:inline;zoom:1;width:60px;height:60px;font-size:60px;line-height:60px;text-align:center;background:#ddd;color:#fff;-webkit-border-radius:1000px;-moz-border-radius:1000px;border-radius:1000px;behavior:url(PIE.htc);font-family:Arial;}
.demoBox .hd h3{vertical-align:middle;display:inline-block;*display:inline;zoom:1;padding-left:10px;color:#999;}
.demoBox .hd h3 strong{padding-left:10px;color:#1974a1;}
.demoBox .hd .notice{cursor:pointer;font-size:12px;line-height:20px;display:inline-block;*display:inline;zoom:1;position:relative;padding:2px 10px;background:#c00;color:#fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;behavior:url(PIE.htc);}
.demoBox .hd .notice p{display:none;position:absolute;top:18px;left:0px;background:#c00;color:#fff;width:400px;padding:10px 20px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;}
.demoBox .hd .noticeOn p{display:block;}
.demoBox .bd{padding:20px 0;}
.demoBox .bd ul{overflow:hidden;zoom:1;padding-bottom:5px;}
.demoBox .bd ul li{position:relative;cursor:pointer;float:left;width:160px;text-align:center;margin-right:25px;border:2px solid #ddd;padding:1px;margin-bottom:20px;background:#fff;-webkit-border-radius:8px;-moz-border-radius:8px;border-radius:8px;-webkit-box-shadow:#999 1px 1px 2px;-moz-box-shadow:#999 1px 1px 2px;box-shadow:#999 1px 1px 2px;behavior:url(PIE.htc);}
.demoBox .bd ul li .pic{line-height:0px;height:120px;overflow:hidden;}
.demoBox .bd ul li img{width:160px;height:120px;}
.demoBox .bd ul li .title{line-height:30px;height:30px;overflow:hidden;border-top:1px solid #ddd;background:#E8E8E8;background:-webkit-gradient(linear,0 0,0 bottom,from(#FAFAFA),to(#F0F0F0));background:-webkit-linear-gradient(#FAFAFA,#F0F0F0);background:-moz-linear-gradient(#FAFAFA,#F0F0F0);background:-ms-linear-gradient(#FAFAFA,#F0F0F0);background:-o-linear-gradient(#FAFAFA,#F0F0F0);background:linear-gradient(#FAFAFA,#F0F0F0);-pie-background:linear-gradient(#FAFAFA,#F0F0F0);behavior:url(PIE.htc);}
.demoBox .bd ul li:hover{border-color:#1974a1;}
.demoBox .bd ul li.new{border-color:#f60;}
.demoBox .bd ul li.new:hover{border-color:#1974a1;}
.demoBox .bd ul li.new em{position:absolute;left:-5px;top:5px;display:block;width:40px;height:20px;line-height:20px;background:#f60;color:#fff;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;behavior:url(PIE.htc);}
.yourIdea h1{font-size:30px;line-height:40px;}
/* demo 展示盒子 */
#showDemoBox{display:none;width:1000px;height:530px;text-align:left;overflow-y:scroll;}
.blockPage{top:20px !important;}
#showDemoBox .hd{height:50px;line-height:50px;background:#ccc;font-size:20px;color:#fff;font-weight:bold;padding:0 20px;background:#1b80b2;background:-webkit-gradient(linear,0 0,0 bottom,from(#0797DD),to(#1974a1));background:-webkit-linear-gradient(#0797DD,#1974a1);background:-moz-linear-gradient(#0797DD,#1974a1);background:-ms-linear-gradient(#0797DD,#1974a1);background:-o-linear-gradient(#0797DD,#1974a1);background:linear-gradient(#0797DD,#1974a1);-pie-background:linear-gradient(#0797DD,#1974a1);behavior:url(PIE.htc);}
#showDemoBox .hd h3{font-weight:bold;}
#showDemoBox em{display:inline-block;*display:inline;zoom:1;width:20px;height:16px;background:#fff;line-height:14px;text-align:center;float:right;color:#333;cursor:pointer;margin-top:10px;font-size:14px;font-family:Verdana;}
#showDemoBox #iframe{width:970px;height:1000px;}
/* demoEffect 文件CSS ======================================= */
#demoContent{text-align:center;margin-top:20px;width:1000px;height:800px;}
#demoContent .effect{display:inline-block;*display:inline;zoom:1;text-align:left;margin:0 auto;}
#demoContent .js{text-align:left;margin:10px 20px;line-height:20px;background:#f3f3f3;padding:5px 20px;}
#demoContent .js span{color:#1974a1;}
#demoContent .js span i{color:#f30;font-weight:bold;}
#demoContent .notice{color:#fff;background:#000;text-align:left;padding:4px 20px;margin:10px 20px;}
#demoContent .css{text-align:left;margin:10px 20px;}
#demoContent .css blockquote{overflow:scroll;}
#demoContent .authorWord{padding:10px 20px;border:1px dotted #ddd;text-align:left;margin-bottom:20px;}
#demoContent .authorWord em{color:#f00;}
/*深蓝色 #1974a1*/
/* 源文件颜色 */
img:-moz-broken{-moz-force-broken-image-icon:1;width:24px;height:24px;}
blockquote{font-family:"Consolas","Courier New",Courier,mono,serif;font-size:12px;margin:0 0 1em 0;padding-top:1px;}
blockquote ol,blockquote ol li,blockquote ol li span{margin:0;padding:0;border:none;}
blockquote a,blockquote a:hover{background:none;border:none;padding:0;margin:0;}
blockquote ol{list-style:decimal;background-color:#fff;margin:0px 0px 1px 45px !important;padding:0px;color:#5C5C5C;}
blockquote ol li{list-style:decimal-leading-zero;list-style-position:outside !important;border-left:3px solid #6CE26C;background-color:#F8F8F8;color:#5C5C5C;padding:0 3px 0 10px !important;margin:0 !important;line-height:14px;}
blockquote ol li.alt{background-color:#FFF;color:inherit;}
blockquote ol li span{color:black;background-color:inherit;}
blockquote .comment,blockquote .comments{color:#008200;background-color:inherit;}
blockquote .string{color:blue;background-color:inherit;}
blockquote .keyword{color:#069;font-weight:bold;background-color:inherit;}
blockquote .blockquoteprocessor{color:gray;background-color:inherit;}
blockquote .dp-xml .cdata{color:#ff1493;}
blockquote .dp-xml .tag,blockquote .dp-xml .tag-name{color:#069;font-weight:bold;}
blockquote .dp-xml .attribute{color:red;}
blockquote .dp-xml .attribute-value{color:blue;}
blockquote .dp-sql .func{color:#ff1493;}
blockquote .dp-sql .op{color:#808080;}
blockquote .dp-rb .symbol{color:#a70;}
blockquote .dp-rb .variable{color:#a70;font-weight:bold;}
blockquote .dp-py .builtins{color:#ff1493;}
blockquote .dp-py .magicmethods{color:#808080;}
blockquote .dp-py .exceptions{color:brown;}
blockquote .dp-py .types{color:brown;font-style:italic;}
blockquote .dp-py .commonlibs{color:#8A2BE2;font-style:italic;}
blockquote .dp-j .annotation{color:#646464;}
blockquote .dp-j .number{color:#C00000;}
blockquote .dp-delphi .number{color:blue;}
blockquote .dp-delphi .directive{color:#008284;}
blockquote .dp-delphi .vars{color:#000;}
blockquote .dp-css .value{color:black;}
blockquote .dp-css .important{color:red;}
blockquote .dp-c .vars{color:#d00;}
blockquote .dp-cpp .datatypes{color:#2E8B57;font-weight:bold;}

附件:下载该文件资源,减少时间成本(增值服务)