jQuery双引号动态文本js代码

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

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

以下是 jQuery双引号动态文本js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery双引号动态文本</title>
<link rel="stylesheet" type="text/css" href="css/style.css"/>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="content">
<br><br><br><br>
		<!-- Box containing the quotes - will be filled by JavaScript -->
		<div id="quotebox">
			<p class="quotemark leftquote">&#8216;&#8216;</p>
			<div class="quote"></div>
			<p class="quotemark rightquote">&#8217;&#8217;</p>
		</div>
		
	</div>
</div>
</body>
</html>

JS代码(script.js):

/** Author:Marco Kuiper (http://www.marcofolio.net/)*/
// Speed of the quotation marks to showvar quoteSpeed = 500;
	// Speed of the quote container to expandvar quoteContainerSpeed = 1000;
	// Time the quote will be visiblevar showQuoteSpeed = 5000;
	// Time the screen will be emptyvar cleanScreenSpeed = 500;
	// Width of the quote box// Would be cool to automatically grow to the containing text size in the future.var quoteBoxWidth = "300px";
	// The quotes we'll showvar quotes = [{
	"quote":"Java is to JavaScript,<br />what Car is to Carpet.","author":"- Chris Heilmann"}
,{
	"quote":"Computers are good at following instructions,but not at<br />reading your mind.","author":"- Donald Knuth"}
,{
	"quote":"Copy and paste<br />is a design error.","author":"- David Parnas"}
,{
	"quote":"If you make everything bold,<br />nothing is bold.","author":"- Art Webb"}
,{
	"quote":"Technical skill is mastery of complexity,while creativity is mastery of simplicity.","author":"- Christopher Zeeman"}
,{
	"quote":"First,solve the problem. Then,write the code.","author":"- John Johnson"}
];
	// The quote index to start withvar currentQuoteIndex = 4;
	// Document ready$(document).ready(function(){
	// Webkit seems to have different ways of cerning the quotation marks// This little hack makes sure it's in the correct positionif($.browser.webkit){
	$(".quotemark").css({
	"margin-top":"-22px"}
);
	$(".rightquote").css({
	"margin-top":"-24px"}
);
}
startAnimation();
}
);
	/* Starts the animation */
var startAnimation = function(){
	setTimeout(function(){
	showLeftQuote();
}
,quoteSpeed);
}
/* Shows left quote */
var showLeftQuote = function(){
	$(".leftquote").show();
	setTimeout(function(){
	showRightQuote();
}
,quoteSpeed);
}
;
	/* Shows right quote */
var showRightQuote = function(){
	$(".rightquote").show();
	setTimeout(function(){
	showQuoteContainer();
}
,quoteSpeed);
}
;
	/* Shows the quote container */
var showQuoteContainer = function(){
	// Small fix for the right quotation mark$(".rightquote").css({
	"margin-left":"-10px"}
);
	$("<p />").html(quotes[currentQuoteIndex].quote).css({
	"display":"none"}
).appendTo($(".quote"));
	$("<p />").addClass("author").html(quotes[currentQuoteIndex].author).css({
	"display":"none"}
).appendTo($(".quote"));
	$(".quote").show().animate({
	width:quoteBoxWidth}
,quoteContainerSpeed,function(){
	showQuote();
}
);
}
/* Shows the current quote */
var showQuote = function(){
	$(".quote").children().fadeIn();
	setTimeout(function(){
	clearQuote();
}
,showQuoteSpeed);
}
/* Clear the current quote */
var clearQuote = function(){
	// Determine the curren quote indexif(currentQuoteIndex == quotes.length - 1){
	currentQuoteIndex = 0;
}
else{
	currentQuoteIndex++;
}
// Fade out the quotation marks$(".quotemark").fadeOut();
	// Fade out the current quote and reset the data$(".quote").fadeOut(function(){
	$(".rightquote").css({
	"margin-left":"0px"}
);
	$(".quote").empty().css({
	width:"0px"}
);
	setTimeout(function(){
	startAnimation();
}
,cleanScreenSpeed);
}
);
}

CSS代码(style.css):

/* __ _ _ _ / _| | (_) | | _ __ ___ __ _ _ __ ___ ___ | |_ ___ | |_ ___ _ __ ___| |_| '_ ` _ \ / _` | '__/ __/ _ \| _/ _ \| | |/ _ \ | '_ \ / _ \ __|| | | | | | (_| | | | (_| (_) | || (_) | | | (_) || | | | __/ |_|_| |_| |_|\__,_|_| \___\___/|_| \___/|_|_|\___(_)_| |_|\___|\__|*/
/* BASIC RESET */
ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0;padding:0;}
/* HTML ELEMENTS */
body{background-image:url("../images/bg.jpg");font-family:"Segoe UI","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif;font-size:13px;color:#eee;}
h1{font:bold 65px/60px Helvetica,Arial,Sans-serif;text-align:center;color:#eee;text-shadow:0px 2px 6px #333;}
h1 small{font-size:20px;text-transform:uppercase;letter-spacing:14px;display:block;color:#ccc;}
h2 a{display:block;text-decoration:none;margin:0 0 30px 0;font:italic 45px Georgia,Times,Serif;text-align:center;color:#bfe1f1;text-shadow:0px 2px 6px #333;}
h2 a:hover{color:#90bcd0;}
/* COMMON CLASSES */
.break{clear:both;}
/* WRAPPER */
#wrapper{width:800px;margin:40px auto;}
/* CONTENT */
#content{}
#content p.info{margin:10px auto;width:600px;}
#content p a{color:#bfe1f1;text-decoration:none;}
#content p a:hover{color:#90bcd0;}
/* QUOTE BOX */
#quotebox{width:600px;height:250px;background-image:url("../images/quote_bg.png");margin:20px auto;color:#000;-webkit-box-shadow:0 0 5px #fff;-moz-box-shadow:0 0 5px #fff;box-shadow:0 0 5px #fff;}
.quote{display:none;float:left;height:69px;background-color:rgba(255,255,255,0.8);margin-left:20px;margin-top:14px;padding:7px;}
.quote p{font:bold 17px Helvetica,Arial,Sans-serif;}
.quote .author{font:italic 13px Georgia,serif,Times;color:#ff4f00;padding-top:1px;}
.quotemark{display:none;float:left;font:bold 300px Helvetica;letter-spacing:-35px;line-height:300px;color:rgba(255,255,255,0.8);}
.rightquote{margin-top:-3px;}

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