基于JS实现仿京东搜索栏随滑动透明度渐变效果


Posted in Javascript onJuly 10, 2017

废话不多说,直接上代码:

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(); 
 }); 
})

最终效果:

基于JS实现仿京东搜索栏随滑动透明度渐变效果基于JS实现仿京东搜索栏随滑动透明度渐变效果基于JS实现仿京东搜索栏随滑动透明度渐变效果

注意:

特别注意的一条:强制刷新,会导致页面的重新加载,所以动态加入的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实现仿京东搜索栏随滑动透明度渐变效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于jQuery的360图片展示实现代码
Jun 14 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
基于jquery实现等比缩放图片
Dec 03 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
【经验总结】编写JavaScript代码时应遵循的14条规律
Jun 20 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
bootstrap table实现双击可编辑、添加、删除行功能
Sep 27 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
jquery实现直播弹幕效果
Nov 28 jQuery
vue 实现动态路由的方法
Jul 06 Javascript
在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作
Aug 10 Javascript
jQuery实现QQ空间汉字转拼音功能示例
Jul 10 #jQuery
Underscore之Array_动力节点Java学院整理
Jul 10 #Javascript
Angular.js ng-file-upload结合springMVC的使用教程
Jul 10 #Javascript
underscore之Collections_动力节点Java学院整理
Jul 10 #Javascript
Angular.js组件之input mask对input输入进行格式化详解
Jul 10 #Javascript
underscore之Chaining_动力节点Java学院整理
Jul 10 #Javascript
Vue 2.0的数据依赖实现原理代码简析
Jul 10 #Javascript
You might like
PHP文本数据库的搜索方法
2006/10/09 PHP
php foreach、while性能比较
2009/10/15 PHP
php文件缓存类汇总
2014/11/21 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
Firefox window.close()的使用注意事项
2009/04/11 Javascript
Chrome中JSON.parse的特殊实现
2011/01/12 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
javascript获取隐藏dom的宽高 具体实现
2013/07/14 Javascript
js保留两位小数使用toFixed实现
2013/07/29 Javascript
JS实现程序暂停与继续功能代码解读
2013/10/10 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
js动态拼接正则表达式的两种方法
2014/03/04 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
jQuery EasyUI实现右键菜单变灰不可用效果
2015/09/24 Javascript
JavaScript判断页面加载完之后再执行预定函数的技巧
2016/05/17 Javascript
js实现文本上下来回滚动
2017/02/03 Javascript
浅谈原生JS实现jQuery的animate()动画示例
2017/03/08 Javascript
python通过ElementTree操作XML获取结点读取属性美化XML
2013/12/02 Python
用Python进行行为驱动开发的入门教程
2015/04/23 Python
python妹子图简单爬虫实例
2015/07/07 Python
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
CentOS 6.5下安装Python 3.5.2(与Python2并存)
2017/06/05 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python ffmpeg任意提取视频帧的方法
2020/02/21 Python
python字符串判断密码强弱
2020/03/18 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Django-silk性能测试工具安装及使用解析
2020/11/28 Python
意大利单身交友网站:Meetic
2020/07/12 全球购物
业务员岗位职责
2013/11/16 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
综合素质自我评价评语
2015/03/06 职场文书
个人自荐书怎么写
2015/03/26 职场文书
在酒桌上的敬酒词
2015/08/12 职场文书
中秋节英文祝福语句(14句)
2019/09/11 职场文书
pnpm对npm及yarn降维打击详解
2022/08/05 Javascript