基于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 ui dialog里调用datepicker的问题
Aug 06 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
不用锚点也可以平滑滚动到页面的指定位置实现代码
May 08 Javascript
无闪烁更新网页内容JS实现
Dec 19 Javascript
js判断元素是否隐藏的方法
Jun 09 Javascript
基于Angular.js实现的触摸滑动动画实例代码
Feb 19 Javascript
jQuery插件FusionCharts实现的3D帕累托图效果示例【附demo源码】
Mar 25 jQuery
react-native ListView下拉刷新上拉加载实现代码
Aug 03 Javascript
vue动态绑定组件子父组件多表单验证功能的实现代码
May 14 Javascript
vue3修改link标签默认icon无效问题详解
Oct 09 Javascript
解决pycharm双击但是无法打开的情况
Oct 31 Javascript
vue 实现element-ui中的加载中状态
Nov 11 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内核之php in array
2015/11/10 PHP
Thinkphp无限级分类代码
2015/11/11 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
[原创]PHPCMS遭遇会员投稿审核无效的解决方法
2017/01/11 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
jQuery源码分析之Event事件分析
2010/06/07 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
基于JavaScript实现高德地图和百度地图提取行政区边界经纬度坐标
2016/01/22 Javascript
Jquery基础之事件操作详解
2016/06/14 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
AngularJS基础 ng-class-odd 指令示例
2016/08/01 Javascript
Angular2入门--架构总览
2017/03/29 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
webpack公共组件引用路径简化小技巧
2018/06/15 Javascript
详解用JS添加和删除class类名
2019/03/25 Javascript
[06:30]DOTA2英雄梦之声_第15期_死亡先知
2014/06/21 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
Linux 发邮件磁盘空间监控(python)
2016/04/23 Python
python爬取内容存入Excel实例
2019/02/20 Python
python lambda表达式在sort函数中的使用详解
2019/08/28 Python
Python自动生成代码 使用tkinter图形化操作并生成代码框架
2019/09/18 Python
pymysql 开启调试模式的实现
2019/09/24 Python
利用python读取YUV文件 转RGB 8bit/10bit通用
2019/12/09 Python
python数字类型math库原理解析
2020/03/02 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
详解CSS3弹性伸缩盒
2020/09/21 HTML / CSS
canvas画布实现手写签名效果的示例代码
2019/04/23 HTML / CSS
银行毕业实习自我鉴定
2013/09/19 职场文书
《画杨桃》教学反思
2014/04/13 职场文书
车间质检员岗位职责
2015/04/08 职场文书
vue+element ui实现锚点定位
2021/06/29 Vue.js
JavaScript 原型与原型链详情
2021/11/02 Javascript
Vue的过滤器你真了解吗
2022/02/24 Vue.js