以下是 jquery双引号文本变化js代码 的示例演示效果:
部分效果截图:
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" media="screen" href="style.css">
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.quovolver.js"></script>
<!-- JavaScript Test Zone -->
<script type="text/javascript">
$(document).ready(function() {
$('blockquote').quovolver();
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
</div><!-- #header -->
<div id="article">
<code>$('#quotes-1 blockquote').quovolver();</code>
<blockquote>
<p>Ut eu consectetur nisi. Praesent facilisis diam nec sapien gravida non mattis justo imperdiet. Vestibulum nisl urna, euismod sit amet congue at, bibendum non risus.</p>
<cite>– Quote Author (Quote #1)</cite>
</blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu eros velit, non blandit ipsum. Donec pretium, nibh vitae tristique tempor, enim sem condimentum lacus, vel mattis mauris risus id justo. Nullam tincidunt, augue sit amet euismod condimentum, orci elit dignissim odio, a viverra augue enim in lectus. Ut tempor commodo venenatis. Pellentesque pretium, ipsum nec bibendum facilisis, erat justo consequat tortor, iaculis suscipit eros est quis urna. Nunc gravida ornare nibh interdum sagittis.</p>
<cite>– Quote Author (Quote #2)</cite>
</blockquote>
<blockquote>
<p>Donec rutrum convallis viverra. Suspendisse vehicula, risus sit amet luctus pharetra, quam ante condimentum metus, porttitor vulputate magna felis quis dui.</p>
<cite>– Quote Author (Quote #3)</cite>
</blockquote>
<blockquote>
<p>Suspendisse ipsum urna, pellentesque eget sagittis eget, porta eget ligula. Mauris id posuere nisl. Aliquam sit amet urna lorem. Donec et odio et velit ornare dapibus a sit amet odio. Praesent ornare cursus ante quis fringilla. Vivamus id egestas sapien. Nullam mollis elit eros, ac euismod neque. Nam placerat dictum congue.</p>
<cite>– Quote Author (Quote #4)</cite>
</blockquote>
<blockquote>
<p>Nulla facilisi. Mauris vel mattis risus. Ut nec luctus tortor. In interdum pulvinar quam non pharetra. Proin sed diam in lorem varius tempor. Vestibulum porta, diam quis mollis rutrum, dolor lectus interdum leo, malesuada convallis purus tortor sed turpis.</p>
<cite>– Quote Author (Quote #5)</cite>
</blockquote>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam eu eros velit, non blandit ipsum. Donec pretium, nibh vitae tristique tempor, enim sem condimentum lacus, vel mattis mauris risus id justo. Nullam tincidunt, augue sit amet euismod condimentum, orci elit dignissim odio, a viverra augue enim in lectus. Ut tempor commodo venenatis.</p>
<cite>– Quote Author (Quote #6)</cite>
</blockquote>
</div><!-- #article -->
</div><!-- #wrapper -->
</body>
</html>
CSS代码(style.css):
/* Quovolver Demo Styles */
/* |All required styles for the effect |are labeled with this *required**/
body{font-family:Arial,Helvetica,sans-serif;font-size:13px;line-height:18px;color:#373737;}
a{text-decoration:none;color:#52b7d4;}
a:hover{color:#ea9941;}
#header,#footer{padding:20px 0;}
#wrapper{width:475px;margin:0 auto;}
#description{margin-bottom:40px;padding-bottom:10px;}
h1,h2{font-weight:normal;}
h1{font-family:Georgia,Times,serif;font-size:42px;color:#1f1f1f;margin-left:-60px;}
h2{font-size:12px;}
#description p{margin-bottom:10px;}
#footer{font-size:11px;line-height:16px;}
#footer a{color:#373737;border-bottom:1px solid #f2f2f2;}
#footer a:hover{color:#ea9941;border-color:#ea9941;}
code{font-family:"Courier New",Courier,Monaco,monospace;background:#f2f2f2;margin-bottom:20px;display:block;padding:20px;}
blockquote p{margin-bottom:10px;font-style:italic;}
blockquote cite{font-style:normal;display:block;text-align:right;text-transform:uppercase;font-size:10px;font-weight:bold;letter-spacing:1px;font-family:Arial,Helvetica,sans-serif;}
/* |Setting the width for the blockquotes is required |to accurately adjust it's contianer*/
blockquote{font-family:Georgia,Times,serif;width:300px;/* required */
margin:0 auto;}
/* |The #quote_wrap div is created |by Quovolver to wrap the quotes*/
#quote_wrap{background:#fbffec url(http://sandbox.sebnitu.com/jquery/quovolver/demo/images/quote-mark.png) no-repeat 20px 20px;margin:40px 0;padding:20px;border:1px solid #edffaf;}
分享到QQ
分享到微博
微信扫一扫
