欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

基于JS實現(xiàn)仿京東搜索欄隨滑動透明度漸變效果

 更新時間:2017年07月10日 11:17:17   作者:Rattenking  
這篇文章主要介紹了基于JS實現(xiàn)仿京東搜索欄隨滑動透明度漸變效果,代碼簡單易懂,非常不錯,具有參考借鑒價值,需要的朋友可以參考下

廢話不多說,直接上代碼:

1、HTML

<header class="module-layer"> 
 <div class="module-layer-content"> 
  <div class="search-box-cover"></div> 
  <p class="layer-return"></p> 
  <h1 class="layer-head-name"> 
   <div class="pr search-box"> 
    <img class="shop-search" src="images/search.png"/> 
    <input id="shop-input" type="text" placeholder="搜索店內商品" value="" /> 
   </div> 
  </h1> 
  <p class="layer-share"></p> 
 </div> 
</header> 

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

2、css

.module-layer { 
 width:100%; 
 position:fixed; 
 top:0; 
 left:0; 
 z-index:100000; 
} 
.module-layer-content { 
 position:relative; 
 min-width:320px; 
 max-width:750px; 
 width:100%; 
 margin:0 auto; 
} 
.module-layer-bg { 
 width:100%; 
 height:100%; 
 background:#000; 
 opacity:.7; 
 position:absolute; 
 top:0; 
 left:0; 
 z-index:-1; 
} 
.layer-head-name { 
 height:50px; 
 line-height:50px; 
 text-align:center; 
 padding:0 50px; 
 font-size:20px; 
} 
.layer-return,.layer-share { 
 width:50px; 
 height:50px; 
 line-height:50px; 
 text-align:center; 
 position:absolute; 
 top:0; 
 z-index:1; 
} 
.layer-return { 
 left:0; 
} 
.layer-share { 
 right:0; 
} 
.pr { 
 position:relative; 
} 
#shop-input::-webkit-input-placeholder { 
 color:#fff; 
} 
#shop-input:-moz-placeholder { 
 color:#fff; 
} 
#shop-input::-moz-placeholder { 
 color:#fff; 
} 
#shop-input:-ms-input-placeholder { 
 color:#fff; 
} 
#shop-input { 
 border:none; 
 outline:none; 
 background:transparent; 
} 
.search-box { 
 height:30px; 
 border-radius:20px; 
 top:10px; 
 overflow:hidden; 
 z-index:10; 
} 
.search-box:after { 
 content:''; 
 display:block; 
 width:100%; 
 height:30px; 
 background:#fff; 
 opacity:.5; 
 position:absolute; 
 top:0; 
 left:0px; 
 z-index:-1; 
} 
#shop-input { 
 height:28px; 
 line-height:28px; 
 font-size:16px; 
 position:absolute; 
 top:0; 
 left:30px; 
} 

3、js

$(function(){ 
 var $body = $('body'); 
 var setCoverOpacity = function() { 
  $body.find('.search-box-cover').css({ 
   opacity: ((($body.scrollTop() / 150) > 0.9) ? 0.9 : ($body.scrollTop() / 150)) 
  }) 
 } 
//初始化設置背景透明度 
 setCoverOpacity(); 
//監(jiān)聽滾動條事件,改變透明度 
 $(window).scroll(function() { 
  setCoverOpacity(); 
 }); 
})

最終效果:


注意:

特別注意的一條:強制刷新,會導致頁面的重新加載,所以動態(tài)加入的css樣式不會存在,那么對透明背景的初始化非常重要,在網頁端用戶強制刷新,才不會失去透明效果。

1、

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

此三目表達式是判斷當前滾動條位置所在位置,如果位置值除以150大于0.9,就返回0.9,反之就返回那個小于等于0.9的值,將返回的值設置為背景的透明度就完成了。

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

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

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

以上所述是小編給大家介紹的基于JS實現(xiàn)仿京東搜索欄隨滑動透明度漸變效果,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

相關文章

  • JavaScript實現(xiàn)精美個性導航欄筋斗云效果

    JavaScript實現(xiàn)精美個性導航欄筋斗云效果

    這篇文章主要介紹了JavaScript實現(xiàn)精美個性導航欄筋斗云效果,非常不錯,具有參考借鑒價值,需要的朋友可以參考下
    2017-10-10
  • JS實現(xiàn)生成會變大變小的圓環(huán)實例

    JS實現(xiàn)生成會變大變小的圓環(huán)實例

    這篇文章主要介紹了JS實現(xiàn)生成會變大變小的圓環(huán),涉及javascript數(shù)學運算及頁面樣式動態(tài)操作的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
    2015-08-08
  • 一文徹底理解JS回調函數(shù)

    一文徹底理解JS回調函數(shù)

    回調函數(shù)是從一個叫函數(shù)式編程的編程范式中衍生出來的概念,簡單來說,函數(shù)式編程就是使用函數(shù)作為變量,這篇文章主要介紹了一文徹底理解JS回調函數(shù),需要的朋友可以參考下
    2022-12-12
  • js禁止表單重復提交

    js禁止表單重復提交

    這篇文章主要介紹了js禁止表單重復提交的方法,避免重復記錄帶來的問題,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-08-08
  • JS優(yōu)化冗余代碼的技巧分享

    JS優(yōu)化冗余代碼的技巧分享

    這篇文章主要為大家整理了18個JavaScript優(yōu)化冗余代碼的技巧,文中的示例代碼簡潔易懂,具有一定的借鑒價值,感興趣的小伙伴可以了解一下
    2023-08-08
  • javascript:文字不間斷向左移動的實例代碼

    javascript:文字不間斷向左移動的實例代碼

    這篇文章介紹了javascript:文字不間斷向左移動的實例代碼,有需要的朋友可以參考一下
    2013-08-08
  • javascript基礎進階_深入剖析執(zhí)行環(huán)境及作用域鏈

    javascript基礎進階_深入剖析執(zhí)行環(huán)境及作用域鏈

    下面小編就為大家?guī)硪黄猨avascript基礎進階_深入剖析執(zhí)行環(huán)境及作用域鏈。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-09-09
  • ES6 Symbol在對象中的作用實例分析

    ES6 Symbol在對象中的作用實例分析

    這篇文章主要介紹了ES6 Symbol在對象中的作用,結合實例形式分析了ES6 Symbol在對象中聲明、使用方法與相關注意事項,需要的朋友可以參考下
    2020-06-06
  • js中數(shù)組的常用方法小結

    js中數(shù)組的常用方法小結

    這篇文章主要介紹了js中數(shù)組的常用方法,結合實例形式分析了js中的常用數(shù)組方法,如push、concat、pop、splice、reverse、join等功能與用法,需要的朋友可以參考下
    2016-12-12
  • Bootstrap每天必學之附加導航(Affix)插件

    Bootstrap每天必學之附加導航(Affix)插件

    Bootstrap每天必學之附加導航(Affix)插件,附加導航即粘貼在屏幕某處實現(xiàn)錨點功能,感興趣的小伙伴們可以參考一下
    2016-04-04

最新評論