HTML5手机上下滑动翻页特效是一款手机移动端触屏滑动效果实现完整代码如下：
1、html5页面代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8">
<title>HTML5手机页面触屏滑动上下翻页特效</title>
<meta charset="utf-8">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="pragram" content="no-cache">
<link rel="stylesheet" type="text/css" href="./hamer_files/main.css">
<link rel="stylesheet" type="text/css" href="./hamer_files/endpic.css">
<script type="text/javascript" src="./hamer_files/offline.js"></script>
<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">
</head>
<body class="s-bg-ddd pc no-3d perspective yes-3d" style="-webkit-user-select: none">
<section class="u-alert">
<img style="display:none" src="./hamer_files/loading_large.gif">
<div class="alert-loading z-move">
<div class="cycleWrap"> <span class="cycle cycle-1"></span>
<span class="cycle cycle-2"></span><span class="cycle cycle-3"></span><span class="cycle cycle-4"></span>
</div>
<div class="lineWrap"> <span class="line line-1"></span><span class="line line-2"></span><span class="line line-3"></span>
</div>
</div>
</section>
<section class="u-arrow">
<p class="css_sprite01"></p>
</section>
<section class="p-ct transformNode-2d transformNode-3d" style="height: 918px">
<div class="translate-back" style="height: 918px">
<div class="m-page m-fengye" data-page-type="info_pic3" data-statics="info_pic3" style="height: 918px">
<div class="page-con lazy-finish" data-position="50% 50%" data-size="cover" style="height: 920pxbackground-image: url(hamer_files/1.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/2.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/3.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/4.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/5.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/6.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/7.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
<div class="m-page m-bigTxt f-hide" data-page-type="bigTxt" data-statics="info_list" style="height: 918px">
<div class="page-con j-txtWrap lazy-finish" data-position="50% 50%" data-size="cover" style="background-image: url(hamer_files/8.jpg)background-size: coverbackground-position: 50% 50%"></div>
</div>
</div>
</section>
<section class="u-pageLoading">
<img src="./hamer_files/load.gif" alt="loading">
</section>
<script src="./hamer_files/init.mix.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/coffee.js" type="text/javascript" charset="utf-8"></script>
<script src="./hamer_files/99_main.js" type="text/javascript" charset="utf-8"></script>
</body></html>
2、css代码：
@charset "utf-8"
.ad_foot li { margin:0 auto 1emfont-size:1.8empadding:15pxbackground:#FFF}
.ad_foot li a {display:block}
.ad_foot li .l {width:75pxheight:75pxfloat:leftoverflow:hidden}
.ad_foot li .l img {width:75pxwidth:75px}
.ad_foot li .r {width:78%float:leftmargin-left:30pxcolor:#666overflow:hidden}
.ad_foot li .r p {color:#999font-size:1.2em}
.ad_foot li .r span {font-size:0.8em}
.ad_foot li .r i {font-style:normal}
.lazy-img, .lazy-finish{background-color:#f0eded}
.page-list{font-size:20pxfont-family: "Microsoft yahei"padding-left:17pxpadding-top:30pxheight:35pxborder-bottom:1px solid #b5b5b5display:none}
.ad_foot{padding:15px 15px 0 15px}
/*声音播放按钮*/
#song_img {width:293pxheight:41pxdisplay:blockposition:absoluteright:4.1emtop:1.6emfont-size:1.7emtext-align:centerline-height:41pxcolor:#FFFbackground:url(../img/music_c3.png) no-repeat 0 0}
/*底部推荐*/
.ad_list{margin-top:2em}.ad_list li {width:46%background:nonepadding:0float:leftmargin-bottom: 1em}
.ad_list li.r {float:right}.ad_list li a img {width:100%height:auto}
.ad_foot h3 {width:100%height:48pxline-height:48pxbackground:#F9F5EC}
.ad_foot h3 a {display:inline-blockcolor:#444width:50%text-align:centerfont-size:1.5emheight:48pxborder-bottom:2px solid #FF9240}
.ad_foot h3 a.active {color:#FFFbackground:#FF9240}
.magazine_1 li {
width:100%
margin-bottom: 1em
font-size: 1.8em
padding: 15px
background: #FFF}
.magazine_1 li a {display:block}
.magazine_1 li .l {width: 75px
height: 75px
float: left
overflow: hidden}
.magazine_1 li .l img {width:75pxheight:75px}
.magazine_1 li .r {width: 78%
float: left
margin-left: 30px
color: #666
overflow: hidden}
.magazine_1 li .r p {
color: #999
font-size: 1.2em
.magazine_1 li .r span {font-size:0.8em}
.ad_foot li .r i {font-style:normal}
3、运行效果如下：
首先是HTML代码，非常简单，列出我们需要渲染的文字：<div class="foo">
<span class="letter" data-letter="A">A</span>
<span class="letter" data-letter="B">B</span>
<span class="letter" data-letter="C">C</span>
<span class="letter" data-letter="D">D</span>
<span class="letter" data-letter="E">E</span>
<span class="letter" data-letter="F">F</span>
<span class="letter" data-letter="G">G</span>
<span class="letter" data-letter="H">H</span>
<span class="letter" data-letter="I">I</span>
<span class="letter" data-letter="L">L</span>
<span class="letter" data-letter="M">M</span>
<span class="letter" data-letter="N">N</span>
<span class="letter" data-letter="O">O</span>
<span class="letter" data-letter="P">P</span>
<span class="letter" data-letter="Q">Q</span>
<span class="letter" data-letter="R">R</span>
<span class="letter" data-letter="S">S</span>
<span class="letter" data-letter="T">T</span>
<span class="letter" data-letter="U">U</span>
<span class="letter" data-letter="V">V</span>
<span class="letter" data-letter="Z">Z</span>
</div> CSS3
.letter{
display: inline-block
font-weight: 900
font-size: 8em
margin: 0.2em
position: relative
color: #00B4F1
transform-style: preserve-3d
perspective: 400
z-index: 1
} 这样我们就让这些字母安安静静的排列起来，并有了自己的背景颜色，等待强大的CSS3来渲染。
接下来我们要让文字在鼠标滑过的时候产生翻转倾斜的动画。
.letter:before, .letter:after{
position:absolute
content: attr(data-letter)
transform-origin: top left
top:0
left:0
}
.letter, .letter:before, .letter:after{
transition: all 0.3s ease-in-out
}
.letter:before{
color: #fff
text-shadow:
-1px 0px 1px rgba(255,255,255,.8),
1px 0px 1px rgba(0,0,0,.8)
z-index: 3
transform:
rotateX(0deg)
rotateY(-15deg)
rotateZ(0deg)
}
.letter:after{
color: rgba(0,0,0,.11)
z-index:2
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(0deg)
rotateZ(0deg)
skew(0deg,1deg)
}
.letter:hover:before{
color: #fafafa
transform:
rotateX(0deg)
rotateY(-40deg)
rotateZ(0deg)
}
.letter:hover:after{
transform:
scale(1.08,1)
rotateX(0deg)
rotateY(40deg)
rotateZ(0deg)
skew(0deg,22deg)
}
用JS脚本制作简单快捷，只需少量代码如下：<html>
<head>
<meta http-equiv="Content-Type" c>
<meta http-equiv="imagetoolbar" c>
<title>图片左右翻页</title>
<style>
<!--
body{
text-align:center
margin:20px 0px 0px 0px
}
table{
border:0px
}
.sp{
width:520px
height:400px
border:2px solid #FFCC00
text-align:center
line-height:400px
}
.sn{
width:520px
height:30px
text-align:center
line-height:30px
}
img{
border:0px
cursor:pointer
}
-->
</style>
<script language="javascript">
<!--
var photo=new Array(4)
var photoname=new Array(4)
photo[0]="http://www.2p9p.com/xfdipzone/photo/1.jpg"
photoname[0]="柳梦璃"
photo[1]="http://www.2p9p.com/xfdipzone/photo/2.jpg"
photoname[1]="韩菱纱"
photo[2]="http://www.2p9p.com/xfdipzone/photo/3.jpg"
photoname[2]="云天河"
photo[3]="http://www.2p9p.com/xfdipzone/photo/4.jpg"
photoname[3]="慕容紫英"
var currid=0
function showphoto(){
if(window.event.x>window.screen.width/2){
currid=currid+1
}else{
currid=currid-1
}
if(currid>=4){
currid=0
}else if(currid<0){
currid=3
}
inphoto.src=photo[currid]
fn.innerHTML=photoname[currid]
}
function changestyle(o){
if(window.event.offsetX>=o.clientWidth/2){
o.style.cursor="url("+"http://www.2p9p.com/xfdipzone/photo/next.ani"+")"
o.alt="点击显示下一张"
}else{
o.style.cursor="url("+"http://www.2p9p.com/xfdipzone/photo/pre.ani"+")"
o.alt="点击显示上一张"
}
}
function preloadimage(){
photo1=new Image()
photo1.src="http://www.2p9p.com/xfdipzone/photo/1.jpg"
photo2=new Image()
photo2.src="http://www.2p9p.com/xfdipzone/photo/2.jpg"
photo3=new Image()
photo3.src="http://www.2p9p.com/xfdipzone/photo/3.jpg"
photo4=new Image()
photo4.src="http://www.2p9p.com/xfdipzone/photo/4.jpg"
photopre=new Image()
photopre.src="http://www.2p9p.com/xfdipzone/photo/pre.ani"
photonext=new Image()
photonext.src="http://www.2p9p.com/xfdipzone/photo/next.ani"
}
-->
</script>
</head>
<body >
<table>
<tr>
<td class="sp"><img name="inphoto" id="inphoto" src="http://www.2p9p.com/xfdipzone/photo/1.jpg" ></td>
</tr>
<tr>
<td class="sn"><span id="fn">柳梦璃</span></td>
</tr>
<tr>
<td class="sn">点击图片左右显示上下张</td>
</tr>
</table>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）