JavaScript 的 Math.floor()

JavaScript 的 Math.floor() 函數(shù)

ath.floor() 返回小于或等于一個(gè)給定數(shù)字的最大整數(shù)。

可以理解 Math.floor()為向下取整。

與其相對(duì)的是 Math.ceil() ，這個(gè)是向上取整。

如下面的代碼：

Math.floor( 45.95);
// 45
Math.floor( 45.05);
// 45
Math.floor( 4 );
// 4
Math.floor(-45.05);
// -46
Math.floor(-45.95);
// -46

上圖演示了這個(gè)函數(shù)的一些小對(duì)比。

介

CSS 是什么？

CSS是Cascading Style Sheets的簡(jiǎn)稱，中文稱為層疊樣式表。

屬性和屬性值用冒號(hào)隔開，以分號(hào)結(jié)尾。

CSS 四種引入方式：

1.行內(nèi)式

行內(nèi)式是在標(biāo)簽的style屬性中設(shè)定CSS樣式。

<div style="..."></div>

2.嵌入式

嵌入式是將CSS樣式集中寫在網(wǎng)頁的<head>標(biāo)簽的<style></style>標(biāo)簽對(duì)中。

<head>

    ...

    <style type="text/css">

        ...此處寫CSS樣式

    </style>

</head>

3.導(dǎo)入式
將一個(gè)獨(dú)立的.css文件引入HTML文件中，導(dǎo)入式使用@import 引入外部CSS文件，<style>標(biāo)記也是寫在<head>標(biāo)記中。

導(dǎo)入式會(huì)在整個(gè)網(wǎng)頁裝載完后再裝載CSS文件。

<head>

    ...

    <style type="text/css">

        @import "My.css"; 此處注意.css文件的路徑

    </style>

</head>

4.鏈接式
將一個(gè)獨(dú)立的.css文件引入到HTML文件中，使用<link>標(biāo)記寫在<head>標(biāo)記中。

鏈接式會(huì)以網(wǎng)頁文件主體裝載前裝載CSS文件。

<head>

    ...

    <link href="My.css" rel="stylesheet" type="text/css">

</head>

樣式應(yīng)用順序：

行內(nèi)樣式優(yōu)先級(jí)最高
針對(duì)相同的樣式屬性，不同的樣式屬性將以合并的方式呈現(xiàn)
相同樣式并且相同屬性，呈現(xiàn)方式在<head>中的順序決定，后面會(huì)覆蓋前面屬性
!important 指定樣式規(guī)則應(yīng)用最優(yōu)先

.nick {
    color: yellow !important;
}

選擇器（Selector）

基本選擇器：

1.通用元素選擇器

* 表示應(yīng)用到所有的標(biāo)簽。

* {color: yellow}

2.標(biāo)簽選擇器

匹配所有使用 div 標(biāo)簽的元素（可以匹配所有標(biāo)簽）

div {color: yellow}

3.類選擇器

匹配所有class屬性中包含info的元素。

語法：.類名{樣式}（類名不能以數(shù)字開頭，類名要區(qū)分大小寫。）

.Mycolor {color: yellow}
<h3 class="Mycolor">nick</h3>

4.ID選擇器

使用id屬性來調(diào)用樣式，在一個(gè)網(wǎng)頁中id的值都是唯一的（是W3C規(guī)范而不是規(guī)則，所以不會(huì)報(bào)錯(cuò)）。

語法：#ID名{樣式}（ID名不能以數(shù)字開頭）

#Mycolor {color: yellow}
<h3 id="Mycolor">Nick.</h3>

組合選擇器：

1.多元素選擇器

同時(shí)匹配h3,h4標(biāo)簽，之間用逗號(hào)分隔。

h3,h4 {color: yellow;}
<h3>Nick</h3>
<h4>Jenny</h4>

2.后代元素選擇器

匹配所有div標(biāo)簽里嵌套的P標(biāo)簽，之間用空格分隔。

    div p {color: yellow;}
<div>
    <p>Nick</p>
    <div>
        <p>Nick</p>
    </div>
</div>

3.子元素選擇器

匹配所有div標(biāo)簽里嵌套的子P標(biāo)簽，之間用>分隔。

    div > p {color: yellow;}
<div>
    <p>Nick</p>
    <p>Nick</p>
</div>

4.毗鄰元素選擇器

匹配所有緊隨div標(biāo)簽之后的同級(jí)標(biāo)簽P，之間用+分隔（只能匹配一個(gè)）。

    div + p {color: yellow;}
<div>Nick</div>
<p>Nick</p>

屬性選擇器：

1.[title] & P[title]

設(shè)置所有具有title屬性的標(biāo)簽元素；

設(shè)置所有具有title屬性的P標(biāo)簽元素。

    [title]
    {
        color: yellow;
    }
    p[title]
    {
        color: yellow;
    }
 
<div title>Nick</div>
<p title>Nick</p>

2.[title=Nick]

設(shè)置所有title屬性等于“Nick”的標(biāo)簽元素。

    [title="Nick"]
    {
        color: yellow;
    }
<p title="Nick">Nick</p>

3.[title~=Nick]

設(shè)置所有title屬性具有多個(gè)空格分隔的值、其中一個(gè)值等于“Nick”的標(biāo)簽元素。

    [title~="Nick"]
    {
        color: yellow;
    }
<p title="Nick Jenny">Nick</p>
<p title="Jenny Nick">Nick</p>

4.[title|=Nick]

設(shè)置所有title屬性具有多個(gè)連字號(hào)分隔（hyphen-separated）的值、其中一個(gè)值以"Nick"開頭的標(biāo)簽元素。

例：lang屬性："en"、"en-us"、"en-gb"等等

    [title|="Nick"]
    {
        color: yellow;
    }
 <p title="Nick-Jenny">Nick</p>

5.[title^=Nick]

設(shè)置屬性值以指定值開頭的每個(gè)標(biāo)簽元素。

    [title^="Nick"]
    {
        color: yellow;
    }
<p title="NickJenny">Nick</p>

6.[title$=Nick]

設(shè)置屬性值以指定值結(jié)尾的每個(gè)標(biāo)簽元素。

    [title$="Nick"]
    {
        color: yellow;
    }
<p title="JennyNick">Nick</p>

7.[title*=Nick]

設(shè)置屬性值中包含指定值的每個(gè)元素

[title*="Nick"]
    {
        color: yellow;
    }
 
<p title="SNickJenny">Nick</p>

偽類選擇器：

1. link、hover、active、visited

a:link（未訪問的鏈接狀態(tài)）,用于定義了常規(guī)的鏈接狀態(tài)。
a:hover（鼠標(biāo)放在鏈接上的狀態(tài)）,用于產(chǎn)生視覺效果。
a:active（在鏈接上按下鼠標(biāo)時(shí)的狀態(tài)）。
a:visited（已訪問過的鏈接狀態(tài)）,可以看出已經(jīng)訪問過的鏈接。

    a:link{color: black}
    a:hover{color: yellow}
    a:active{color: blue}
    a:visited{color: red} 
<a href="#">Nick</a>

2. before、after

P:before 在每個(gè)<p>元素的內(nèi)容之前插入內(nèi)容;
P:after 在每個(gè)<p>元素的內(nèi)容之后插入內(nèi)容。

    p {
        color: yellow;
    }
    p:before{
        content: "before...";
    }
    p:after{
        content: "after...";
    }
 <p> Nick </p>

常用屬性

1. 顏色屬性：

color

HEX（十六進(jìn)制色：color: #FFFF00 --> 縮寫：#FF0）
RGB（紅綠藍(lán)，使用方式：color:rgb(255,255,0)或者color:rgb(100%,100%,0%)）
RGBA（紅綠藍(lán)透明度，A是透明度在0~1之間取值。使用方式：color:rgba(255,255,0,0.5)）
HSL（CSS3有效,H表示色調(diào)，S表示飽和度，L表示亮度，使用方式：color:hsl(360,100%,50%)）
HSLA（和HSL相似，A表示Alpha透明度，取值0~1之間。）

transparent

全透明，使用方式：color: transparent;

opacity

元素的透明度，語法：opacity: 0.5;
屬性值在0.0到1.0范圍內(nèi)，0表示透明，1表示不透明。
filter濾鏡屬性（只適用于早期的IE瀏覽器，語法：filter:alpha(opacity:20);）。

2. 字體屬性:

font-style: 用于規(guī)定斜體文本

normal 文本正常顯示
italic 文本斜體顯示
oblique 文本傾斜顯示

font-weight: 設(shè)置文本的粗細(xì)

normal（默認(rèn)）
bold（加粗）
bolder（相當(dāng)于<strong>和<b>標(biāo)簽）
lighter （常規(guī)）
100 ~ 900 整百（400=normal，700=bold）

font-size: 設(shè)置字體的大小

默認(rèn)值：medium
<absolute-size>可選參數(shù)值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
<relative-size>相對(duì)于父標(biāo)簽中字體的尺寸進(jìn)行調(diào)節(jié)。可選參數(shù)值：smaller、 larger
<percentage>百分比指定文字大小。
<length>用長度值指定文字大小，不允許負(fù)值。

font-family：字體名稱

使用逗號(hào)隔開多種字體（優(yōu)先級(jí)從前向后，如果系統(tǒng)中沒有找到當(dāng)前字體，則往后面尋找）

font：簡(jiǎn)寫屬性

語法：font：字體大小/行高字體;（字體要在最后）

3. 文本屬性:

white-space: 設(shè)置元素中空白的處理方式

normal：默認(rèn)處理方式。
pre：保留空格，當(dāng)文字超出邊界時(shí)不換行
nowrap：不保留空格，強(qiáng)制在同一行內(nèi)顯示所有文本，直到文本結(jié)束或者碰到br標(biāo)簽
pre-wrap：保留空格，當(dāng)文字碰到邊界時(shí)換行
pre-line：不保留空格，保留文字的換行，當(dāng)文字碰到邊界時(shí)換行

direction: 規(guī)定文本的方向

ltr 默認(rèn)，文本方向從左到右。
rtl 文本方向從右到左。

text-align: 文本的水平對(duì)齊方式

left
center
right

line-height: 文本行高

normal 默認(rèn)

vertical-align: 文本所在行高的垂直對(duì)齊方式

baseline 默認(rèn)
sub 垂直對(duì)齊文本的下標(biāo)，和<sub>標(biāo)簽一樣的效果
super 垂直對(duì)齊文本的上標(biāo)，和<sup>標(biāo)簽一樣的效果
top 對(duì)象的頂端與所在容器的頂端對(duì)齊
text-top 對(duì)象的頂端與所在行文字頂端對(duì)齊
middle 元素對(duì)象基于基線垂直對(duì)齊
bottom 對(duì)象的底端與所在行的文字底部對(duì)齊
text-bottom 對(duì)象的底端與所在行文字的底端對(duì)齊

text-indent: 文本縮進(jìn)

letter-spacing: 添加字母之間的空白

word-spacing: 添加每個(gè)單詞之間的空白

text-transform: 屬性控制文本的大小寫

capitalize 文本中的每個(gè)單詞以大寫字母開頭。
uppercase 定義僅有大寫字母。
lowercase 定義僅有小寫字母。

text-overflow: 文本溢出樣式

clip 修剪文本。
ellipsis 顯示省略符號(hào)...來代表被修剪的文本。
string 使用給定的字符串來代表被修剪的文本。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        div {
            width: 100px;
            height: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    </style>
</head>
<body>
    <div>索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧 索寧</div>
</body>
</html>

text-decoration: 文本的裝飾

none 默認(rèn)。
underline 下劃線。
overline 上劃線。
line-through 中線。

text-shadow：文本陰影

第一個(gè)參數(shù)是左右位置
第二個(gè)參數(shù)是上下位置
第三個(gè)參數(shù)是虛化效果
第四個(gè)參數(shù)是顏色
text-shadow: 5px 5px 5px #888;

word-wrap：自動(dòng)換行

word-wrap: break-word;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p {
            width: 150px;
            height: 160px;
            background-color: #FFA500;
            /*邊框陰影*/
            box-shadow: 10px 10px 5px #888;
            /*自動(dòng)換行*/
            word-wrap: break-word;
        }
        h1 {
            text-shadow: 5px 5px 5px #888;
        }
    </style>
</head>
<body>
    <p>
        When you are old and grey and full of sleep,And nodding by the fire, take down this book,And slowly read, and dream of the soft look
    </p>
    <h1>索寧</h1>
</body>
</html>

a {
    text-decoration: none;
    /*去除a標(biāo)簽下劃線*/
}

4. 背景屬性

background-color: 背景顏色

background-image 設(shè)置圖像為背景

url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png"); 圖片地址

background-image:linear-gradient(green,blue,yellow,red,black); 顏色漸變效果

background-position 設(shè)置背景圖像的位置坐標(biāo)

background-position: center center; 圖片置中，x軸center，y軸center
1px -195px 截取圖片某部分，分別代表坐標(biāo)x，y軸

background-repeat 設(shè)置背景圖像不重復(fù)平鋪

no-repeat 設(shè)置圖像不重復(fù)，常用
round 自動(dòng)縮放直到適應(yīng)并填充滿整個(gè)容器
space 以相同的間距平鋪且填充滿整個(gè)容器

background-attachment 背景圖像是否固定或者隨著頁面的其余部分滾動(dòng)

background 簡(jiǎn)寫

background: url("o_ns.png") no-repeat 0 -196px;
background: url("o_ns.png") no-repeat center bottom 15px;
background: url("o_ns.png") no-repeat left 30px bottom 15px;

5. 列表屬性

list-style-type: 列表項(xiàng)標(biāo)志的類型

none 去除標(biāo)志
decimal-leading-zero; 02.
square; 方框
circle; 空心圓
upper-alph; & disc; 實(shí)心圓

list-style-image：將圖象設(shè)置為列表項(xiàng)標(biāo)志

list-style-position：列表項(xiàng)標(biāo)志的位置

inside
outside

list-style：縮寫

頁面布局

1. 邊框

border-style：邊框樣式

solid 默認(rèn)，實(shí)線
double 雙線
dotted 點(diǎn)狀線條
dashed 虛線

border-color：邊框顏色

border-width：邊框?qū)挾?/strong>

border-radius：圓角

1個(gè)參數(shù)：四個(gè)角度應(yīng)用
2個(gè)參數(shù)：第一個(gè)參數(shù)應(yīng)用于左上、右下；第二個(gè)參數(shù)應(yīng)用于左下、右上
3個(gè)參數(shù)：第一個(gè)參數(shù)應(yīng)用于左上；第二個(gè)參數(shù)應(yīng)用于左下、右上；第三個(gè)參數(shù)應(yīng)用于右下
4個(gè)參數(shù)：左上、右上、右下、左下（順時(shí)針）

border: 簡(jiǎn)寫

border: 2px yellow solid;

box-shadow：邊框陰影

第一個(gè)參數(shù)是左右位置
第二個(gè)參數(shù)是上下位置
第三個(gè)參數(shù)是虛化效果
第四個(gè)參數(shù)是顏色
box-shadow: 10px 10px 5px #888;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            border:2px solid;
            border-radius:25px;
            width: 140px;
        }
    </style>
</head>
<body>
    <div>
         點(diǎn)贊哦！dear. 
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .radius1 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: yellow;
            border-radius: 20px;
        }
        .radius2 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: red;
            border-radius: 20px 35px;
        }
        .radius3 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: blue;
            border-radius: 20px 35px 50px;
        }
        .radius4 {
            display: inline-block;
            width: 100px;
            height: 100px;
            background-color: green;
            border-radius: 20px 35px 50px 60px;
        }
    </style>
</head>
<body>
    <div>
        <span class="radius1"></span>
        <span class="radius2"></span>
        <span class="radius3"></span>
        <span class="radius4"></span>
    </div>
</body>
</html>

邊框?qū)崿F(xiàn)各種三角符號(hào)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle-one {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-two {
            display: inline-block;
            border-top: 0 red solid;
            border-right: 50px green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-stree {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 50px yellow solid;
            border-left: 50px blue solid;
        }
        .triangle-four {
            display: inline-block;
            border-top: 50px red solid;
            border-right: 0 green solid;
            border-bottom: 0 yellow solid;
            border-left: 50px blue solid;
        }
 
        .triangle-five {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 50px red solid;
        }
        .triangle-six {
            display: inline-block;
            border: 50px transparent solid;
            border-bottom: 50px yellow solid;
        }
        .triangle-seven {
            display: inline-block;
            border: 50px transparent solid;
            border-top: 60px red solid;
            border-right: 0;
        }
        .triangle-eight {
            display: inline-block;
            border: 50px transparent solid;
            border-left: 30px yellow solid;
            border-bottom: 0;
        }
    </style>
</head>
<body>
    <div class="triangle-one"></div>
    <div class="triangle-two"></div>
    <div class="triangle-stree"></div>
    <div class="triangle-four"></div>
    <div class="triangle-five"></div>
    <div class="triangle-six"></div>
    <div class="triangle-seven"></div>
    <div class="triangle-eight"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .back {
            width: 1000px;
            height: 1000px;
            margin: 0 auto;
            background-color: #ddd;
            position: relative;
        }
        .back-in {
            position: absolute;
            width: 1020px;
            height: 45px;
            left: -20px;
            top: 50px;
            background-color: #2F4F4F;
        }
        .back-img {
            border: 20px solid transparent;
            border-top: 10px solid dimgrey;
            border-right: 0;
            display: inline-block;
            position: absolute;
            top: 95px;
            left: -20px;
        }
        .back-font {
            line-height: 9px;
            margin-left: 30px;
            color: white;
        }
    </style>
</head>
<body>
    <div class="back">
        <div class="back-in"><h3 class="back-font">妹子求關(guān)注 ^.^</h3></div>
        <div class="back-img"></div>
    </div>
</body>
</html>

2.★ 盒子模型

一個(gè)標(biāo)準(zhǔn)的盒子模型：

padding:用于控制內(nèi)容與邊框之間的距離;

margin: 用于控制元素與元素之間的距離;

一個(gè)參數(shù)，應(yīng)用于四邊。

　 兩個(gè)參數(shù)，第一個(gè)用于上、下，第二個(gè)用于左、右。

　 三個(gè)參數(shù)，第一個(gè)用于上，第二個(gè)用于左、右，第三個(gè)用于下。

邊框在默認(rèn)情況下會(huì)定位于瀏覽器窗口的左上角，但是并沒有緊貼著瀏覽器的窗口的邊框，這是因?yàn)閎ody本身也是一個(gè)盒子，外層還有html，
在默認(rèn)情況下，body距離html會(huì)有若干像素的margin，所以body中的盒子不會(huì)緊貼瀏覽器窗口的邊框了。

解決方法：
body {
    margin: 0;
}

3.★ display

none 不顯示。
block 顯示為塊級(jí)元素。
inline 顯示為內(nèi)聯(lián)元素。
inline-block 行內(nèi)塊元素（會(huì)保持塊元素的高寬）。
list-item 顯示為列表元素。

4. visibility

visible 元素可見
hidden 元素不可見
collapse 當(dāng)在表格元素中使用時(shí)，此值可刪除一行或一列，不會(huì)影響表格的布局。

5.★ float 浮動(dòng)

讓一行顯示兩個(gè)塊級(jí)標(biāo)簽，會(huì)脫離文檔流

none
left 左浮動(dòng)
right 右浮動(dòng)

clear 清除浮動(dòng)：

none : 默認(rèn)值。允許兩邊都可以有浮動(dòng)對(duì)象
left : 不允許左邊有浮動(dòng)對(duì)象
right : 不允許右邊有浮動(dòng)對(duì)象
both : 不允許兩邊有浮動(dòng)對(duì)象

6. clip 剪裁圖像

rect 剪裁定位元素：

auto 默認(rèn)值，無剪切
上-右-下-左（順時(shí)針）的順序提供四個(gè)偏移值
區(qū)域外的部分是透明的
必須指定 position:absolute;
例：clip:rect(0px,60px,200px,0px);

7. overflow 設(shè)置當(dāng)對(duì)象的內(nèi)容超過其指定高度及寬度時(shí)如何顯示內(nèi)容

visible 默認(rèn)值，內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外。
hidden 內(nèi)容會(huì)被修剪，并且其余內(nèi)容是不可見的。
scroll 內(nèi)容會(huì)被修剪，但是瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。
auto 如果內(nèi)容被修剪，則瀏覽器會(huì)顯示滾動(dòng)條以便查看其余的內(nèi)容。

8.★ position 規(guī)定元素的定位類型

通過以下四種屬性進(jìn)行定位：

left
top
right
bottom
z-index

9. z-index 元素層疊順序

z-index 僅在定位元素上有效（例：position:absolute;）
可以指定負(fù)數(shù)屬性值（例：-1;）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            z-index: -1;
        }
        .z-index2 {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            top: 20px;
            left: 20px;
            z-index: 5;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
</body>
</html>

10. outline 邊框輪廓

outline-width 輪廓寬度
outline-color 輪廓顏色
outline-style 輪廓樣式

11. zoom 縮放比例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .zoom1 {
            zoom: 100%;
        }
        .zoom2 {
            zoom: 150%;
        }
        .zoom3 {
            zoom: 200%;
        }
    </style>
</head>
<body>
    <div class="zoom1">Nick 100%</div>
    <div class="zoom2">Nick 200%</div>
    <div class="zoom3">Nick 300%</div>
</body>
</html>

12. cursor 鼠標(biāo)的類型形狀

鼠標(biāo)放在以下單詞上，There will be a miracle：

url: 自定義光標(biāo)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<link href="cc2.css" rel="stylesheet" type="text/css">-->
    <style>
        body {
            cursor: url("mouse.png"), auto;
            /*圖片地址：http://images.cnblogs.com/cnblogs_com/suoning/845162/o_mouse.png*/
        }
    </style>
</head>
<body>
    <div><img src="http://images.cnblogs.com/cnblogs_com/suoning/845162/o_ns.png" height="100%" width="100%"></div>
</body>
</html>

Auto: 默認(rèn)
Default: 默認(rèn)
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
Crosshair
Pointer
Move
text
wait
help

not-allowed

13. transform、transition 動(dòng)畫效果

transform 轉(zhuǎn)換，變形

origin 定義旋轉(zhuǎn)基點(diǎn)（left top center right bottom 坐標(biāo)值） transform-origin: 50px 50px; transform-origin: left;。
rotate 旋轉(zhuǎn) transform:rotate(50deg) 旋轉(zhuǎn)角度可以為負(fù)數(shù)，需要先定義origin。
skew 扭曲 transform:skew(50deg,50deg) 分別為相對(duì)x軸傾斜,相對(duì)y軸傾斜。
scale 縮放 transform:scale(2,3) 橫向放大2倍，縱向放大3倍；transform:scale(2) 橫豎都放大2倍。
translate 移動(dòng) transform:translate(50px, 50px) 分別為相對(duì)x軸移動(dòng),相對(duì)y軸移動(dòng)。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        div {
            border: 1px solid black;
            height: 30px;
            width: 30px;
            background-color: yellow;
 
            /*transform-origin: 50px 50px;*/
            transform-origin: left;
            transform: rotate(50deg);
            /*transform: skew(50deg,50deg);*/
            /*transform: translate(50px,50px);*/
            /*transform: scale(2);*/
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

Transition 平滑過渡

transition-property：變換的屬性（none(沒有屬性改變)、all(所有屬性改變)、具體屬性）
transition-duration：變換持續(xù)時(shí)間
transition-timing-function：變換的速率（ease:(逐漸變慢)、linear:(勻速)、ease-in:(加速)、ease-out:(減速)、ease-in-out:(加速然后減速)、cubic-bezier:(自定義時(shí)間曲線））
transition-delay：變換延遲時(shí)間
transition：縮寫

#property 指定屬性對(duì)應(yīng)類型

1、color： 通過紅、綠、藍(lán)和透明度組件變換（每個(gè)數(shù)值單獨(dú)處理），如：background-color，border-color，color，outline-color等CSS屬性；

2、length：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，padding，outline-width，margin，min-width，min- height，max-width，max-height，line-height，height，border-width，border- spacing，background-position等屬性；

3、percentage：真實(shí)的數(shù)字，如：word-spacing，width，vertical- align，top，right，bottom，left，min-width，min- height，max-width，max-height，line-height，height，background-position等屬性；

4、integer 離散步驟（整個(gè)數(shù)字），在真實(shí)的數(shù)字空間，以及使用floor()轉(zhuǎn)換為整數(shù)時(shí)發(fā)生，如：outline-offset，z-index等屬性；

5、number真實(shí)的（浮點(diǎn)型）數(shù)值，如：zoom，opacity，font-weight等屬性；

6、transform list。

7、rectangle：通過x、 y、 width和height（轉(zhuǎn)為數(shù)值）變換，如：crop；

8、visibility：離散步驟，在0到1數(shù)字范圍之內(nèi)，0表示“隱藏”，1表示完全“顯示”,如：visibility；

9、shadow：作用于color、x、y、和blur（模糊）屬性，如：text-shadow；

10、gradient：通過每次停止時(shí)的位置和顏色進(jìn)行變化。它們必須有相同的類型（放射狀的或是線性的）和相同的停止數(shù)值以便執(zhí)行動(dòng)畫，如：background-image；

11、paint server (SVG)：只支持下面的情況：從gradient到gradient以及color到color，然后工作與上面類似；

12、space-separated list of above：如果列表有相同的項(xiàng)目數(shù)值，則列表每一項(xiàng)按照上面的規(guī)則進(jìn)行變化，否則無變化；

13、a shorthand property：如果縮寫的所有部分都可以實(shí)現(xiàn)動(dòng)畫，則會(huì)像所有單個(gè)屬性變化一樣變化。

#支持執(zhí)行transition效果的屬性

Property Name    Type
background-color    as color
background-position    as repeatable list of simple list of length, percentage, or calc
border-bottom-color    as color
border-bottom-width    as length
border-left-color    as color
border-left-width    as length
border-right-color    as color
border-right-width    as length
border-spacing    as simple list of length
border-top-color    as color
border-top-width    as length
bottom    as length, percentage, or calc
clip    as rectangle
color    as color
font-size    as length
font-weight    as font weight
height    as length, percentage, or calc
left    as length, percentage, or calc
letter-spacing    as length
line-height    as either number or length
margin-bottom    as length
margin-left    as length
margin-right    as length
margin-top    as length
max-height    as length, percentage, or calc
max-width    as length, percentage, or calc
min-height    as length, percentage, or calc
min-width    as length, percentage, or calc
opacity    as number
outline-color    as color
outline-width    as length
padding-bottom    as length
padding-left    as length
padding-right    as length
padding-top    as length
right    as length, percentage, or calc
text-indent    as length, percentage, or calc
text-shadow    as shadow list
top    as length, percentage, or calc
vertical-align    as length
visibility    as visibility
width    as length, percentage, or calc
word-spacing    as length
z-index    as integer

鼠標(biāo)放在以下圖片上，There will be a miracle：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>nick</title>
    <meta charset="utf-8" />
    <style type="text/css">
        .img-see-2016-7-2 {
            background-image: url("http://images.cnblogs.com/cnblogs_com/suoning/845162/o_sea.jpg");
            background-size: 660px;
            background-repeat: no-repeat;
            height: 300px;
            width: 600px;

            transition-duration: 30s;
            transition-timing-function: ease;
            transition-property: background-size;
        }
        .img-see-2016-7-2:hover {
            background-size: 2000px;
        }
    </style>
</head>
<body>
    <div class="img-see-2016-7-2"></div>
</body>
</html>

作者：suoning
原文鏈接：https://www.cnblogs.com/suoning/p/5625582.html

前面兩篇文章，學(xué)習(xí)了JavaScript中DOM、BOM相關(guān)基礎(chǔ)知識(shí)后，今天我們將結(jié)合前面所學(xué)內(nèi)容，利用DOM操作實(shí)現(xiàn)常見的網(wǎng)頁動(dòng)畫效果；結(jié)合知識(shí)點(diǎn)有相關(guān)案例效果演示，另外本文所設(shè)計(jì)的源碼和配套素材可在文末獲取；

JavaScript網(wǎng)頁特效

學(xué)習(xí)目標(biāo)

offset的屬性與作用
client的屬性與作用
scroll的屬性與作用
封裝簡(jiǎn)單動(dòng)畫函數(shù)
網(wǎng)頁輪播圖

I、元素偏移量

獲得元素距離帶有定位父元素的位置

獲得元素自身的width和height

1.offset常用的屬性

2.offset與style的區(qū)別

案例：獲取鼠標(biāo)在盒子內(nèi)的坐標(biāo)

思路：盒子內(nèi)的坐標(biāo)可以通過鼠標(biāo)事件的e.pageX獲取到頁面坐標(biāo)再減去element.offsetLeft來得到；

var box=document.querySelector('.box');
box.addEventListener('click',function(e){
    var x=e.pageX - this.offsetLeft;
    var y=e.pageY - this.offsetTop;
    console.log('x:'+x+',y:'+y);
})

案例：模態(tài)框拖拽

需求：

（1）點(diǎn)擊彈出層，會(huì)淡出模塊框，并且顯示灰色半透明的遮擋層；

（2）點(diǎn)擊關(guān)閉按鈕，可以關(guān)閉模態(tài)框，并且同時(shí)關(guān)閉灰色半透明遮擋層；

（3）鼠標(biāo)放到模態(tài)框最上面一行，可以按住鼠標(biāo)拖拽模態(tài)框在頁面中移動(dòng)；

（4）鼠標(biāo)松開，可以停止拖動(dòng)模態(tài)框移動(dòng)；

分析：

（1）拖拽事件，鼠標(biāo)是按著的狀態(tài)，故mousemove和mouseup須卸載mousedown事件里面；

（2）在拖拽的過程中，鼠標(biāo)的位置相對(duì)于組件的坐標(biāo)是不變的，因此為了改變組件的位置，需要將頁面坐標(biāo)減去相對(duì)組件坐標(biāo)來獲取；

var link=document.querySelector('#link');
var login_window=document.querySelector('#login');
var close_button=document.querySelector('#closeBtn');
var bg=document.querySelector('#bg');
link.addEventListener('click',function(){
    login_window.style.display='block';
    bg.style.display='block';
})
close_button.addEventListener('click',function(){
    login_window.style.display='none';
    bg.style.display='none';
})
// 拖動(dòng)事件三個(gè)過程：mousedown、mousemove、mouseup
var title=document.querySelector('#title');
title.addEventListener('mousedown',function(e){
    var x=e.pageX - login_window.offsetLeft;
    var y=e.pageY - login_window.offsetTop;
    document.addEventListener('mousemove',move);
    function move(e){
        login_window.style.left=e.pageX - x + 'px';
        login_window.style.top=e.pageY -y + 'px';
    }
    document.addEventListener('mouseup',function (e) {
        document.removeEventListener('mousemove',move);
    });
});

案例:仿京東放大鏡效果

分析：

（1）mask界面與big界面可以通過鼠標(biāo)事件設(shè)置dispaly屬性即可；mouseover顯示mask，mouseleave隱藏mask、mousemove移動(dòng)mask

（2）mask的left與top的值可以通過鼠標(biāo)在prew_img中的位置來獲取；

（3）為了讓mask界面中央跟著鼠標(biāo)指針走，則需要減去mask尺寸一半的偏移量；

（4）防止mask頁面跑出prew_img，需要對(duì)偏移量進(jìn)行判斷；

（5）大圖片移動(dòng)距離怎么計(jì)算？mask移動(dòng)距離/mask最大移動(dòng)距離=大圖片移動(dòng)距離/大圖片最大移動(dòng)距離；所以大圖片移動(dòng)距離=mask移動(dòng)距離 * 大圖片移動(dòng)最大距離 / 遮擋層最大移動(dòng)距離；

window.addEventListener('load',function(){
    var prew_img=document.querySelector('.preview_img');
    var mask=document.querySelector('.mask');
    var big=document.querySelector('.big');
    prew_img.addEventListener('mouseover',function(){
        mask.style.display='block';
        big.style.display='block';
    })
    prew_img.addEventListener('mousemove',function(e){
        // 獲取鼠標(biāo)在prew_img元素內(nèi)的坐標(biāo)
        var x=e.pageX - this.offsetLeft;
        var y=e.pageY - this.offsetTop;
        // 防止mask頁面跑出prew_img盒子
        var maskX=x - mask.offsetWidth / 2;
        // 遮擋層的最大移動(dòng)距離maskMax
        var maskMax=this.offsetWidth - mask.offsetWidth;
        if(maskX <=0){
            maskX=0;
        }else if(maskX >=maskMax){
            maskX=maskMax;
        }
        var maskY=y - mask.offsetHeight / 2;
        if(maskY <=0){
            maskY=0;
        }else if(maskY >=maskMax){
            maskY=maskMax;
        }
        // 讓mask界面中央跟著鼠標(biāo)指針走
        mask.style.left=maskX + 'px';
        mask.style.top=maskY + 'px';
        // 讓big界面內(nèi)容跟著mask位置移動(dòng)，
        // 大圖片移動(dòng)距離=mask移動(dòng)距離 * 大圖片移動(dòng)最大距離 / mask最大移動(dòng)距離
        var big_img=document.querySelector('.bigImg');
        var bigMax=big_img.offsetWidth - big.offsetWidth;
        // 大圖片移動(dòng)距離
        var bigMoveX=maskX * bigMax / maskMax;
        var bigMoveY=maskY * bigMax / maskMax;
        big_img.style.left=-bigMoveX + 'px';
        big_img.style.top=-bigMoveY + 'px';
    });

    prew_img.addEventListener('mouseleave',function(){
        mask.style.display='none';
        big.style.display='none';
    });
});

II、元素的可視區(qū)

立即執(zhí)行函數(shù)

不需要調(diào)用，立馬能自己執(zhí)行的函數(shù);

// 寫法一：
(function(){})()
// 寫法二：
(function(){}())

立即執(zhí)行函數(shù)也可以傳遞參數(shù)：

(function(a,b){
console.log(a+b);
})(1,2)

立即執(zhí)行函數(shù)的作用是獨(dú)立創(chuàng)建了一個(gè)作用域，里面所有的變量都是局部變量，不會(huì)有命名沖突的情況；

III、元素滾動(dòng)scroll

使用scroll系列相關(guān)屬性可以動(dòng)態(tài)得到元素的大小、滾動(dòng)距離；

scroll系列屬性 作用備注 element.scrollTop 返回被卷去的上側(cè)距離返回的數(shù)值不帶單位 element.scrollLeft 返回被卷去的左側(cè)距離返回的數(shù)值不帶單位 element.scrollWidth 返回自身的實(shí)際寬度，不含邊框返回的數(shù)值不帶單位 element.scrollHeight 返回自身的實(shí)際高度，不含邊框返回的數(shù)值不帶單位

案例：仿淘寶固定側(cè)邊欄

1.原先側(cè)邊欄是絕對(duì)定位
2.當(dāng)頁面滾動(dòng)到一定的位置，側(cè)邊欄改為固定定位
3.頁面繼續(xù)滾動(dòng)，會(huì)讓頂部顯示出來

頁面被卷去的頭部可以通過：window.pageYOffset來獲得

// 1.獲取元素
var sliderBar=document.querySelector('.slider-bar');
var topBar=document.querySelector('.header');
var banner=document.querySelector('.banner');
var main=document.querySelector('.main');
var goBack=document.querySelector('.goBack');

var barHeight=banner.offsetTop;
var sliderBarTop=sliderBar.offsetTop;
var fixTop=sliderBarTop - barHeight;
var mainTop=main.offsetTop;
// 2.頁面滾動(dòng)事件
document.addEventListener('scroll',function(){

    if(window.pageYOffset >=barHeight){
        sliderBar.style.position='fixed';
        sliderBar.style.top=fixTop + 'px';
    }else{
        sliderBar.style.position='absolute';
        sliderBar.style.top=sliderBarTop + 'px';
    }
    if(window.pageYOffset >=mainTop){
        goBack.style.display='block';
    }else{
        goBack.style.display='none';
    }
})

IV、鼠標(biāo)事件

當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)就會(huì)觸發(fā)mouseenter事件，類似mouseenter

兩者的區(qū)別是：mouseover鼠標(biāo)經(jīng)過自身盒子會(huì)觸發(fā)、經(jīng)過子盒子也會(huì)觸發(fā)；而mouseenter只有經(jīng)過自身盒子才會(huì)觸發(fā)；

原因是mouseenter不會(huì)冒泡；跟mouseenter搭配的通常是mouseleave

V、動(dòng)畫函數(shù)

1.動(dòng)畫實(shí)現(xiàn)的原理：

通過定時(shí)器setInterval()不斷移動(dòng)盒子位置；

實(shí)現(xiàn)步驟：

獲得盒子當(dāng)前位置
讓盒子在當(dāng)前位置加上一個(gè)移動(dòng)距離
加上一個(gè)結(jié)束定時(shí)器的條件
盒子需要添加定位，才能使用element.style.left

//利用setInterval設(shè)置一個(gè)box元素從左向右移動(dòng)400像素的動(dòng)畫
var box=document.querySelector('.box');
var timer=setInterval(function(){
    if(box.offsetLeft > 200){
        // 停止動(dòng)畫，本質(zhì)上是清除定時(shí)器
        clearInterval(timer);
    }
    box.style.left=box.offsetLeft + 5 + 'px';
},50);

2.動(dòng)畫函數(shù)的封裝

將動(dòng)畫函數(shù)封裝起來，利用JS是動(dòng)態(tài)語言的特性，通過設(shè)置對(duì)象的方式，給每個(gè)不同的元素指定不同的定時(shí)器；

// 簡(jiǎn)單動(dòng)畫函數(shù)的封裝,目標(biāo)對(duì)象obj,目標(biāo)位置target
function animate(obj,target){
    // 如果設(shè)置一個(gè)按鈕啟動(dòng)動(dòng)畫，會(huì)存在一個(gè)bug,只要不斷點(diǎn)擊按鈕，動(dòng)畫會(huì)越走越快；
    // 原因是啟動(dòng)了太多定時(shí)器，解決方案是，讓元素只有一個(gè)定時(shí)器執(zhí)行
    clearInterval(obj.timer);
    obj.timer=setInterval(function(){
    if(obj.offsetLeft > target){
        // 停止動(dòng)畫，本質(zhì)上是清除定時(shí)器
        clearInterval(obj.timer);
    }
    obj.style.left=obj.offsetLeft + 5 + 'px';
},50);
}
//利用setInterval設(shè)置動(dòng)畫
var btn=document.querySelector('button');
var box1=document.querySelector('.box1');
btn.addEventListener('click',function(){
    animate(box1,400);
});

3.緩動(dòng)動(dòng)畫原理

緩動(dòng)動(dòng)畫就是讓元素運(yùn)動(dòng)速度有所變換，最常見的就是讓速度慢慢停下來；

思路：讓盒子每次移動(dòng)的距離慢慢變小；

核心算法：每次移動(dòng)的步長=(目標(biāo)值-現(xiàn)在的位置)/10這里的10是份數(shù)可以是9也可以是8；

停止的條件是：當(dāng)前盒子的位置等于目標(biāo)位置就停止定時(shí)器；

// 緩動(dòng)動(dòng)畫
function animate(obj,target){
    // 清除定時(shí)器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運(yùn)行定時(shí)器都要重新計(jì)算步長值，所以步長值寫在定時(shí)器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負(fù)值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
        }
        // 緩動(dòng)動(dòng)畫核心算法：前進(jìn)步長=（目標(biāo)-當(dāng)前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

動(dòng)畫函數(shù)添加回調(diào)函數(shù)

回調(diào)函數(shù)原理：函數(shù)可以作為一個(gè)參數(shù)，將這個(gè)函數(shù)作為參數(shù)傳入到另一個(gè)函數(shù)里面，當(dāng)這個(gè)函數(shù)執(zhí)行完成后，再執(zhí)行傳進(jìn)去的這個(gè)函數(shù)，這個(gè)過程叫做回調(diào)。

回調(diào)函數(shù)位置：寫到定時(shí)器結(jié)束的位置

// 緩動(dòng)動(dòng)畫
function animate(obj,target,callback){
    // 清除定時(shí)器
    clearInterval(obj.timer);
    obj.timer=setInterval(function() {
        // 每次運(yùn)行定時(shí)器都要重新計(jì)算步長值，所以步長值寫在定時(shí)器里面
        var step=(target - obj.offsetLeft)/10;
        // 如果step是正值則往大取整，如果step是負(fù)值則往小取整
        step=step >=0 ? Math.ceil(step) : Math.floor(step);
        if(obj.offsetLeft==target){
            clearInterval(obj.timer);
            if(callback){
                // 調(diào)用函數(shù)
                callback();
            }
        }
        // 緩動(dòng)動(dòng)畫核心算法：前進(jìn)步長=（目標(biāo)-當(dāng)前）/ 10
        obj.style.left=obj.offsetLeft + step + 'px';
    },50);
}

將動(dòng)畫函數(shù)封裝到單獨(dú)的JS文件

在head里引入JS文件

<script src="animate.js"></script>

實(shí)際調(diào)用過程中可以直接調(diào)用JS中定義的函數(shù)

var sliderbar=document.querySelector('.sliderbar');
var con=document.querySelector('.con');
sliderbar.addEventListener('mouseenter',function(){
    animate(con,-160,function () {
        // 動(dòng)畫執(zhí)行完畢，將左箭頭轉(zhuǎn)為右箭頭
        sliderbar.children[1].innerHTML='→';
    });
})
sliderbar.addEventListener('mouseleave',function(){
    animate(con,0,function () {
        sliderbar.children[1].innerHTML='←';
    });
})

案例：網(wǎng)頁輪播圖

功能需求：

鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；
鼠標(biāo)點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此內(nèi)推，左側(cè)按鈕同理；
圖標(biāo)播放的同時(shí)，下面小圓圈模塊跟隨一起變化；
點(diǎn)擊小圓圈，可以播放相應(yīng)圖片；
鼠標(biāo)不經(jīng)過輪播圖，輪播圖也會(huì)自動(dòng)播放圖片；
鼠標(biāo)經(jīng)過，輪播圖模塊，自動(dòng)播放停止

window.addEventListener('load', function () {
    //===0.定義變量，獲取元素
    var focus=document.querySelector('.focus');
    var arrowL=document.querySelector('.arrow-l');
    var arrowR=document.querySelector('.arrow-r');

    //===1.鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕；=====focus.addEventListener('mouseenter', function () {
        arrowL.style.display='block';
        arrowR.style.display='block';
        clearInterval(timer);
        timer=null;
    });
    focus.addEventListener('mouseleave', function () {
        arrowL.style.display='none';
        arrowR.style.display='none';
        timer=window.setInterval(function () {
            arrowR.click();
        }, 3000);
    });
    //===2.根據(jù)輪播圖的數(shù)量自動(dòng)生成小圓圈
    var ul=focus.querySelector('ul');
    var ol=focus.querySelector('.circle');
    var pictureWidth=focus.offsetWidth;
    // 獲取到輪播圖圖片的數(shù)量length
    var length=ul.children.length;
    // 顯示當(dāng)前圖片的索引
    var circle=0;
    // 顯示當(dāng)前圖片的索引
    var num=0;
    // 創(chuàng)建元素插入到ol中
    for (var i=0; i < length; i++) {
        var li=document.createElement('li');
        // 給沒一個(gè)小圓圈添加一個(gè)index屬性，方便點(diǎn)擊事件的ul移動(dòng)長度的確定
        li.setAttribute('index', i);
        // 給每一個(gè)小圓圈添加點(diǎn)擊事件
        li.addEventListener('click', function () {
            // 移除其他小圓圈的選中屬性
            for (var i=0; i < length; i++) {
                ol.children[i].className='';
            }
            // 設(shè)置當(dāng)前選中小圓圈的選中屬性
            this.className='current';
            // 定義選中的小圓圈的索引
            var index=this.getAttribute('index');
            num=index;
            circle=index;
            animate(ul, -pictureWidth * index);
        });
        ol.appendChild(li);
    }
    ol.children[0].className='current';

    //===3.鼠標(biāo)點(diǎn)擊右側(cè)按鈕一次，圖片往左播放一張，以此內(nèi)推，左側(cè)按鈕同理；==// 為了實(shí)現(xiàn)無縫滾動(dòng)，需要將第一張圖添加到最后一張圖中
    var lastLi=ul.children[0].cloneNode(true);
    ul.appendChild(lastLi);
    // 設(shè)置一個(gè)節(jié)流閥，防止按鈕在短時(shí)間內(nèi)點(diǎn)擊過多
    var flag=true;
    arrowR.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==ul.children.length - 1) {
                ul.style.left=0;
                num=0;
            }
            num++;
            animate(ul, -pictureWidth * num, function () {
                flag=true;
            });
            circle++;
            if (circle==ol.children.length) {
                circle=0;
            }
            activateCircle(circle);
        }
    });

    arrowL.addEventListener('click', function () {
        if (flag) {
            flag=false;
            if (num==0) {
                num=ul.children.length - 1;
                ul.style.left=-num * pictureWidth + 'px';
            }
            num--;
            animate(ul, -num * pictureWidth, function () {
                flag=true;
            });
            if (circle==0) {
                circle=ol.children.length;
            }
            circle--;
            activateCircle(circle);
        }
    });

    // 排他法思想點(diǎn)亮小圓圈
    function activateCircle(index) {
        for (var i=0; i < ol.children.length; i++) {
            ol.children[i].className='';
        }
        ol.children[index].className='current';
    }

    // 實(shí)現(xiàn)輪播圖自動(dòng)播放
    var timer=window.setInterval(function () {
        arrowR.click();
    }, 3000);
});

顯示效果：

輪播圖自動(dòng)播放的原理是：設(shè)置一個(gè)定時(shí)器使用click（）函數(shù)模擬按鈕點(diǎn)擊事件；

輪播圖實(shí)現(xiàn)無縫滾動(dòng)的原理是：將第一個(gè)圖動(dòng)態(tài)加在最后一張圖上，當(dāng)切到最后一張圖時(shí)，重新設(shè)置元素布局距離，再執(zhí)行滑動(dòng)動(dòng)畫。

防止同一個(gè)按鈕在短時(shí)間內(nèi)點(diǎn)擊次數(shù)過多，可以設(shè)置一個(gè)節(jié)流閥，將啟動(dòng)節(jié)流閥的操作寫在動(dòng)畫回調(diào)函數(shù)里，這樣只有當(dāng)動(dòng)畫執(zhí)行完畢后才才可以重新恢復(fù)按鈕的點(diǎn)擊功能；

頁面滾動(dòng)動(dòng)畫可以使用函數(shù)：window.scroll(x,y)可以滾動(dòng)至頁面的指定坐標(biāo)位置；

最后：

本文配套源碼與素材獲取：https://gitee.com/yushengtan/jscode
關(guān)于JavaScript在網(wǎng)頁動(dòng)畫中的使用就介紹到這里，下一節(jié)我們將繼續(xù)深入介紹JavaScript的異步調(diào)用相關(guān)知識(shí)的學(xué)習(xí)~

在線咨詢

上一篇：「第2479期」如何在iPad上用vscode寫代碼
下一篇：你知道空白網(wǎng)頁的顏色是什么嗎？

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

推薦閱讀

29. 教你零基礎(chǔ)搭建小程序：小...

HTML+CSS CSS3 特殊的“邊線”outline

34道常見的HTML+CSS面試題（附答案）

前端經(jīng)驗(yàn)-如何在p元素中展示固...

HTML5的離線存儲(chǔ)有哪些？

B類電商業(yè)務(wù)的Web動(dòng)效研究與實(shí)踐

HTML5 規(guī)則和新特性

必須關(guān)注的25位知名JavaScript開發(fā)者

我的HTML的布局的小秘密

社工必備查詢網(wǎng)址匯總

(五) Flutter入門學(xué)習(xí) 之 Widget滾動(dòng)

什么是HTM或HTML文件？如何打開...

css樣式浮動(dòng)float靠左

java遍歷List的三種方式比較 ...

PyScript：讓Python在HTML中運(yùn)行

「前端架構(gòu)師詳解Css14」案例“...

手把手教大家編寫貪吃蛇小游戲...

CSS各種邊框背景大全

初創(chuàng)企業(yè)建站指南教你零基礎(chǔ)快...

網(wǎng)絡(luò)數(shù)據(jù)抓取-JS動(dòng)態(tài)生成數(shù)據(jù)-P...

整合營銷服務(wù)商