基于射流研究…实现仿京东搜索栏随滑动透明度渐变效果

废话不多说，直接上代码：

1、超文本标记语言

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=' http : images/search。png '/input id=' shop-input ' type=' text ' placeholder='搜索店内商品value=' '//div/h1 p class=' layer-share '/p/div/header其中搜索框封面就是控制透明度渐变的背景

2、css。模块层{宽度：100%;位置：固定；top:0left:0z指数：100000;} .模块层内容{位置：相对最小宽度：320像素；最大宽度：750像素；宽度：100%;margin:0 auto}。模块层BG {宽度：100%；高度：100%;背景技术： # 000;opacity:7位置：绝对；top:0left:0z指数：-1;} .层头名称{高：50像素线高：50 px文本对齐：居中；padd :0 50px font-size :20 px；} .图层-返回，层共享{ width :50 px高度：50 px线高：50 px文本对齐：居中；位置：绝对；top:0z索引：1;} .layer-return { left :0；} .layer-share { right :0；} .pr { position:relative} #商店-输入：-web套件-输入-占位符{ color : # fff } # shop-input :-moz-占位符{ color : # fff} # shop-input :-moz-placeholder { color : # fff；} #商店-输入：-ms-输入-占位符{ color : # fff} #商店-输入{边框：无；outline : none background : transparent }。搜索框{ height :30 pxborder-radius :20 px；top:10px飞越：隐藏；z索引：10;} .{内容： }之后的搜索框：显示：块；宽度：100%;高度：30 px背景# fffopacity:5位置：绝对；top:0left:0pxz指数：-1;} #商店输入{高：28像素行高：28 pxfont-size :16 px位置：绝对；top:0left:30px} 3、js

$(function(){ var $ body=$(' body ')；var setcoveraopcycle=function(){ $ body。查找(' .搜索框-封面')。CSS({ opa city 3360)($ body。滚动顶部()/150)0.9)？0.9 :美元(正文。滚动顶部()/150))}//初始化设置背景透明度setCoverOpacity()；//监听滚动条事件，改变透明度$(窗口)。scroll(function(){ SetCoverOpacity()；});})最终效果：

注意：

特别注意的一条：强制刷新，会导致页面的重新加载，所以动态加入的钢性铸铁样式不会存在，那么对透明背景的初始化非常重要，在网页端用户强制刷新，才不会失去透明效果。

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设置更大，渐变的距离会更长。

以上所述是小编给大家介绍的基于射流研究…实现仿京东搜索栏随滑动透明度渐变效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！