整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
次我們來說一下，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小時內與您取得聯系。
