整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
次我们来说一下，HTML网页中的定位，有很多小伙伴一定好奇，为什么我们写的代码都是按顺序罗列的而在网页的展示效果中，我们的各种样式，标签，图片等东西都是出现在网页的各个位置，网页看起来很美观，各种盒模型摆放合理，这是因为在HTML中有定位的能力，今天我们就来学习一下。
position在英语中是位置的意思，而在我们CSS代码中position也是跟位置有关的，position有三个属性值分别为relative（相对定位：相对于自己原来的位置进行定位，但保留自己原来的位置，别的元素无法占用），absolute（绝对定位：相对于有定位的父级进行定位，如果没有则相对于文档进行定位，定位会脱离文档，不保留原来的位置，会和原来的文档不在一个层），fixed（位置定位：他的位置不会随着滑轮的滚动而改变较常见于弹窗广告，他也会脱离文档流）。
我们说完了position，接下来我们就说说他是怎么进行定位的，我们有left，top，right，bottom，五个属性分别对应 距左边，距上边，距右边，距下边，大家注意到我在每个方向前都加了个距字，我们所做的定位是距各个方向的距离而不是移动，例：left:200px，是向右移动200像素，他的意思是距离左边增加200像素。在我们实际的编程中一般都不常用bottom，我们知道，滑轮是可以一直往下滑的，所以我们相对于底部定位的话就很困难。
我们来通过代码和结果来看一下：
没有定位的样式
加了relative
加了relative的结果
上面这个结果图看着比例不太对是因为作者截图没截好[捂脸]
我们可以看出猫图片并没有移动，而是给兔子图片留着位置。
加了absolute
加了absolute的结果
这个结果我们可以看出猫图片向前移动了，并没有保留兔子图片原来的位置
加了fixed
代码中的<br>是为了使滑轮可以滑动，以便更好的展示效果。
<script src="https://lf6-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>
用了fixed的效果展示。
以上的代码样式只对兔子图片起作用，我没有给猫添加任何样式，猫图片只是作为参照物。
目中经常会出现点击跳转锚点的方法，比如给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”，这样就实现简单的跳转，但是这样在url地址栏后面都会出现一个诸如www.csdn.net#锚点，然后你点击给一次后退都是退回上一个选择的锚点url，这里总结一些跳转锚点的方法。
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 800px;
width: 400px;
border: 2px solid black;
}
h2 {
position: fixed;
margin:50px 500px;
}
</style>
</head>
<body>
<h2>
<a href="#div1">to div1</a>
<a href="#div2">to div2</a>
<a href="#div3">to div3</a>
</h2>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
</body>
</html>
这种方法的缺点是点击锚点之后，浏览器的URL会发生变化，如果刷新可能会出现问题。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#div1Link").click(function() {
$("html, body").animate({
scrollTop: $("#div1").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div2Link").click(function() {
$("html, body").animate({
scrollTop: $("#div2").offset().top }, {duration: 500,easing: "swing"});
return false;
});
$("#div3Link").click(function() {
$("html, body").animate({
scrollTop: $("#div3").offset().top }, {duration: 500,easing: "swing"});
return false;
});
});
</script>
注意：运行上面的脚本的之前，先将为锚点增加相应的id，同时去掉href属性。
$("html, body")可以替换为响应的div，如果不起作用，试着给该div增加overflow：scroll属性。
另外，脚本可以进一步优化，自己来试试
这样做的好处是：URL地址不会变，同时点击锚点时会自动响应scroll事件，不需要重新绑定。
缺点是：如果页面复杂的话，偏移值可能会发生变化需要算法辅助。
document.getElementById("divId").scrollIntoView();
比如：
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll1_top").scrollIntoView(true);
}
这里就是点击id是#roll1的元素可以滚动到id是#roll1_top的地方，这里的#roll1和#roll1_top最好是一一对应的，
这种方法的好处，是URL不会变，同时能够响应相应的scroll事件，不需要算法什么的。代码如下：
<html>
<head>
<title>HTML5_ScrollInToView方法</title>
<meta charset="utf-8">
<script type="text/javascript">
window.onload = function(){
/*
如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，
以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()
作为标准方法。
scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，
调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么
窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素
会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部
不一定齐平，例如：
//让元素可见
document.forms[0].scrollIntoView();
当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也
会导致浏览器滚动显示获得焦点的元素。
支持该方法的浏览器有 IE、Firefox、Safari和Opera。
*/
document.querySelector("#roll1").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(false);
}
document.querySelector("#roll2").onclick = function(){
document.querySelector("#roll_top").scrollIntoView(true);
}
}
</script>
<style type="text/css">
#myDiv{
height:900px;
background-color:gray;
}
#roll_top{
height:900px;
background-color:green;
color:#FFF;
font-size:50px;
position:relative;
}
#bottom{
position:absolute;
display:block;
left;0;bottom:0;
}
</style>
</head>
<body>
<button id="roll1">scrollIntoView(false)</button>
<button id="roll2">scrollIntoView(true)</button>
<div id="myDiv"></div>
<div id="roll_top">
scrollIntoView(ture)元素上边框与视窗顶部齐平
<span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>
</div>
</body>
</html>
个人建议使用第四种方法。
html5 地理定位
html5 Geolocation API用于获得用户的地理位置
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的
注意:Geolocation(地理定位)对于拥有GPS的设备,地理定位更加精确
Geolocation API的主要方法是gerCurrentPositon,它用来获得用户的位置
下面是一个简答的地理定位实例,可返回用户位置的经度和纬度:
var x=document.getElementById("demo");
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentLocation(showPositon);}
else{
x.innerHTML="该浏览器不支持获取地理位置."}
}
function showPosition(position){
x.innerHTML="纬度:"+position.coords.latitude+
"<br>经度:"+position.coords.longitude;}
实例解析:
●检测是否支持地理定位
●如果支持,则运行gerCurrentPosition()方法.如果不支持,则向用户显示一段信息
●如果getCurrentPostion()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
●showPosition()函数获得并显示经度和纬度
上面的例子是一个非常基础的地理定位脚本,不含错误处理
你需要先熟悉JavaScript才能理解和使用API
如果gerCurrentPosition()运行成功,则getCurrentPosition()方法返回对象.始终返回latitude,longtitude以及accuracy属性.如果可用,则会返回其他下面的属性:
●coords.latitude:十进制数的纬度
●coords.longtitude:十进制的经度
●coords.accuracy:位置精度
●coords.altitude:海拔,海平面以上以米计
●coords.altitudeAccuracy:位置的海拔精度
●coords.heading:方向,从正北开始以度计
●coords.speed:速度,以米/每秒计
●timestamp:响应的日期/时间
二 html5 拖放
拖放(Drag和drop)是html5标准的组成部分
拖放是一种常见的特性,即抓取对象以后拖到另一个位置
在html5中,拖放是标准的一部分,任何元素都能够拖放
★设置元素为可拖放
首先,为了使元素可拖动,需要把draggable属性设置为true:
<img draggable="true">
★拖动什么-ondragstart和setData()
然后,规定当元素拖动时,会发生什么
dataTransfer.setData()方法,设置被拖数据的数据类型和值:
function drag(ev){
ev.dataTransfer.setData("Text",ev.target.id);}
在这个例子中,数据类型是"Text",值是可拖动元素的id("drag1")
★放到何处-ondragover
ondragover时间规定在何处放置被拖动的数据
默认地,无法将数据/元素放置到其他元素中,如果需要设置允许放置,我们必须阻止元素的默认处理方式.
这要通过调用ondragover时间的event.preventDefault()方法:
event.preventDefault()
★进行放置-ondrop
当放置被拖数据时,会发生drop事件
function drop(ev){
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));}
三 html5 SVG
什么是SVG?
●SVG指可伸缩矢量图形(Scalable Vector Graphics)
●SVG用于定义用于网络的基于矢量的图形
●SVG使用XML格式定义图形
●SVG图像在放大或改变尺寸的情况下其图形质量不会损失
●SVG是万维联盟的标准
在html5中,你能够直接将SVG元素嵌入html页面中
要使用SVG绘制图形,你首先需要创建一个<svg>标签
<svg width="1000" height="1000"></svg>
要创建一个圆形,需要添加一个<circle>标签
下面是SVG代码:
<svg width="1000" height="1000">
<circle cx="100" cy="50" r="40" fill="red" />
</svg>
●cx和cy属性定义圆点的x和y坐标.如果省略cx和cy,圆的中心会被设置为(0,0)
●r属性定义圆的半径
运行效果如下:
*请认真填写需求信息，我们会在24小时内与您取得联系。
