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

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

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

demo效果

廢話不多說，直接上**：

1、html

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 

$(function())

}//初始化設定背景透明度
setcoveropacity();
//監聽滾動條事件，改變透明度
$(window).scroll(function() );
})

注意：1、

((($body.scrolltop() / 150) > 0.9) ? 0.9 : ($body.scrolltop() / 150))

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