HTML 文字滑動(marquee)

lt;marquee></marquee>文字滑動

<marquee behavior="slide"></marquee>滑動

<marquee behavior="scroll"></marquee>預設卷動

<marquee behavior="alternate"></marquee>來回卷動

<marquee direction="down"></marquee>向下卷動

<marquee direction="up"</marquee>向上卷動

<marquee direction="right"></marquee>向右卷動

<marquee direction="left"></marquee>向左卷動

<marquee loop="2"></marquee>循環次數, 默認值為：-1, 表示一直滾動下去。

<marquee width="180"></marquee>設定寬度

<marquee height="30"></marquee>設定高度

<marquee bgcolor="#FF0000"></marquee>設定背景顏色

<marquee scrollamount="30"></marquee>設定卷動距離(px)

<marquee scrolldelay="300"></marquee>設定卷動時間(毫秒)

<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>

以上整數涉及的單位是像素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()" 當鼠標移出該區域時

onbmouseover="this.stop()" 當鼠標移入該區域時

.動畫效果描述

當我們用鼠標點擊滑塊時就可以拖拽，當滑塊左外邊距超過背景開關寬度的一半時，燈泡亮起；小于一半時，燈泡熄滅。當我們中途鼠標按鍵抬起時，如果滑塊左外邊距超過背景開關寬度的一半，那么滑塊最終居右；反之，滑塊最終居左。

2. html代碼準備

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>電燈開關</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>

3. 拖拽分析

鼠標移動多大的距離(moveX-startX)，那么滑塊也移動多大的距離，要想讓滑塊移動，最簡單的做法可以直接修改滑塊的margin-left樣式值。如圖所示：

4. JavaScript代碼實現動畫

<script>
        window.onload=function () {
            //獲取滑塊按鈕元素對象
            var slideBtn = document.getElementById("slideBtn");
            //獲取背景開關div的寬度
            var mWidth = document.getElementById("switchBg").offsetWidth;
            //獲取燈泡圖片元素
            var light=document.getElementById("light");
            //定義一個變量表示是否按下鼠標
            var isDown=false;//默認沒有按下
            var startX;//按下點X軸坐標
            var marginLeft=0;//默認左外邊距是0
            var flag=false;//默認燈泡沒有亮
            //綁定鼠標按下事件
            slideBtn.onmousedown=function () {
                //表示已經按下了
                isDown=true;
                //保存按下的點X坐標值
                startX=event.screenX;
                return false;
            }
            //綁定鼠標移動事件
            slideBtn.onmousemove=function () {
                if(isDown){//按下了之后才執行拖拽操作
                    //獲取移動的坐標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;
                    //設置滑塊按鈕的左外邊距
                    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;
            }
            //綁定鼠標按鍵抬起事件
            slideBtn.onmouseup=function () {
                //最終按鈕要復位，左外邊距<mWidth/4就回到最左邊，否則回到最右邊
                slideBtn.style.marginLeft=(marginLeft>=mWidth/4)?mWidth/2+"px":"0px"
                isDown=false;//鼠標按鍵抬起了
            }
            //鼠標移出事件
            slideBtn.onmouseout=function () {
                isDown=false;//鼠標按鍵抬起了,否則下次在移入到滑塊身上，isDown還是true，會導致我們沒有按下鼠標就能拖動滑塊
            }
        }
    </script>

5. 總結：

這是一個比較簡單的小動畫，當然我們不使用margin-left也能完成。比如使用定位，我們可以使用相對定位來個開關和背景布局，修改開關的left值也是一樣的。但是涉及到的事件依然是鼠標的按下、移動、抬起、移除事件。

用JavaScript實現頁面滑動到指定位置加載動畫。

若頁面滾動到class名為group-pic的元素的位置時開始加載

$(document).ready(function(){
var a,b,c;
a = $(window).height(); //瀏覽器窗口高度
var group = $(".group-pic");
$(window).scroll(function(){
b = $(this).scrollTop(); //頁面滾動的高度
c = group.offset().top; //元素距離文檔（document）頂部的高度
if(a+b>c){
...
}else{
...
}
});
});

原理： 1.獲取瀏覽器窗口的高度；

2.獲取頁面滾動的高度；

3.獲取頁面距離文檔（document）頂部的高度

offset().top具體指的是距哪里的高度呢？

一些獲寬高度的屬性：

網頁可見區域寬： document.body.clientWidth;

網頁可見區域高： document.body.clientHeight;

網頁可見區域寬： document.body.offsetWidth (包括邊線的寬);

網頁可見區域高： document.body.offsetHeight (包括邊線的寬);

網頁正文全文寬： document.body.scrollWidth;

網頁正文全文高： document.body.scrollHeight;

網頁被卷去的高： document.body.scrollTop;

網頁被卷去的左： document.body.scrollLeft;

網頁正文部分上： window.screenTop;

網頁正文部分左： window.screenLeft;

屏幕分辨率的高： window.screen.height;

屏幕分辨率的寬： window.screen.width;

屏幕可用工作區高度： window.screen.availHeight;

屏幕可用工作區寬度：window.screen.availWidth;

obj.offsetTop 指 obj 距離上方或上層控件的位置，整型，單位像素。

obj.offsetLeft 指 obj 距離左方或上層控件的位置，整型，單位像素。

obj.offsetWidth 指 obj 控件自身的寬度，整型，單位像素。

obj.offsetHeight 指 obj 控件自身的高度，整型，單位像素。

1.offsetTop : 當前對象到其上級層頂部的距離.

不能對其進行賦值.設置對象到頁面頂部的距離請用style.top屬性.

2.offsetLeft : 當前對象到其上級層左邊的距離.

不能對其進行賦值.設置對象到頁面左部的距離請用style.left屬性.

3.offsetWidth : 當前對象的寬度.

與style.width屬性的區別在于:如對象的寬度設定值為百分比寬度,則無論頁面變大還是變小,style.width都返回此百分比,而offsetWidth則返回在不同頁面中對象的寬度值而不是百分比值

4.offsetHeight : 與style.height屬性的區別在于:如對象的寬度設定值為百分比高度,則無論頁面變大還是變小,style.height都返回此百分比,而offsetHeight則返回在不同頁面中對象的高度值而不是百分比值

在線咨詢

上一篇：HTML <legend> 標簽
下一篇：JavaScript瀏覽器對象

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。