漸入效果實現

2021-07-30 04:09:02 字數 959 閱讀 5769

首先我們來幅**析下漸入效果的原理:

由圖可以看出,整個漸入的效果分為三層,分別為:最外層、內容包裹層和內容層。其中最外層、內容包裹層和內容層三層的寬高是一致的。

開始狀態下,最外層和內容包裹層均將超出的部分隱藏,這樣其實最開始的時候只能看見最外層左邊的50%和內容包裹層左邊的50%,內容是完全看不見的。首先我們將內容包裹層寬度設定為最外層的50%,內容距離右邊為最外層的50%,其次將內容包裹層的寬度逐漸加到與最外層的寬度相等,讓其和最外層重合,同時將內容向右移動最外層寬度的50%,讓三層重合,這樣就實現了漸入的效果。

下面我們依舊上**:

class="content-wrap">

class="content-inner">

class="content">div>

div>

div>

.content-wrap

.content

$(function

())/*

*功能:實現漸入效果

* param1:最外層(content-wrap)

* param1:內容包裹層(content-inner)

* param1:速度時間控制

* */

function

easein

(param1,param2,param3));

bgwrapson.css();

param2.animate(,

)bgwrapson.animate(,)}

實現效果:

這裡實現效果我不截圖了,動畫的截了也沒啥意思,需要看的同學複製**執行下即可,這個跟ppt裡面的漸入效果是一樣的,記得引入jquery檔案。

名片效果實現

模仿qq空間 微博等滑鼠懸浮在人名上時,顯示使用者詳細資訊 大體思路是將名片卡隱藏在頁面中,當懸浮時將名片卡移動到滑鼠邊,滑鼠移開時隱藏名片卡。本文的js使用了jquery 使用者名稱跟名片卡 如下 只是為了顯示類名,具體內容按需補充 使用者名稱 js 如下 var showmsgcardcontr...

抽屜效果實現

import viewcontroller.h define maxy 60 inte ce viewcontroller property nonatomic,weak uiview mainview property nonatomic,weak uiview leftview property...

名片效果實現

模仿qq空間 微博等滑鼠懸浮在人名上時,顯示使用者詳細資訊 大體思路是將名片卡隱藏在頁面中,當懸浮時將名片卡移動到滑鼠邊,滑鼠移開時隱藏名片卡。本文的js使用了jquery 使用者名稱跟名片卡 如下 只是為了顯示類名,具體內容按需補充 使用者名稱 js 如下 var showmsgcardcontr...