HTML5移动网站制作教程

最新推荐文章于 2024-05-14 20:33:29 发布

Tango糖果π

最新推荐文章于 2024-05-14 20:33:29 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/mahaokun/article/details/17751767

版权

一、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必须包含的部分）

<script type="text/javascript" src="./js/touch.js"></script>
<script type="text/javascript" src="./js/zepto.extend.js"></script>
<script type="text/javascript" src="./js/zepto.ui.js"></script>
<script type="text/javascript" src="./js/slider.js"></script>

复制代码

本人亲测以上4个js必须包含，缺一不可。
2、所要在手机端做滑动效果的部位（html代码部分）

<div class="head_nav_C" id="hongye_nav" style="height:60px;">
<div style="background-color:white;">
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div style="background-color:white;">
bbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
<div style="background-color:white;">
cccccccccccccccccccccccccccc
</div>
<div style="background-color:white;">
ddddddddddddddddddddddddd
</div>
</div>

复制代码

3、js代码块（改代码会在动在要加滑动效果的html代码块中自动生成一块代码）

<script>
Zepto(function($){//自动加载zepto组件
$("#hongye_nav").slider({//为html 对应的id部分最佳slider属性
autoPlay : false, //是否自动
showDot : false,
loop : true,//是否循环
});
})
</script>

复制代码

4、加载slider.css样式

<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>

Tango糖果π

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5移动网站制作教程

一、header信息的设置（自适应）　　　1、声明信息　　　2、编码设置　　　3、移动设备特别设置（重要声明！）　　　 Viewport说明：该设置可使我们开发出的页面/产品大小可适应各种高端移动设备width=device-width 为设备的宽度.user-scalable=no/yes 此功能为用户调整缩放。默认为yes。一般设置为no二、
复制链接

扫一扫