整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
lt;marquee></marquee>文字滑動
<marquee behavior="slide"></marquee>滑動
<marquee behavior="scroll"></marquee>預(yù)設(shè)卷動
<marquee behavior="alternate"></marquee>來回卷動
<marquee direction="down"></marquee>向下卷動
<marquee direction="up"</marquee>向上卷動
<marquee direction="right"></marquee>向右卷動
<marquee direction="left"></marquee>向左卷動
<marquee loop="2"></marquee>循環(huán)次數(shù), 默認(rèn)值為：-1, 表示一直滾動下去。
<marquee width="180"></marquee>設(shè)定寬度
<marquee height="30"></marquee>設(shè)定高度
<marquee bgcolor="#FF0000"></marquee>設(shè)定背景顏色
<marquee scrollamount="30"></marquee>設(shè)定卷動距離(px)
<marquee scrolldelay="300"></marquee>設(shè)定卷動時間(毫秒)
<marquee hspace="100"></marquee> hspace 水平頁邊距
<marquee vspace="80"></marquee> vspace 垂直頁邊距
<marquee direction="left" behavior="scroll" width="300" height="400" bgcolor="#ff0" scrollAmount="50" scrollDelay="1000">
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
<li>JQ</li>
<li>BOOTSTRAP</li>
</ul>
</marquee>以上整數(shù)涉及的單位是像素px
<marquee>
<img src="images/03.jpg" />
<img src="images/04.jpg" />
<img src="images/05.jpg" />
<img src="images/06.jpg" />
<img src="images/07.jpg" />
<img src="images/08.jpg" />
<img src="images/09.jpg" />
</marquee>marquee常用到的兩個事件：
onmouseout="this.start()" 當(dāng)鼠標(biāo)移出該區(qū)域時
onbmouseover="this.stop()" 當(dāng)鼠標(biāo)移入該區(qū)域時
當(dāng)我們用鼠標(biāo)點(diǎn)擊滑塊時就可以拖拽，當(dāng)滑塊左外邊距超過背景開關(guān)寬度的一半時，燈泡亮起；小于一半時，燈泡熄滅。當(dāng)我們中途鼠標(biāo)按鍵抬起時，如果滑塊左外邊距超過背景開關(guān)寬度的一半，那么滑塊最終居右；反之，滑塊最終居左。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>電燈開關(guān)</title>
<style>
div{
/*border: 1px solid red;*/
width: 140px;
height: 40px;
margin: auto;
background: url("./img/switch.png");
}
</style>
</head>
<body>
<center>
<img src="img/off.gif" id="light">
</center>
<div>
<img src="img/button.png" id="slideBtn">
</div>
</body>
</html>鼠標(biāo)移動多大的距離(moveX-startX)，那么滑塊也移動多大的距離，要想讓滑塊移動，最簡單的做法可以直接修改滑塊的margin-left樣式值。如圖所示：
<script>
window.onload=function () {
//獲取滑塊按鈕元素對象
var slideBtn = document.getElementById("slideBtn");
//獲取背景開關(guān)div的寬度
var mWidth = document.getElementById("switchBg").offsetWidth;
//獲取燈泡圖片元素
var light=document.getElementById("light");
//定義一個變量表示是否按下鼠標(biāo)
var isDown=false;//默認(rèn)沒有按下
var startX;//按下點(diǎn)X軸坐標(biāo)
var marginLeft=0;//默認(rèn)左外邊距是0
var flag=false;//默認(rèn)燈泡沒有亮
//綁定鼠標(biāo)按下事件
slideBtn.onmousedown=function () {
//表示已經(jīng)按下了
isDown=true;
//保存按下的點(diǎn)X坐標(biāo)值
startX=event.screenX;
return false;
}
//綁定鼠標(biāo)移動事件
slideBtn.onmousemove=function () {
if(isDown){//按下了之后才執(zhí)行拖拽操作
//獲取移動的坐標(biāo)x
var moveX = event.screenX;
//計算查找，也就是移動的距離
var dx=moveX-startX;
startX=moveX;
//讓滑塊按鈕左外邊距移動dx像素
marginLeft+=dx;
//marginLeft不能大于mWidth/2，不能小于0
marginLeft=marginLeft>=mWidth/2?mWidth/2:marginLeft;
marginLeft=marginLeft<=0?0:marginLeft;
//設(shè)置滑塊按鈕的左外邊距
slideBtn.style.marginLeft=marginLeft+"px";
//如果左外邊距>mWidth/4 px，那么燈泡就亮
if(marginLeft>=mWidth/4 && !flag){
light.src="img/on.gif"
flag=!flag
}else if (marginLeft<=mWidth/4 && flag){
light.src="img/off.gif"
flag=!flag
}
}
return false;
}
//綁定鼠標(biāo)按鍵抬起事件
slideBtn.onmouseup=function () {
//最終按鈕要復(fù)位，左外邊距<mWidth/4就回到最左邊，否則回到最右邊
slideBtn.style.marginLeft=(marginLeft>=mWidth/4)?mWidth/2+"px":"0px"
isDown=false;//鼠標(biāo)按鍵抬起了
}
//鼠標(biāo)移出事件
slideBtn.onmouseout=function () {
isDown=false;//鼠標(biāo)按鍵抬起了,否則下次在移入到滑塊身上，isDown還是true，會導(dǎo)致我們沒有按下鼠標(biāo)就能拖動滑塊
}
}
</script>
這是一個比較簡單的小動畫，當(dāng)然我們不使用margin-left也能完成。比如使用定位，我們可以使用相對定位來個開關(guān)和背景布局，修改開關(guān)的left值也是一樣的。但是涉及到的事件依然是鼠標(biāo)的按下、移動、抬起、移除事件。
用JavaScript實(shí)現(xiàn)頁面滑動到指定位置加載動畫。
若頁面滾動到class名為group-pic的元素的位置時開始加載
原理： 1.獲取瀏覽器窗口的高度；
2.獲取頁面滾動的高度；
3.獲取頁面距離文檔（document）頂部的高度
offset().top具體指的是距哪里的高度呢？
一些獲寬高度的屬性：
網(wǎng)頁可見區(qū)域?qū)挘?document.body.clientWidth;
網(wǎng)頁可見區(qū)域高： document.body.clientHeight;
網(wǎng)頁可見區(qū)域?qū)挘?document.body.offsetWidth (包括邊線的寬);
網(wǎng)頁可見區(qū)域高： document.body.offsetHeight (包括邊線的寬);
網(wǎng)頁正文全文寬： document.body.scrollWidth;
網(wǎng)頁正文全文高： document.body.scrollHeight;
網(wǎng)頁被卷去的高： document.body.scrollTop;
網(wǎng)頁被卷去的左： document.body.scrollLeft;
網(wǎng)頁正文部分上： window.screenTop;
網(wǎng)頁正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的寬： window.screen.width;
屏幕可用工作區(qū)高度： window.screen.availHeight;
屏幕可用工作區(qū)寬度：window.screen.availWidth;
obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。
obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。
obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。
1.offsetTop : 當(dāng)前對象到其上級層頂部的距離.
不能對其進(jìn)行賦值.設(shè)置對象到頁面頂部的距離請用style.top屬性.
2.offsetLeft : 當(dāng)前對象到其上級層左邊的距離.
不能對其進(jìn)行賦值.設(shè)置對象到頁面左部的距離請用style.left屬性.
3.offsetWidth : 當(dāng)前對象的寬度.
與style.width屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值
4.offsetHeight : 與style.height屬性的區(qū)別在于:如對象的寬度設(shè)定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
