整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
例1: 無(wú)縫連續(xù)滾動(dòng)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
list-style: none;
}
div{
width: 1000px;
height: 130px;
margin: 100px auto;
border: 1px solid #000;
position: relative;
overflow: hidden; /* 防止?jié)L動(dòng)的圖片溢出 */
}
ul{
width: 2000px;
position: absolute;
left: 0;
top: 0;
}
li{
float: left;
}
img{
display: block;
}
</style>
</head>
<body>
<div>
<ul>
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
<!--我們?cè)趶?fù)制一套出來(lái)-->
<li><img src="img/1.png"/></li>
<li><img src="img/2.png"/></li>
<li><img src="img/3.png"/></li>
<li><img src="img/4.png"/></li>
<li><img src="img/5.png"/></li>
</ul>
</div>
<script type="text/javascript">
var ul=document.getElementsByTagName("ul")[0];
setInterval(function(){
if(getStyle(ul,"left")===-1000){
ul.style.left="0px";//執(zhí)行這一行代碼需要多長(zhǎng)時(shí)間???
}
ul.style.left=getStyle(ul,"left") - 1 + "px";
},10)
function getStyle(obj,attr){
if(window.getComputedStyle){
return parseInt(window.getComputedStyle(obj)[attr]);
}else{
return parseInt(obj.currentStyle[attr]);
}
}
</script>
</body>
</html>圖片規(guī)格: 200px 130px
本篇文章主要給大家介紹一下如何使用html+css完成二級(jí)橫向以及豎向菜單導(dǎo)航制作；菜單導(dǎo)航是網(wǎng)站建設(shè)中最常用的一塊了，基本每個(gè)網(wǎng)站內(nèi)都會(huì)有個(gè)導(dǎo)航菜單，用鼠標(biāo)劃過(guò)還可以有下拉子菜單。
由上圖我們可以看出，該圖包含一個(gè)橫向?qū)Ш綏l，然后鼠標(biāo)經(jīng)過(guò)橫向?qū)Ш綏l之后，子導(dǎo)航顯示出來(lái)。
我們這里主要用到的知識(shí)點(diǎn)就是列表標(biāo)簽（ul、dl）的使用、浮動(dòng)（float）的使用、絕對(duì)定位（absolute）及鼠標(biāo)經(jīng)過(guò)（hover）的效果。
1、列表標(biāo)簽ul、dl（我們使用ul、dl來(lái)創(chuàng)建同類(lèi)型的導(dǎo)航元素內(nèi)容，通過(guò)設(shè)置css樣式來(lái)達(dá)到圖片所示效果）；
2、浮動(dòng)元素float（每個(gè)導(dǎo)航元素我們需要使用float:left;讓其左對(duì)齊，這里涉及到了我們之前講解的如何清除浮動(dòng)的影響）；
3、絕對(duì)定位absolute（對(duì)于子導(dǎo)航我們要使用絕對(duì)定位來(lái)讓其浮動(dòng)在上級(jí)有定位元素的下方，不占據(jù)元素空間）
4、鼠標(biāo)經(jīng)過(guò)hover（使用css的鼠標(biāo)經(jīng)過(guò)元素（hover）效果，配合display的none（隱藏）和block（顯示）來(lái)實(shí)現(xiàn)子菜單的顯示與隱藏）
具體的實(shí)現(xiàn)html代碼以及css代碼就如下圖所示：
還有一個(gè)縱向菜單導(dǎo)航原理跟橫向的類(lèi)似，只需簡(jiǎn)單調(diào)整一下css代碼即可。
html代碼跟橫向一樣，這里就不再貼圖，具體的實(shí)現(xiàn)圖片效果以及css代碼就如下圖所示：
好了，本篇文章就給大家說(shuō)到這里，大家自己動(dòng)手寫(xiě)一下看能不能寫(xiě)出一樣的頁(yè)面效果出來(lái)，也可以找一些類(lèi)似的頁(yè)面自己練習(xí)一下，有需要源碼的可以直接私信我即可。
每日金句：每天收獲小進(jìn)步，積累起來(lái)就是大進(jìn)步；每天收獲小幸福，積攢起來(lái)便成大幸福。喜歡我的文章的小伙伴記得關(guān)注一下哦，每天將為你更新最新知識(shí)。
述
WebRTC (Web Real-Time Communications) 是一項(xiàng)實(shí)時(shí)通訊技術(shù)，它允許網(wǎng)絡(luò)應(yīng)用或者站點(diǎn)，在不借助中間媒介的情況下，建立瀏覽器之間點(diǎn)對(duì)點(diǎn)（Peer-to-Peer）的連接，實(shí)現(xiàn)視頻流和（或）音頻流或者其他任意數(shù)據(jù)的傳輸。WebRTC包含的這些標(biāo)準(zhǔn)使用戶(hù)在無(wú)需安裝任何插件或者第三方的軟件的情況下，創(chuàng)建點(diǎn)對(duì)點(diǎn)（Peer-to-Peer）的數(shù)據(jù)分享和電話(huà)會(huì)議成為可能。
webRTC協(xié)議介紹
ice
交互式連接機(jī)構(gòu) （ICE）是一個(gè)框架，允許您的網(wǎng)絡(luò)瀏覽器與同行連接。有許多原因，為什么從對(duì)等A到同行B的直升連接將不起作用。它需要繞過(guò)防火墻，防止打開(kāi)連接，給您一個(gè)獨(dú)特的地址，如果像大多數(shù)情況下，您的設(shè)備沒(méi)有公共 IP 地址，并通過(guò)服務(wù)器中繼數(shù)據(jù)，如果你的路由器不允許您直接與對(duì)等連接。ICE 使用 STUN 和/或 TURN 服務(wù)器來(lái)實(shí)現(xiàn)此目的，如下所述。
STUN
NAT 的會(huì)話(huà)橫向公用設(shè)施 （STUN）是一個(gè)協(xié)議，以發(fā)現(xiàn)您的公共地址，并確定任何限制，在你的路由器，將阻止與同行的直接連接。
客戶(hù)端將向 Internet 上的 STUN 服務(wù)器發(fā)送請(qǐng)求，該服務(wù)器將回復(fù)客戶(hù)的公共地址，以及路由器 NAT 后面是否訪問(wèn)客戶(hù)端。
NAT
網(wǎng)絡(luò)地址翻譯 （NAT）用于為您的設(shè)備提供公共 IP 地址。路由器將具有公共 IP 地址，連接到路由器的每個(gè)設(shè)備都將有一個(gè)私有 IP 地址。請(qǐng)求將從設(shè)備的私有 IP 轉(zhuǎn)換為路由器的公共 IP，并具有獨(dú)特的端口。這樣，您不需要每個(gè)設(shè)備都有獨(dú)特的公共 IP，但仍可以在互聯(lián)網(wǎng)上發(fā)現(xiàn)。
某些路由器將限制誰(shuí)可以連接到網(wǎng)絡(luò)上的設(shè)備。這可能意味著，即使我們有 STUN 服務(wù)器找到的公共 IP 地址，也沒(méi)有人能夠創(chuàng)建連接。在這種情況下，我們需要轉(zhuǎn)向轉(zhuǎn)向。
一些使用 NAT 的路由器采用一種稱(chēng)為"對(duì)稱(chēng) NAT"的限制。這意味著路由器將只接受您以前連接過(guò)的對(duì)等的連接。
使用 NAT 周?chē)闹欣^進(jìn)行橫向（轉(zhuǎn)）旨在通過(guò)打開(kāi)與 TURN 服務(wù)器的連接并通過(guò)該服務(wù)器中繼所有信息來(lái)繞過(guò)對(duì)稱(chēng) NAT 限制。您將創(chuàng)建與 TURN 服務(wù)器的連接，并告訴所有對(duì)應(yīng)方將數(shù)據(jù)包發(fā)送到服務(wù)器，然后轉(zhuǎn)發(fā)給服務(wù)器。這顯然伴隨著一些開(kāi)銷(xiāo)，所以它只使用，如果沒(méi)有其他選擇。
SDP
會(huì)話(huà)描述協(xié)議 （SDP）是描述連接的多媒體內(nèi)容的標(biāo)準(zhǔn)，如分辨率、格式、編解碼器、加密等，以便在數(shù)據(jù)傳輸時(shí)兩個(gè)對(duì)等可以相互理解。這在本質(zhì)上是描述內(nèi)容而不是媒體內(nèi)容本身的元數(shù)據(jù)。
因此，從技術(shù)上講，SDP 并不是真正的協(xié)議，而是用于描述設(shè)備之間共享介質(zhì)連接的數(shù)據(jù)格式。
記錄 SDP 遠(yuǎn)遠(yuǎn)超出了此文檔的范圍;然而，這里有一些值得注意的事情。
webRTC API
WebRTC主要讓瀏覽器具備三個(gè)作用。
WebRTC共分成三個(gè)API，分別對(duì)應(yīng)上面三個(gè)作用。
相關(guān)學(xué)習(xí)資料推薦，點(diǎn)擊下方鏈接免費(fèi)報(bào)名，先碼住不迷路~】
音視頻免費(fèi)學(xué)習(xí)地址：FFmpeg/WebRTC/RTMP/NDK/Android音視頻流媒體高級(jí)開(kāi)發(fā)
【免費(fèi)分享】音視頻學(xué)習(xí)資料包、大廠面試題、技術(shù)視頻和學(xué)習(xí)路線(xiàn)圖，資料包括（C/C++，Linux，F(xiàn)Fmpeg webRTC rtmp hls rtsp ffplay srs 等等）有需要的可以點(diǎn)擊788280672加群免費(fèi)領(lǐng)取~
navigator.getUserMedia方法目前主要用于，在瀏覽器中獲取音頻（通過(guò)麥克風(fēng)）和視頻（通過(guò)攝像頭），將來(lái)可以用于獲取任意數(shù)據(jù)流，比如光盤(pán)和傳感器。
下面的代碼用于檢查瀏覽器是否支持getUserMedia方法。
navigator.getUserMedia=navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
if (navigator.getUserMedia) {
// 支持
} else {
// 不支持
}Chrome 21, Opera 18和Firefox 17，支持該方法。目前，IE還不支持，上面代碼中的msGetUserMedia，只是為了確保將來(lái)的兼容。
getUserMedia方法接受三個(gè)參數(shù)。
navigator.getUserMedia({
video: true,
audio: true
}, onSuccess, onError);
getUserMedia的第一個(gè)參數(shù)是一個(gè)對(duì)象，表示要獲取哪些多媒體設(shè)備，上面的代碼表示獲取攝像頭和麥克風(fēng);onSuccess是一個(gè)回調(diào)函數(shù)，在獲取多媒體設(shè)備成功時(shí)調(diào)用；onError也是一個(gè)回調(diào)函數(shù)，在取多媒體設(shè)備失敗時(shí)調(diào)用。
下面是一個(gè)例子。
var constraints={video: true};
function onSuccess(stream) {
var video=document.querySelector("video");
video.src=window.URL.createObjectURL(stream);
}
function onError(error) {
console.log("navigator.getUserMedia error: ", error);
}
navigator.getUserMedia(constraints, onSuccess, onError);如果網(wǎng)頁(yè)使用了getUserMedia方法，瀏覽器就會(huì)詢(xún)問(wèn)用戶(hù)，是否同意瀏覽器調(diào)用麥克風(fēng)或攝像頭。如果用戶(hù)同意，就調(diào)用回調(diào)函數(shù)onSuccess；如果用戶(hù)拒絕，就調(diào)用回調(diào)函數(shù)onError。
onSuccess回調(diào)函數(shù)的參數(shù)是一個(gè)數(shù)據(jù)流對(duì)象stream。stream.getAudioTracks方法和stream.getVideoTracks方法，分別返回一個(gè)數(shù)組，其成員是數(shù)據(jù)流包含的音軌和視軌（track）。使用的聲音源和攝影頭的數(shù)量，決定音軌和視軌的數(shù)量。比如，如果只使用一個(gè)攝像頭獲取視頻，且不獲取音頻，那么視軌的數(shù)量為1，音軌的數(shù)量為0。每個(gè)音軌和視軌，有一個(gè)kind屬性，表示種類(lèi)（video或者audio），和一個(gè)label屬性（比如FaceTime HD Camera (Built-in)）。
onError回調(diào)函數(shù)接受一個(gè)Error對(duì)象作為參數(shù)。Error對(duì)象的code屬性有如下取值，說(shuō)明錯(cuò)誤的類(lèi)型。
下面通過(guò)getUserMedia方法，將攝像頭拍攝的圖像展示在網(wǎng)頁(yè)上。
首先，需要先在網(wǎng)頁(yè)上放置一個(gè)video元素。圖像就展示在這個(gè)元素中。
<video id="webcam"></video>然后，用代碼獲取這個(gè)元素。
function onSuccess(stream) {
var video=document.getElementById('webcam');
}接著，將這個(gè)元素的src屬性綁定數(shù)據(jù)流，攝影頭拍攝的圖像就可以顯示了。
function onSuccess(stream) {
var video=document.getElementById('webcam');
if (window.URL) {
video.src=window.URL.createObjectURL(stream);
} else {
video.src=stream;
}
video.autoplay=true;
// 或者 video.play();
}
if (navigator.getUserMedia) {
navigator.getUserMedia({video:true}, onSuccess);
} else {
document.getElementById('webcam').src='somevideo.mp4';
}在Chrome和Opera中，URL.createObjectURL方法將媒體數(shù)據(jù)流（MediaStream）轉(zhuǎn)為一個(gè)二進(jìn)制對(duì)象的URL（Blob URL），該URL可以作為video元素的src屬性的值。 在Firefox中，媒體數(shù)據(jù)流可以直接作為src屬性的值。Chrome和Opera還允許getUserMedia獲取的音頻數(shù)據(jù)，直接作為audio或者video元素的值，也就是說(shuō)如果還獲取了音頻，上面代碼播放出來(lái)的視頻是有聲音的。
獲取攝像頭的主要用途之一，是讓用戶(hù)使用攝影頭為自己拍照。Canvas API有一個(gè)ctx.drawImage(video, 0, 0)方法，可以將視頻的一個(gè)幀轉(zhuǎn)為canvas元素。這使得截屏變得非常容易。
<video autoplay></video>
<img src="">
<canvas style="display:none;"></canvas>
<script>
var video=document.querySelector('video');
var canvas=document.querySelector('canvas');
var ctx=canvas.getContext('2d');
var localMediaStream=null;
function snapshot() {
if (localMediaStream) {
ctx.drawImage(video, 0, 0);
// “image/webp”對(duì)Chrome有效，
// 其他瀏覽器自動(dòng)降為image/png
document.querySelector('img').src=canvas.toDataURL('image/webp');
}
}
video.addEventListener('click', snapshot, false);
navigator.getUserMedia({video: true}, function(stream) {
video.src=window.URL.createObjectURL(stream);
localMediaStream=stream;
}, errorCallback);
</script>通過(guò)瀏覽器捕獲聲音，需要借助Web Audio API。
window.AudioContext=window.AudioContext ||
window.webkitAudioContext;
var context=new AudioContext();
function onSuccess(stream) {
var audioInput=context.createMediaStreamSource(stream);
audioInput.connect(context.destination);
}
navigator.getUserMedia({audio:true}, onSuccess);getUserMedia方法的第一個(gè)參數(shù)，除了指定捕獲對(duì)象之外，還可以指定一些限制條件，比如限定只能錄制高清（或者VGA標(biāo)準(zhǔn)）的視頻。
var hdConstraints={
video: {
mandatory: {
minWidth: 1280,
minHeight: 720
}
}
};
navigator.getUserMedia(hdConstraints, onSuccess, onError);
var vgaConstraints={
video: {
mandatory: {
maxWidth: 640,
maxHeight: 360
}
}
};
navigator.getUserMedia(vgaConstraints, onSuccess, onError);如果本機(jī)有多個(gè)攝像頭/麥克風(fēng)，這時(shí)就需要使用MediaStreamTrack.getSources方法指定，到底使用哪一個(gè)攝像頭/麥克風(fēng)。
MediaStreamTrack.getSources(function(sourceInfos) {
var audioSource=null;
var videoSource=null;
for (var i=0; i !=sourceInfos.length; ++i) {
var sourceInfo=sourceInfos[i];
if (sourceInfo.kind==='audio') {
console.log(sourceInfo.id, sourceInfo.label || 'microphone');
audioSource=sourceInfo.id;
} else if (sourceInfo.kind==='video') {
console.log(sourceInfo.id, sourceInfo.label || 'camera');
videoSource=sourceInfo.id;
} else {
console.log('Some other kind of source: ', sourceInfo);
}
}
sourceSelected(audioSource, videoSource);
});
function sourceSelected(audioSource, videoSource) {
var constraints={
audio: {
optional: [{sourceId: audioSource}]
},
video: {
optional: [{sourceId: videoSource}]
}
};
navigator.getUserMedia(constraints, onSuccess, onError);
}上面代碼表示，MediaStreamTrack.getSources方法的回調(diào)函數(shù)，可以得到一個(gè)本機(jī)的攝像頭和麥克風(fēng)的列表，然后指定使用最后一個(gè)攝像頭和麥克風(fēng)。
RTCPeerConnectionl
RTCPeerConnection的作用是在瀏覽器之間建立數(shù)據(jù)的“點(diǎn)對(duì)點(diǎn)”（peer to peer）通信，也就是將瀏覽器獲取的麥克風(fēng)或攝像頭數(shù)據(jù)，傳播給另一個(gè)瀏覽器。這里面包含了很多復(fù)雜的工作，比如信號(hào)處理、多媒體編碼/解碼、點(diǎn)對(duì)點(diǎn)通信、數(shù)據(jù)安全、帶寬管理等等。
不同客戶(hù)端之間的音頻/視頻傳遞，是不用通過(guò)服務(wù)器的。但是，兩個(gè)客戶(hù)端之間建立聯(lián)系，需要通過(guò)服務(wù)器。服務(wù)器主要轉(zhuǎn)遞兩種數(shù)據(jù)。
WebRTC協(xié)議沒(méi)有規(guī)定與服務(wù)器的通信方式，因此可以采用各種方式，比如WebSocket。通過(guò)服務(wù)器，兩個(gè)客戶(hù)端按照Session Description Protocol（SDP協(xié)議）交換雙方的元數(shù)據(jù)。
下面是一個(gè)示例。
var signalingChannel=createSignalingChannel();
var pc;
var configuration=...;
// run start(true) to initiate a call
function start(isCaller) {
pc=new RTCPeerConnection(configuration);
// send any ice candidates to the other peer
pc.onicecandidate=function (evt) {
signalingChannel.send(JSON.stringify({ "candidate": evt.candidate }));
};
// once remote stream arrives, show it in the remote video element
pc.onaddstream=function (evt) {
remoteView.src=URL.createObjectURL(evt.stream);
};
// get the local stream, show it in the local video element and send it
navigator.getUserMedia({ "audio": true, "video": true }, function (stream) {
selfView.src=URL.createObjectURL(stream);
pc.addStream(stream);
if (isCaller)
pc.createOffer(gotDescription);
else
pc.createAnswer(pc.remoteDescription, gotDescription);
function gotDescription(desc) {
pc.setLocalDescription(desc);
signalingChannel.send(JSON.stringify({ "sdp": desc }));
}
});
}
signalingChannel.onmessage=function (evt) {
if (!pc)
start(false);
var signal=JSON.parse(evt.data);
if (signal.sdp)
pc.setRemoteDescription(new RTCSessionDescription(signal.sdp));
else
pc.addIceCandidate(new RTCIceCandidate(signal.candidate));
};RTCPeerConnection帶有瀏覽器前綴，Chrome瀏覽器中為webkitRTCPeerConnection，F(xiàn)irefox瀏覽器中為
mozRTCPeerConnection。Google維護(hù)一個(gè)函數(shù)庫(kù)adapter.js，用來(lái)抽象掉瀏覽器之間的差異。
RTCDataChannel
RTCDataChannel的作用是在點(diǎn)對(duì)點(diǎn)之間，傳播任意數(shù)據(jù)。它的API與WebSockets的API相同。
下面是一個(gè)示例。
var pc=new webkitRTCPeerConnection(servers,
{optional: [{RtpDataChannels: true}]});
pc.ondatachannel=function(event) {
receiveChannel=event.channel;
receiveChannel.onmessage=function(event){
document.querySelector("div#receive").innerHTML=event.data;
};
};
sendChannel=pc.createDataChannel("sendDataChannel", {reliable: false});
document.querySelector("button#send").onclick=function (){
var data=document.querySelector("textarea#send").value;
sendChannel.send(data);
};Chrome 25、Opera 18和Firefox 22支持RTCDataChannel。
外部函數(shù)庫(kù)
由于這兩個(gè)API比較復(fù)雜，一般采用外部函數(shù)庫(kù)進(jìn)行操作。目前，視頻聊天的函數(shù)庫(kù)有SimpleWebRTC、easyRTC、webRTC.io，點(diǎn)對(duì)點(diǎn)通信的函數(shù)庫(kù)有PeerJS、Sharefest。
下面是SimpleWebRTC的示例。
var webrtc=new WebRTC({
localVideoEl: 'localVideo',
remoteVideosEl: 'remoteVideos',
autoRequestMedia: true
});
webrtc.on('readyToCall', function () {
webrtc.joinRoom('My room name');
});下面是PeerJS的示例。
var peer=new Peer('someid', {key: 'apikey'});
peer.on('connection', function(conn) {
conn.on('data', function(data){
// Will print 'hi!'
console.log(data);
});
});
// Connecting peer
var peer=new Peer('anotherid', {key: 'apikey'});
var conn=peer.connect('someid');
conn.on('open', function(){
conn.send('hi!');
});原文 WebRTC實(shí)現(xiàn)瀏覽器上的音視頻通信 - 掘金
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
