Rumah > Artikel > hujung hadapan web > 分享一个HTML5电子杂志翻书特效代码
分享一个HTML5电子杂志翻书特效代码
- 零下一度asal
- 2017-04-28 15:10:597422semak imbas
HTML5电子杂志翻书动画特效,把你或者你的谁的照片制作一本相册。
<!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>
</htmlAtas ialah kandungan terperinci 分享一个HTML5电子杂志翻书特效代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：html5的应用-图像裁剪效果图Artikel seterusnya：html5 音频播放图文实例