设为首页收藏本站
查看: 8151|回复: 0

[前端开发] 014 HTML5详解（三）

[复制链接]
真是低调le
  • TA的每日心情
    慵懒
    2025-6-8 10:55

    • 签到天数: 536 天

    [LV.9]以坛为家II
    发表于 2021-9-15 21:04:06 | 显示全部楼层 |阅读模式
    本帖最后由 真是低调le 于 2021-9-15 21:03 编辑

    本文主要内容

    - 拖拽
    - 历史
    - 地理位置
    - 全屏

    拖拽




    如上图所示，我们可以拖拽博客园网站里的图片和超链接。

    在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。

    1、拖拽元素

    页面中设置了 draggable="true" 属性的元素。

    举例如下：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>Title</title>
    6.     <link rel="stylesheet" href="css/font-awesome.min.css">
    7.     <style>
    8.     .box1{
    9.         width: 200px;
    10.         height: 200px;
    11.         background-color: green;

    13.     }
    14.     </style>
    15. </head>
    16. <body>
    17.     <!--给 box1 增加拖拽的属性-->
    18.     <div class="box1" draggable="true"></div>
    19. </body>
    20. </html>
    复制代码


    效果如下：



    上图中，我们给 box1 增加了draggable="true" 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。


    拖拽元素的事件监听：（应用于拖拽元素）

    - ondragstart当拖拽开始时调用

    - ondragleave        当**鼠标离开拖拽元素时**调用

    - ondragend        当拖拽结束时调用

    - ondrag                 整个拖拽过程都会调用


    代码演示：

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6.     <style>
    7.         .box {
    8.             width: 200px;
    9.             height: 200px;
    10.             background-color: green;
    11.         }
    12.     </style>
    13. </head>
    14. <body>
    15. <div class="box" draggable="true"></div>

    17. <script>
    18.     var box = document.querySelector('.box');

    20.     //  绑定拖拽事件

    22.     //  拖拽开始
    23.     box.ondragstart = function () {
    24.         console.log('拖拽开始.');
    25.     }

    27.     //  拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
    28.     box.ondragleave = function () {
    29.         console.log('拖拽离开..');
    30.     }

    32.     //  拖拽结束
    33.     box.ondragend = function () {
    34.         console.log('拖拽结束...');
    35.         console.log("---------------");
    36.     }

    38.     box.ondrag = function () {
    39.         console.log('拖拽');
    40.     }

    42. </script>
    43. </body>
    44. </html>
    复制代码


    效果如下：



    打印结果：




    2、目标元素

    比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。

    页面中任何一个元素都可以成为目标元素。

    目标元素的事件监听：（应用于目标元素）

    - ondragenter        当拖拽元素进入时调用

    - ondragover        当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）

    - ondrop                当在目标元素上松开鼠标时调用

    - ondragleave        当鼠标离开目标元素时调用


    代码演示：

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6.     <style>
    7.         .one {
    8.             width: 100px;
    9.             height: 100px;
    10.             border: 1px solid #000;
    11.             background-color: green;
    12.         }

    14.         .two {
    15.             position: relative;
    16.             width: 200px;
    17.             height: 200px;
    18.             left: 300px;
    19.             top: 100px;
    20.             border: 1px solid #000;
    21.             background-color: red;
    22.         }
    23.     </style>
    24. </head>
    25. <body>
    26. <div class="one" draggable="true"></div>
    27. <div class="two"></div>

    29. <script>
    30.     var two = document.querySelector('.two');

    32.     //目标元素的拖拽事件

    34.     // 当被拖拽元素进入时触发
    35.     two.ondragenter = function () {
    36.         console.log("来了.");
    37.     }

    39.     // 当被拖拽元素离开时触发
    40.     two.ondragleave = function () {

    42.         console.log("走了..");
    43.     }

    45.     // 当拖拽元素在 目标元素上时，连续触发
    46.     two.ondragover = function (e) {
    47.         //阻止拖拽事件的默认行为
    48.         e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。

    50.         console.log("over...");
    51.     }

    53.     // 当在目标元素上松开鼠标是触发
    54.     two.ondrop = function () {
    55.         console.log("松开鼠标了....");
    56.     }
    57. </script>
    58. </body>
    59. </html>
    复制代码


    效果演示：



    注意，上方代码中，我们加了event.preventDefault()这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示：



    如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。

    总结：如果想让拖拽元素在目标元素里做点事情，就必须要在 ondragover() 里加event.preventDefault()这一行代码。



    历史

    界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。

    在HTML5中可以通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态

    window.history对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。

    - window.history.forward(); // 前进

    - window.history.back(); // 后退

    - window.history.go(); // 刷新

    - window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。

    - 通过JS可以加入一个访问状态

    - history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)



    地理定位

    在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。



    获取地理信息的方式

    1、IP地址


    2、三维坐标：


    （1）GPS（Global Positioning System，全球定位系统）。

    目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：

    - 1.美国 Global Positioning System （全球定位系统） 简称GPS；

    - 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；

    - 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；

    - 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；

    - 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；

    - 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。

    以上6个系统中国都能使用。

    （2）Wi-Fi定位：仅限于室内。

    （3）手机信号定位：通过运营商的信号塔定位。


    3、用户自定义数据：

    对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：




    隐私

    HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。


    API详解

    - navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息

    - navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息


    1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）

    - position.coords.latitude纬度

    - position.coords.longitude经度


    2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。


    3、可选参数 options 对象可以调整位置信息数据收集方式


    地理位置的 api 代码演示：

    1. <!DOCTYPE html>
    2. <html>
    3. <head lang="en">
    4.     <meta charset="UTF-8">
    5.     <title></title>
    6. </head>
    7. <body>
    8.     <script>
    9.         /*navigator 导航*/
    10.         //geolocation: 地理定位
    11. //        window.navigator.geolocation
    12. //        兼容处理
    13.         if(navigator.geolocation){
    14. //       如果支持，获取用户地理信息

    16. //            successCallback 当获取用户位置成功的回调函数
    17. //            errorCallback 当获取用户位置失败的回调函数

    19.             navigator.geolocation.getCurrentPosition(successCallback,errorCallback);

    21.         }else{
    22.             console.log('sorry,你的浏览器不支持地理定位');
    23.         }
    24.         // 获取地理位置成功的回调函数
    25.         function successCallback(position){
    26. //            获取用户当前的经纬度
    27. //            coords坐标
    28. //            纬度latitude
    29.             var wd=position.coords.latitude;
    30. //            经度longitude
    31.             var jd=position.coords.longitude;

    33.             console.log("获取用户位置成功！");
    34.             console.log(wd+'----------------'+jd);
    35. //          40.05867366972477----------------116.33668634275229

    37. //            谷歌地图：40.0601398850,116.3434224706
    38. //            百度地图：40.0658210000,116.3500430000
    39. //            腾讯高德：40.0601486487,116.3434373643
    40.         }
    41.         // 获取地理位置失败的回调函数
    42.         function errorCallback(error){
    43.             console.log(error);
    44.             console.log('获取用户位置失败！')
    45.         }
    46.     </script>
    47. </body>
    48. </html>
    复制代码



    全屏

    >  HTML5规范允许用户自定义网页上**任一元素**全屏显示。

    开启/关闭全屏显示

    方法如下：（注意 screen 是小写）

    1. requestFullscreen()   //让元素开启全屏显示

    3. cancleFullscreen()    //让元素关闭全屏显示
    复制代码



    为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写）

    1. webkitRequestFullScreen
    2. webkitCancleFullScreen

    4. mozRequestFullScreen
    5. mozCancleFullScreen
    复制代码


    检测当前是否处于全屏状态

    方法如下：

    1. document.fullScreen
    复制代码


    不同浏览器需要加私有前缀，比如：

    1. document.webkitIsFullScreen

    3. document.mozFullScreen
    复制代码


    全屏的伪类

    - :full-screen .box {}

    - :-webkit-full-screen {}

    - :moz-full-screen {}

    比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
    回复

    使用道具 举报

    返回列表
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 注册

    本版积分规则

    红盟社区--红客联盟 

    Processed in 0.058152 second(s), 21 queries.

    站点统计| 举报| Archiver| 手机版| 黑屋 |   

    备案号：冀ICP备20006029号-1 Powered by HUC © 2001-2021 Comsenz Inc.

    首页

    资讯

    社区

    互助

    家园

    群组

    文库

    文图

    组织活动

    总排行榜

    个人日志

    音乐电台

    爱心赞助

    每日签到

    微信机器

    微信图片

    手机扫我进入移动触屏客户端

    关注我们可获取更多热点资讯

    Honor accompaniments. theme macfee

    快速回复 返回顶部 返回列表