HTML5移动网站制作教程

一、header信息的设置(自适应)
   1、声明信息 <!DOCTYPE HTML>
   2、编码设置 <meta charset="UTF-8"> 
   3、移动设备特别设置(重要声明!
   <meta content="width=device-width,user-scalable=no" name="viewport"> 

Viewport说明:该设置可使我们开发出的页面/产品 大小可适应各种高端移动设备
width=device-width 为设备的宽度.

user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no


二、手机触摸手动滑动效果
1、触摸屏效果滚动组件(js必须包含的部分)

  1. <!--触摸屏效果滑动组件-->
  2.  <script type="text/javascript" src="./js/touch.js"></script>
  3.  <script type="text/javascript" src="./js/zepto.extend.js"></script>
  4.  <script type="text/javascript" src="./js/zepto.ui.js"></script>
  5.  <script type="text/javascript" src="./js/slider.js"></script>
  6.  <!--触摸屏效果滑动组件end-->
复制代码
本人亲测以上4个js必须包含,缺一不可。
2、所要在手机端做滑动效果的部位(html代码部分)
  1. <div class="head_nav_C" id="hongye_nav" style="height:60px;">
  2.             <div style="background-color:white;">
  3.                     aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
  4.             </div>
  5.             <div style="background-color:white;">
  6.                       bbbbbbbbbbbbbbbbbbbbbbbbbbb
  7.             </div>
  8.             <div style="background-color:white;">
  9.                         cccccccccccccccccccccccccccc
  10.             </div>
  11.             <div style="background-color:white;">
  12.                          ddddddddddddddddddddddddd
  13.             </div>
  14.         </div>
复制代码
3、js代码块(改代码会在动在要加滑动效果的html代码块中自动生成一块代码)
  1. <script>
  2.     Zepto(function($){//自动加载zepto组件
  3.         $("#hongye_nav").slider({//为html 对应的id部分最佳slider属性
  4.             autoPlay    : false, //是否自动
  5.             showDot     : false,
  6.             loop        : true,//是否循环
  7.         });
  8.     })
  9.  </script>
复制代码
4、加载slider.css样式
  1. <link rel="stylesheet" type="text/css" href="css/slider.css" />
复制代码
附:
另外一种简单的写法(适用于幻灯)
html代码部分
<div id=”fla”>
  <img lazyload=”images/img2.jpg” />
  <img lazyload=”images/img3.jpg” />
</div>
2、js代码部分
<script>
//创建slider组件
$('#fla').slider();
</script>

展开阅读全文

没有更多推荐了,返回首页