如何在jquery中制作剥离效果

时间:2013-08-23 06:34:40

标签: jquery

我正在使用codeigniter制作一个项目。我的设计和开发部分准备就绪。我需要做的就是在索引页面中制作剥离效果。我怎么能这样做? 请帮忙。 Thanx提前

2 个答案:

答案 0 :(得分:2)

 <style type='text/css'>
 img { behavior: url(iepngfix.htc) }
 #pageflip {
 position: absolute;
 right: 0; top: 0;
 float: right;
 }
 #pageflip img {
 width: 50px; height: 52px;
 z-index: 99;
 position: absolute;
 right: 0; top: 0;
 -ms-interpolation-mode: bicubic;}
 #pageflip .back-img {
 width: 50px; height: 50px;
 overflow: hidden;
 position: absolute;
 right: 0; top: 0;z-index:98;
 background: url(http://3.bp.blogspot.com/-HAvgxzbgzPg/UE-KcuJyFWI/AAAAAAAAA5w/2wb-        
 jmsGcHc/s1600/mini_rss.png) no-repeat right top #fff;
 }
 </style><a href='http://realcombiz.com'><img src='http://1.bp.blogspot.com/-RikrI-  
 c_pyQ/T2DTcP6aMvI/AAAAAAAAAL0/H6v7PVoHM_w/s1600/1x1juice.png'/></a><script         
 type='text/javascript'>
 $(document).ready(function(){
//Page Flip on hover
 $(&quot;#pageflip&quot;).hover(function() {
 $(&quot;#pageflip img , .back-img&quot;).stop()
 .animate({
 width: &#39;307px&#39;,
 height: &#39;319px&#39;
 }, 500);

复制以下代码内/后或搜索“

  <div id='pageflip'>
  <a href=' http://feeds.feedburner.com/realcombiz '><img alt='Realcombiz'      
     src='http://2.bp.blogspot.com/_1fRuBdlSpLw/TJcc3k62mWI/AAAAAAAAAps/uSj6nCe_CB4/s1600/page_f    lip.png'/></a>
<div class='back-img'/>
</div>

http://3.bp.blogspot.com/-HAvgxzbgzPg/UE-KcuJyFWI/AAAAAAAAA5w/2wb- jmsGcHc / s1600 / mini_rss.png替换为您首选的图片链接,默认情况下为rss图标。 将http://feeds.feedburner.com/realcombiz替换为您的Feed链接,或将其更改为您要将图片指向的任何链接 预览您的更改,然后单击“保存模板”。

答案 1 :(得分:0)

在这个页面中,他们列出了10种不同的jQuery Page Peel插件。

http://www.jquery4u.com/plugins/10-jquery-page-peel-plugins/

您可以尝试其中任何一种。