js實現 仿京東搜尋欄隨滑動透明度漸變

2021-09-10 02:21:47 字數 1611 閱讀 1899

注意:不相容ie8及以下,ie11和360的ie相容模式測試通過====ie8不支援opacity

此效果採用的opacity做的透明漸變

demo效果

廢話不多說,直接上**:

1、html

其中search-box-cover就是控制透明度漸變的背景

2、css

.module-layer 

.module-layer-content

.module-layer-bg

.layer-head-name

.layer-return,.layer-share

.layer-return

.layer-share

.pr

#shop-input::-webkit-input-placeholder

#shop-input:-moz-placeholder

#shop-input::-moz-placeholder

#shop-input:-ms-input-placeholder

#shop-input

.search-box

.search-box:after

#shop-input

3、js

$(function())

}//初始化設定背景透明度

setcoveropacity();

//監聽滾動條事件,改變透明度

$(window).scroll(function() );

})

最終效果:

注意:1、

((($body.scrolltop() / 150) > 0.9) ? 0.9 : ($body.scrolltop() / 150))
此三目表示式是判斷當前滾動條位置所在位置,如果位置值除以150大於0.9,就返回0.9,反之就返回那個小於等於0.9的值,將返回的值設定為背景的透明度就完成了。

2、由於滾動條的位置是動態獲取的,所以設定透明度會不停改變,不用單獨再做漸變的動畫效果。

3、最終透明度問題,京東在最終背景設定的是0.9,所以本案例也採用的0.9,同時體驗效果會更好。

4、滾動條位置導致的漸變,將150設定更大,漸變的距離會更長。

再次宣告:不相容ie8及以下

其他[我的部落格,歡迎交流!](

[我的csdn部落格,歡迎交流!](

[前端筆記專欄](

[前端筆記列表](

[遊戲列表](

posted @

2017-07-10 10:06

newman·li 閱讀(

...)

編輯收藏

js實現 仿京東搜尋欄隨滑動透明度漸變

注意 不相容ie8及以下,ie11和360的ie相容模式測試通過 ie8不支援opacity 此效果採用的opacity做的透明漸變 demo效果 廢話不多說,直接上 1 html 其中search box cover就是控制透明度漸變的背景 2 css module layer module la...

js 仿京東放大鏡

功能模組 整個案例可以分為三個功能模組 滑鼠經過小盒子,黃色的遮擋層 和 大盒子顯示,離開隱藏2個盒子功能 黃色的遮擋層跟隨滑鼠功能。移動黃色遮擋層,大跟隨移動功能。案例分析 黃色的遮擋層跟隨滑鼠功能。把滑鼠座標給遮擋層不合適。因為遮擋層座標以父盒子為準。首先是獲得滑鼠在盒子的座標。之後把數值給遮擋...

JS 仿京東放大鏡

滑鼠移動的時候黃色背景層跟著移動 16 content.addeventlistener mousemove function e else if maskx maskmax 30if masky 0 else if masky maskmax 35 mask.style.left maskx px...