基于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利用event.which方法获取键盘输入值的代码
Oct 09 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript三元运算符用法实例
Apr 16 Javascript
从零开始学习Node.js系列教程五:服务器监听方法示例
Apr 13 Javascript
javaScript日期工具类DateUtils详解
Dec 08 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
Node 代理访问的实现
Sep 19 Javascript
vue实现页面切换滑动效果
Jun 29 Javascript
JavaScript读取本地文件常用方法流程解析
Oct 12 Javascript
vue element-ui中table合计指定列求和实例
Nov 02 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
Terran兵种对照表
2020/03/14 星际争霸
php 检查电子邮件函数(自写)
2014/01/16 PHP
php格式化日期和时间格式化示例分享
2014/02/24 PHP
PHP中cookie知识点学习
2018/05/06 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
FF火狐下获取一个元素同类型的相邻元素实现代码
2012/12/15 Javascript
javascript 日期时间 转换的方法
2013/02/21 Javascript
Jquery动态更改一张位图的src与Attr的使用
2013/07/31 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
js时间日期格式化封装函数
2014/12/02 Javascript
js由下向上不断上升冒气泡效果实例
2015/05/07 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
2016/09/20 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
详解JavaScript中的属性和特性
2016/12/08 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Vue + Webpack + Vue-loader学习教程之功能介绍篇
2017/03/14 Javascript
nodejs操作mongodb的填删改查模块的制作及引入实例
2018/01/02 NodeJs
react实现点击选中的li高亮的示例代码
2018/05/24 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
2019/01/22 Javascript
JavaScript判断数组类型的方法
2019/10/23 Javascript
JavaScript实现前端倒计时效果
2021/02/09 Javascript
pandas带有重复索引操作方法
2018/06/08 Python
实例讲解Python爬取网页数据
2018/07/08 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
Django 实现外键去除自动添加的后缀‘_id’
2019/11/15 Python
详解基于Jupyter notebooks采用sklearn库实现多元回归方程编程
2020/03/25 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
电大物流学生的自我评价
2013/10/25 职场文书
低碳生活倡议书
2014/04/14 职场文书
档案接收函格式
2015/01/30 职场文书
学校艾滋病宣传活动总结
2015/05/09 职场文书
小学大队委竞选口号
2015/12/25 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers