recherche

Maison >interface Web >Tutoriel H5 >Partager un code d'effet spécial de flip book de magazine électronique HTML5

Partager un code d'effet spécial de flip book de magazine électronique HTML5

零下一度
零下一度original
2017-04-28 15:10:597663parcourir

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!

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Application des rendus de recadrage d'images HTML5Article suivant：Application des rendus de recadrage d'images HTML5

Articles Liés

Voir plus