html滑动上下翻页提示箭头

html-css029

html滑动上下翻页提示箭头,第1张

网络信号差。html滑动上下翻页提示箭头是网络信号差导致的。该软件是一款非常需要网络状况优秀的平台，在网络不佳的时，会导致此平台连接失败无法查看信息以及提示箭头等情况，可将其更换网络为优秀网络即可。箭头就是弓箭的头部。又名镞。箭头的历史十分悠久，人类使用箭头至少有数万年的时间了。在远古，人们用动物的骨头和石头做成箭头。后来人们发明了冶炼技术，就是用青铜来制作箭头。

没有。html超文本标记语言（HyperTextMarkupLanguage），标准通用标记语言下的一个应用，HTML不是一种编程语言，而是一种标记语言（markuplanguage），是网页制作所必备的，在html翻页电子书每页是没有声音的。

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、运行效果如下：