jquery jflip图片翻页叠加特效代码下载


jquery jflip图片翻页叠加特效代码下载
jquery jflip图片翻页叠加特效代码下载以及图片翻页叠加等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="style.css">

2. 引入JS

<script type="text/javascript" src="excanvasX.js"></script>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery.jflip-0.4.js"></script>

3. HTML代码

<h2>jQuery code</h2>
<p>
  Flip gallery with:
  <ul>
    <li>green background (for images smaller than canvas)</li>
    <li>flipping corners on the bottom</li>
    <li>no image resize</li>
    <li>flip.jflip event binded to show infos</li>
  </ul>
</p>
<pre>
$("#g1").jFlip(300,300,{background:"green",cornersTop:false}).
bind("flip.jflip",function(event,index,total){
  $("#l1").html("Image "+(index+1)+" of "+total);
});
</pre>
<ul id="g1">
	<li><img src="images/1.jpg" /></li>
	<li><img src="images/2.jpg" /></li>
	<li><img src="images/3.jpg" /></li>
	<li><img src="images/4.jpg" /></li>
</ul>
<div id="l1">Image 1 of 6</div>
<h2>jQuery code</h2>
<p>
  Flip gallery with:
  <ul>
    <li>green background (for images smaller than canvas)</li>
    <li>flipping corners on the top</li>
    <li>images bigger than canvas are resized to be completely visible</li>
  </ul>
</p>
<pre>
$("#g2").jFlip(300,300,{background:"green",cornersTop:true,scale:"fit"});
</pre>
<ul id="g2">
	<li><img src="images/4.jpg" /></li>
	<li><img src="images/3.jpg" /></li>
	<li><img src="images/2.jpg" /></li>
	<li><img src="images/1.jpg" /></li>
</ul>
<h2>jQuery code</h2>
<p>
  Flip gallery with:
  <ul>
    <li>green background (for images smaller than canvas)</li>
    <li>flipping corners on the top</li>
    <li>all images are adjusted to fill the canvas while keeping aspect ratio</li>
  </ul>
</p>
<pre>
$("#g3").jFlip(300,300,{background:"green",cornersTop:true,scale:"fill"});
</pre>
<ul id="g3">
	<li><img src="images/3.jpg" /></li>
	<li><img src="images/2.jpg" /></li>
	<li><img src="images/4.jpg" /></li>
	<li><img src="images/1.jpg" /></li>  
</ul>

相关推荐

发表评论

相关文章