Maison >interface Web >Tutoriel H5 >Partager un code d'effet spécial de flip book de magazine électronique HTML5
Effets spéciaux d'animation de flip book de magazine électronique HTML5, créez un album photo de vous ou de quelqu'un de vos photos.
<!DOCTYPE html> <html> <head> <!-- 效果:http://hovertree.com/texiao/html5/37/ --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>HTML5电子杂志翻书动画特效 - 何问起</title><base target="_blank" /> <link type="text/css" href="http://hovertree.com/texiao/html5/37/css/main.css" rel="stylesheet" media="screen" /> <style>.hovertreeinfo{text-align:center;}</style> </head> <body> <p class="hovertreeinfo"><h1>何问起尘封记忆的相册</h1></p> <p id="shineflip"> <p id="shineflip-pages"> <canvas id="shineflip-canvas"></canvas> <canvas id="shineflip-page-mid-canvas"></canvas> <section class="page"> <p><img src="http://hovertree.com/texiao/html5/37/images/0.jpg" width="475" height="482" /></p> <span style="left:18px;"><img src="http://hovertree.com/texiao/html5/37/images/zh.png" height="482" /></span> </section> <section class="page" style="background:url(images/left_pk.jpg)"> <p><img src="http://hovertree.com/texiao/html5/37/images/1.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></p> </section> <section class="page"> <p><img src="http://hovertree.com/texiao/html5/37/images/2.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></p> </section> <section class="page"> <p><img src="http://hovertree.com/texiao/html5/37/images/3.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></p> </section> <section class="page"> <p><img src="http://hovertree.com/texiao/html5/37/images/4.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></p> </section> <section class="page"> <p><img src="http://hovertree.com/texiao/html5/37/images/5.jpg" width="466" height="463" style="float:right;margin-top:9px;" /></p> </section> <section class="page" style="background:url(images/right_pk.jpg)"> <p><img src="http://hovertree.com/texiao/html5/37/images/6.jpg" width="466" height="463" style="float:left;margin-top:9px;" /></p> </section> <section class="page"> <p><img src="http://hovertree.com/texiao/html5/37/images/24.jpg" width="475" height="482" /></p> <span style="right:18px;"><img src="http://hovertree.com/texiao/html5/37/images/zh.png" height="482" /></span> </section> </p> </p> <script type="text/javascript" src="http://hovertree.com/texiao/html5/37/js/shineflip_min.js"></script> <script type="text/javascript"> var shineFlip = new ShineFlip({ // autoFitScreen: true, width: 950, height: 482, page_width: 475, page_height: 482 }); </script> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br><br><br><br><br> <p>适用浏览器:360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p><br> <p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效库</a> <a href="http://hovertree.com/h/bjaf/nijk183i.htm">代码下载</a> </p> </body> </html
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!