html中翻书特效实现

本实例采用html5+CSS3,使用DIV布局,代码中加入了一些函数,代码本身不具有太大难度,喜欢的小伙伴可以来围观奥。

效果图:html中翻书特效实现_第1张图片

部分代码

<body>

<div id="center">
	<div id="dhtmlbook">
		<span class="page" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><img class="img">span>
		<span class="page right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><img class="img" style="left:-100%">span>
		<span class="page turn" onMouseDown="return false;" ondblclick=TPL(); onclick=TPL();><img class="img" style="filter:alpha();opacity:1">span>
		<span class="page turn right" onmousedown="return false;" ondblclick=TPR(); onclick=TPR();><img class="img" style="filter:alpha();left:-100%;opacity:1">span> 
		<div id="txtbox">div>
	div>
div>

<div id="imgsrc" style="visibility:hidden">
	<img alt="清晨他离开。" src="img/1.jpg.jpg">
	<img alt="相信她梦见他的自行车的轰鸣。" src="img/shu9.jpg">
	<img alt="她醒来的阳光在她的眼睑。" src="img/6.jpg.jpg">
	<img alt="她醒来的阳光在她的眼睑。" src="img/shu5.jpg">
	<img alt="她醒来的阳光在她的眼睑。" src="img/shu1.jpg">
	<img alt="她醒来的阳光在她的眼睑。" src="img/shu10.jpg">
	<img alt="她醒来的阳光在她的眼睑。" src="img/shu12.jpg">
div>


body>

下载地址:http://download.csdn.net/detail/u014687186/7596041点击打开链接(
附带源文件及代码)。

你可能感兴趣的:(html开发)