Bootstrap响应式Web开发（二）

最新推荐文章于 2024-05-25 09:49:12 发布

暮白寒窗雪

最新推荐文章于 2024-05-25 09:49:12 发布

阅读量1.3k

点赞数 5

文章标签： bootstrap

本文链接：https://blog.csdn.net/tiben/article/details/119120188

版权

本文深入探讨HTML5的API，包括网络连接监测、全屏操作、文件读取、地理定位、拖曳功能和Web存储。同时，结合Bootstrap，讲解移动端常见事件如Touch事件的实现，以及Fastclick、iScroll和Swipe等插件在提升移动端用户体验中的应用。

摘要由CSDN通过智能技术生成

Bootstrap响应式Web开发（二）

一、HTML5 常用API

1、监测网络连接
在HTML5之前，我们可以通过window.navigator.onLine来检查用户当前的网络状态，它会返回一个布尔值，false表示没有连接网络，true表示已连接网络。
HTML5提供了online和offline两个事件，它们监听的都是window对象。其中，online在用户网络连接时调用，offline在用户网络断开时调用。需要注意的是，这种方式在不同浏览器会存在差异
示例：检测网络连接状态

<style>
  body {
    padding:0; margin:0; background-color:#f7f7f7; }
  p {
   
    width: 200px;height: 40px;text-align: center;line-height: 40px; margin: 100px auto; 
    color: #fff;font-size: 24px; background-color: #000; display: none;
}
</style>
<body>
  <p class="tips"></p>
 <script src="jquery.min.js"></script>
<script>
    window.addEventListener('online', function() {
   
      $('.tips').text('网络已连接').fadeIn(500).delay(1000).fadeOut();
    })
    window.addEventListener('offline', function() {
   
      $('.tips').text('网络已断开').fadeIn(500).delay(1000).fadeOut();
    })
</script>
</body>

2、全屏操作
HTML5提供了requestFullScreen()方法允许用户自定义网页上任一元素的全屏显示，并提供了cancelFullScreen()方法关闭全屏显示。
这两个方法存在兼容性问题，IE 9+才会支持，即使高版本浏览器也有兼容性问题。因此不同浏览器需要添加不同的私有前缀
各类浏览器的全屏方法
①Chrome浏览器
基于WebKit内核的浏览器需要添加webkit前缀，使用webkitRequestFullScreen()和webkitCancelFullScreen()来实现
②Opera浏览器
Opera浏览器需要添加o前缀，使用oRequestFullScreen()和oCancelFullScreen()来实现
③火狐浏览器
基于Gecko内核的浏览器需要添加moz前缀，使用mozRequestFullScreen()和mozCancelFullScreen()来实现
④IE浏览器
基于Trident内核的浏览器需要添加ms前缀，使用msRequestFullscreen()和msCancelFullscreen()来实现，注意方法里的screen的s为小写形式
示例：全屏操作

<body>
  <div>
    <img src="pic1.png" height="300"  alt="">
    <button id="full">全屏显示</button>
    <button id="cancelFull">取消全屏</button>
    <button id="isFull">是否全屏</button>