PROMULGATOR
?花心境
四川省成都市- Html
- Css
- Js
body,p,h1 {
margin:0;
}
.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;
}
.fixed-layer {
height:100%;
display:none;
z-index:100001;
}
.relative-layer {
height:100%;
}
.layer-content {
padding:3%;
position:relative;
top:20%;
}
.layer-close {
width:2rem;
height:2rem;
position:absolute;
top:3%;
right:3%;
}
.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;
}
.shop-search {
width:16px;
height:16px;
position:absolute;
top:7px;
left:6px;
}
.layer-return {
background:url(images/return.png) no-repeat center center/12px 20px;
}
.layer-share {
background:url(images/share.png) no-repeat center center/20px 30px;
}
a {
-webkit-tap-highlight-color:transparent;
-webkit-touch-callout:none;
-webkit-user-select:none;
}
.search-box-cover {
background:#d9241c;
width:100%;
height:50px;
position:absolute;
top:0;
left:0;
z-index:0;
opacity:0;
}
.module-content {
min-width:320px;
max-width:750px;
width:100%;
margin:0 auto;
background:#fff;
}
.module-content div:first-child img {
margin-top:0;
}
.module-content div img {
display:block;
width:100%;
margin-top:10px;
}
↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3
立即下载
搜索栏背景（透明度）随滑动渐变
代码描述：移动端搜索栏背景透明度随滑动渐变，web端导航随滑动改变背景色
1，通过单独的背景“<div class="search-box-cover"></div>”，来改变它的透明度，实现搜索栏或者导航栏的背景渐变。
2，setCoverOpacity设置透明度函数必须初始化，防止用户浏览器刷新导致搜索栏（导航）丢失背景。
3，$body.scrollTop() / 550渐变距离的设置，该范围是在0--550之间背景透明度渐变。你可以将550变大或者变小，调到你合适的时候。
4，透明度的变化范围在0-0.9之间，你可以根据需求调节。
5，注意：你的渐变距离必须比你的页面高度小，防止滑动到底部还未渐变完成。
6
叁月0
2017/11/6 11:50:37
不兼容ie
?花心境0
2017/11/6 17:23:16
我在360急速的IE兼容模式和IE11都测试了，没有问题，你看看是哪里出问题了，是不是jQuery的版本过高（jQuery2.0），导致的不兼容低版本的IE（IE8以下的版本）
西瓜0
2017/11/6 23:24:00
css3属性当然不兼容ie8了
?花心境0
2017/11/7 9:52:53
透明渐变用的是背景background，然后用js控制的透明度，没有用css3
?花心境0
2017/11/7 10:05:49
@西瓜说的是对的，不好意思啊，兄弟，我的错，如果要兼容IE8及以下，采用filter:Alpha(opacity=50)。
?花心境1
2017/11/7 10:35:51
var theUA = window.navigator.userAgent.toLowerCase();
if ((theUA.match(/msie\s\d+/) && theUA.match(/msie\s\d+/)[0]) || (theUA.match(/trident\s?\d+/) && theUA.match(/trident\s?\d+/)[0])){
var ieVersion = theUA.match(/msie\s\d+/)[0].match(/\d+/)[0] || theUA.match(/trident\s?\d+/)[0];
if (ieVersion < 9) {flag = false;alert('这是IE： ' + ieVersion);};
}
var setCoverOpacity = function() {
flag ?
$body.find('.search-box-cover')[0].style.opacity = (((getScrollTop() / 550) > 0.9) ? 0.9 : (getScrollTop() / 550)) :
$body.find('.search-box-cover')[0].style.filter = 'Alpha(opacity='+ (((getScrollTop() / 550) > 0.9) ? 0.9 : (getScrollTop() / 550))*100 +')';
}flag是判断浏览器是否为IE8及以下，然后做了IE8及以下的透明渐变处理，由于IE8不支持position：fixed；所以我也没测试出来到底生效没，只是提供解决一个方法