基于JS实现仿京东搜索栏随滑动透明度渐变效果
2017-07-10 11:17
1146 查看
废话不多说,直接上代码:
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(); //监听滚动条事件,改变透明度 $(window).scroll(function() { setCoverOpacity(); }); })
最终效果:
注意:
特别注意的一条:强制刷新,会导致页面的重新加载,所以动态加入的css样式不会存在,那么对透明背景的初始化非常重要,在网页端用户强制刷新,才不会失去透明效果。
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设置更大,渐变的距离会更长。
以上所述是小编给大家介绍的基于JS实现仿京东搜索栏随滑动透明度渐变效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- js实现:仿京东搜索栏随滑动透明度渐变
- JS基于构造函数实现的菜单滑动显隐效果【测试可用】
- 原生JS实现移动端模块的左右滑动切换效果,基于vue、stylus
- Toolbar随着ScrollView滑动透明度渐变效果实现
- js实现透明度渐变效果的方法
- Toolbar随着ScrollView滑动透明度渐变效果实现
- android 仿京东搜索栏随滑动切换图标及透明度渐变
- Android中Toolbar随着ScrollView滑动透明度渐变效果实现
- 用js实现透明度渐变效果
- js实现透明度渐变效果
- 用js实现透明度渐变效果
- JS实现的透明度渐变动画效果示例
- 博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
- cocos2d-x 基于CCClippingNode实现CCLayer遮罩功能,在滑动时超出剪切区域的实现显示部分的效果,不需要再借助其他sprite来遮挡了
- 用js实现分享到随页面滚动而滑动效果
- JavaScript实现图片的滑动切换效果 的Js代码
- Javascript 实现DIV透明度渐变、移动放大等效果
- Android 图片合成:添加蒙板效果 不规则相框 透明度渐变效果的实现
- .NET中使用js实现百度搜索下拉提示效果[不是局部刷新,呜呜。。]
- JQuery+JS实现仿百度搜索结果中关键字变色效果