js DOM 實現乙個簡易的滑動門特效

2021-07-13 11:39:14 字數 1314 閱讀 5825

要求:實現乙個滑動門特效

效果:原始碼:

使用乙個div包裹四張,便於定位

lang="en">

charset="utf-8">

title>

head>

id="container">

src="assets/door1.png"

title="door1"

alt="door1">

src="assets/door2.png"

title="door2"

alt="door2">

src="assets/door3.png"

title="door3"

alt="door3">

src="assets/door4.png"

title="door4"

alt="door4">

div>

body>

html>先引入

對#container進行相對定位。margin:0 auto實現水平居中。overflow實現邊界溢位隱藏。設定高度和寬度。

然後對img進行絕對定位(相對於#container絕對定位),由於預設是display:inline的,所以把轉成display:block(避免出現下方的小白條)。設定高度寬度和border。

#container

img

//在dom結構載入完成之後

window.onload=function

() }

//呼叫初始化函式

init();

//計算滑鼠滑過時需要移動的移動的距離

var translate=width-tmpwidth;

for(var i=0;i//使用閉包,為每個新增mouseover事件

(function

(i) }

}})(i);}}

在github上建立 git pages,轉殖到本地。

開啟bash,找到路徑

使用以上下劃線標註的三條命令

git rm -rf .刪除gh-pages分支下所有檔案

git add .把**拷貝到路徑下,使用git add .將**新增進去

git commit -m 'hahah'提交

js實現簡單的滑動門和tab選項卡

思想 首先定義三個選項卡,可以用任何標籤,只要如下圖,一共有三個ul,第乙個ul給乙個class,因為預設第乙個選項卡的內容顯示出來,其他兩個ul display none 當我滑鼠移到第二個第三個選項卡的時候,刪除第乙個選項卡的class,滑鼠移到 就給哪個選項卡那個class 思路就這樣 下面是...

實現乙個簡易的執行緒池。

定義四個類 乙個內部類 乙個任務類 乙個測試類 乙個執行緒池類包含乙個內部類。任務類 任務類,檢查埠。author administrator public class scannertask public void starttask catch unknownhostexception e ca...

C 實現乙個簡易的執行緒池

工作中需要用到多執行緒,就簡單實現了乙個簡易的執行緒池,直接上 記錄一下 ifndef threadpool h define threadpool h include include include include include include class threadpool endif th...