08-HTML5详解(二)

#本文主要内容

  • 拖拽

  • 历史

  • 地理位置

  • 全屏

#拖拽

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

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

#1、拖拽元素

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

举例如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.box1{
width: 200px;
height: 200px;
background-color: green; }
</style>
</head>
<body>
<!--给 box1 增加拖拽的属性-->
<div class="box1" draggable="true"></div>
</body>
</html>
 

效果如下:

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

拖拽元素的事件监听:(应用于拖拽元素)

  • ondragstart当拖拽开始时调用

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

  • ondragend 当拖拽结束时调用

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

代码演示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div> <script>
var box = document.querySelector('.box'); // 绑定拖拽事件 // 拖拽开始
box.ondragstart = function () {
console.log('拖拽开始.');
} // 拖拽离开:鼠标拖拽时离开被拖拽的元素时触发
box.ondragleave = function () {
console.log('拖拽离开..');
} // 拖拽结束
box.ondragend = function () {
console.log('拖拽结束...');
console.log("---------------");
} box.ondrag = function () {
console.log('拖拽');
} </script>
</body>
</html>
 

效果如下:

打印结果:

#2、目标元素

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

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

目标元素的事件监听:(应用于目标元素)

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

  • ondragover 当拖拽元素停留在目标元素上时,就会连续一直触发(不管拖拽元素此时是移动还是不动的状态)

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

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

代码演示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: green;
} .two {
position: relative;
width: 200px;
height: 200px;
left: 300px;
top: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div class="one" draggable="true"></div>
<div class="two"></div> <script>
var two = document.querySelector('.two'); //目标元素的拖拽事件 // 当被拖拽元素进入时触发
two.ondragenter = function () {
console.log("来了.");
} // 当被拖拽元素离开时触发
two.ondragleave = function () { console.log("走了..");
} // 当拖拽元素在 目标元素上时,连续触发
two.ondragover = function (e) {
//阻止拖拽事件的默认行为
e.preventDefault(); //【重要】一定要加这一行代码,否则,后面的方法 ondrop() 无法触发。 console.log("over...");
} // 当在目标元素上松开鼠标是触发
two.ondrop = function () {
console.log("松开鼠标了....");
}
</script>
</body>
</html>
 

效果演示:

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

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

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

案例:拖拽练习

完整版代码:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 400px;
height: 400px;
border: 1px solid #000;
} .one > div, .two > div {
width: 98px;
height: 98px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
float: left;
text-align: center;
line-height: 98px;
} .two {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="one">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="two"></div> <script>
var boxs = document.querySelectorAll('.one div');
// 临时的盒子 用于存放当前拖拽的元素 var two = document.querySelector('.two'); var temp = null;
// 给8个小盒子分别绑定拖拽事件
for (var i = 0; i < boxs.length; i++) {
boxs[i].ondragstart = function () {
// 保持当前拖拽的元素
temp = this;
console.log(temp);
} boxs[i].ondragend = function () {
// 当拖拽结束 ,清空temp
temp = null;
console.log(temp);
}
} // 目标元素的拖拽事件
two.ondragover = function (e) {
// 阻止拖拽的默认行为
e.preventDefault();
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
// 将拖拽的元素追加到 two里面来
this.appendChild(temp);
}
</script>
</body>
</html>
 

效果如下:

#历史

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

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

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

  1. window.history.forward(); // 前进
  2. window.history.back(); // 后退
  3. window.history.go(); // 刷新
  4. 通过JS可以加入一个访问状态
  5. 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 代码演示:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*navigator 导航*/
//geolocation: 地理定位
// window.navigator.geolocation
// 兼容处理
if(navigator.geolocation){
// 如果支持,获取用户地理信息 // successCallback 当获取用户位置成功的回调函数
// errorCallback 当获取用户位置失败的回调函数 navigator.geolocation.getCurrentPosition(successCallback,errorCallback); }else{
console.log('sorry,你的浏览器不支持地理定位');
}
// 获取地理位置成功的回调函数
function successCallback(position){
// 获取用户当前的经纬度
// coords坐标
// 纬度latitude
var wd=position.coords.latitude;
// 经度longitude
var jd=position.coords.longitude; console.log("获取用户位置成功!");
console.log(wd+'----------------'+jd);
// 40.05867366972477----------------116.33668634275229 // 谷歌地图:40.0601398850,116.3434224706
// 百度地图:40.0658210000,116.3500430000
// 腾讯高德:40.0601486487,116.3434373643
}
// 获取地理位置失败的回调函数
function errorCallback(error){
console.log(error);
console.log('获取用户位置失败!')
}
</script>
</body>
</html>
 

百度地图api举例:

<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title><script async src="http://c.cnzz.com/core.php"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NsGTBiDpgGQpI7KDmYNAPGuHWGjCh1zk"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {height: 100%;overflow: hidden;} </style> <script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script></head>
<body>
<div id="panorama"></div> <script type="text/javascript">
//全景图展示
// 谷歌获取的经纬度 40.05867366972477----------------116.33668634275229 // 谷歌地图:40.0601398850,116.3434224706
// 百度地图:40.0658210000,116.3500430000
// 腾讯高德:40.0601486487,116.3434373643
// var jd=116.336686;
// var wd=40.058673; var jd=116.350043;
var wd=40.065821; var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(jd, wd)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6}); panorama.addEventListener('position_changed', function(e){ //全景图位置改变后,普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
// //普通地图展示
// var mapOption = {
// mapType: BMAP_NORMAL_MAP,
// maxZoom: 18,
// drawMargin:0,
// enableFulltimeSpotClick: true,
// enableHighResolution:true
// }
// var map = new BMap.Map("normal_map", mapOption);
// var testpoint = new BMap.Point(jd, wd);
// map.centerAndZoom(testpoint, 18);
// var marker=new BMap.Marker(testpoint);
// marker.enableDragging();
// map.addOverlay(marker);
// marker.addEventListener('dragend',function(e){
// panorama.setPosition(e.point); //拖动marker后,全景图位置也随着改变
// panorama.setPov({heading: -40, pitch: 6});}
// );
</script>
</body>
</html>
 

#全屏

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

#开启/关闭全屏显示

方法如下:(注意 screen 是小写)

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

	cancleFullscreen()    //让元素关闭全屏显示
 

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

	webkitRequestFullScreen
webkitCancleFullScreen mozRequestFullScreen
mozCancleFullScreen
 

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

方法如下:

	document.fullScreen
 

不同浏览器需要加私有前缀,比如:

     document.webkitIsFullScreen

     document.mozFullScreen
 

#全屏的伪类

  • :full-screen .box {}

  • :-webkit-full-screen {}

  • :moz-full-screen {}

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

#代码举例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 250px;
height: 250px;
background-color: green;
margin: 100px auto;
border-radius: 50%;
} /*全屏伪类:当元素处于全屏时,改变元素的背景色*/
.box:-webkit-full-screen {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div> <script>
var box = document.querySelector('.box');
// box.requestFullscreen(); //直接这样写是没有效果的。之所以无效,应该是浏览器的机制,必须要点一下才可以实现全屏功能。
document.querySelector('.box').onclick = function () {
// 开启全屏显示的兼容写法
if (box.requestFullscreen) { //如果支持全屏,那就让元素全屏
box.requestFullscreen();
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen();
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen();
} }
</script>
</body>
</html>
 

效果如下:

html 08-HTML5详解(二)的更多相关文章

  1. .NET DLL 保护措施详解(二)关于性能的测试

    先说结果: 加了缓存的结果与C#原生代码差异不大了 我对三种方式进行了测试: 第一种,每次调用均动态编译 第二种,缓存编译好的对象 第三种,直接调用原生C#代码 .net dll保护系列 ------ ...

  2. PopUpWindow使用详解(二)——进阶及答疑

      相关文章:1.<PopUpWindow使用详解(一)——基本使用>2.<PopUpWindow使用详解(二)——进阶及答疑> 上篇为大家基本讲述了有关PopupWindow ...

  3. Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

    [Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.And ...

  4. logback -- 配置详解 -- 二 -- <appender>

    附: logback.xml实例 logback -- 配置详解 -- 一 -- <configuration>及子节点 logback -- 配置详解 -- 二 -- <appen ...

  5. 爬虫入门之urllib库详解(二)

    爬虫入门之urllib库详解(二) 1 urllib模块 urllib模块是一个运用于URL的包 urllib.request用于访问和读取URLS urllib.error包括了所有urllib.r ...

  6. [转]文件IO详解(二)---文件描述符(fd)和inode号的关系

    原文:https://www.cnblogs.com/frank-yxs/p/5925563.html 文件IO详解(二)---文件描述符(fd)和inode号的关系 ---------------- ...

  7. Android View 的绘制流程之 Layout 和 Draw 过程详解 (二)

    View 的绘制系列文章: Android View 的绘制流程之 Measure 过程详解 (一) Android View 绘制流程之 DecorView 与 ViewRootImpl 在上一篇  ...

  8. HTTPS详解二:SSL / TLS 工作原理和详细握手过程

    HTTPS 详解一:附带最精美详尽的 HTTPS 原理图 HTTPS详解二:SSL / TLS 工作原理和详细握手过程 在上篇文章HTTPS详解一中,我已经为大家介绍了 HTTPS 的详细原理和通信流 ...

  9. Linux dts 设备树详解(二) 动手编写设备树dts

    Linux dts 设备树详解(一) 基础知识 Linux dts 设备树详解(二) 动手编写设备树dts 文章目录 前言 硬件结构 设备树dts文件 前言 在简单了解概念之后,我们可以开始尝试写一个 ...

  10. pika详解(二) BlockingConnection

    pika详解(二) BlockingConnection   本文链接:https://blog.csdn.net/comprel/article/details/94592348 版权 Blocki ...

随机推荐

  1. CENTOS 7平滑升级PHP到最新版7.3

    安装Remi和EPEL数据源(仓库) rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm r ...

  2. Nacos安装与启动教程

    前言 Nacos是阿里巴巴集团开源的一个易于使用的平台,专为动态服务发现,配置和服务管理而设计,Nacos基本上支持现在所有类型的服务,例如,Dubbo / gRPC服务,Spring Cloud R ...

  3. Apiview+serallizers

    1.APIVIEW使用 https://www.cnblogs.com/xiaonq/p/10124104.html ModelVIewSet是对APIView封装 ModelSerializer是对 ...

  4. 分析 5种分布式事务方案,还是选了阿里的 Seata(原理 + 实战)

    好长时间没发文了,最近着实是有点忙,当爹的第 43 天,身心疲惫.这又赶上年底,公司冲 KPI 强制技术部加班到十点,晚上孩子隔两三个小时一醒,基本没睡囫囵觉的机会,天天处于迷糊的状态,孩子还时不时起 ...

  5. keras实现MobileNet

    利用keras实现MobileNet,并以mnist数据集作为一个小例子进行识别.使用的环境是:tensorflow-gpu 2.0,python=3.7 , GTX-2070的GPU 1.导入数据 ...

  6. 【POJ 1845】Sumdiv——数论 质因数 + 分治 + 快速幂

    (题面来自luogu) 题目描述 输入两个正整数a和b,求a^b的所有因子之和.结果太大,只要输出它对9901的余数. 输入格式 仅一行,为两个正整数a和b(0≤a,b≤50000000). 输出格式 ...

  7. Window .NetCore Nginx

    1.首先去官网下载Nginx 官网地址:http://nginx.org/en/download.html 2.下载好之后,我的文件是放在D:\InstallFiles\Nginx\nginx-1.1 ...

  8. 冲刺随笔——Day_One

    这个作业属于哪个课程 软件工程 (福州大学至诚学院 - 计算机工程系) 这个作业要求在哪里 团队作业第五次--Alpha冲刺 这个作业的目标 团队进行Alpha冲刺 作业正文 正文 其他参考文献 无 ...

  9. 安装pillow报错处理

    sudo python3 pip install pillow 报错:The headers or library files could not be found for jpeg,... 解决:安 ...

  10. k8s 部署 Java 项目

    前几天安装了 k8s 并测试了自动伸缩功能(HPA),今天来部署一个简单的 Java 应用到 k8s. 开始之前需要先安装一下 ingress 插件.ingress 作为 k8s 的流量入口,有多种实 ...