装了一手好逼啊…
实现原理
- 将京东页面的各个特效集合成一个对象jdpage的不同方法，将事件函数声明在该对象的构造函数jdEffect的原型jdEffect.prototype中
- 实例化new一个京东页面特效的对象jdpage
- 窗口加载事件中，调用jdpage.方法
原型链
页面特效对象的原型链.png
目前只写了搜索框的渐变特效（18.1.23）。
代码
window.addEventListener("load", function(){
var jdpage = new jdEffect(); //实例化
jdpage.searchGradient(); //调用方法
});
var jdEffect = function(){}; //构造函数
jdEffect.prototype = { //构造函数的原型
searchGradient: function(){ } //方法1，函数体见后
}
特效需求如下：当吸顶栏滚过轮播图时，背景图从透明变成半透明。
吸顶栏背景透明度渐变.gif
该方法代码 searchGradient
searchGradient: function(){
var topScrol=0;
var opacity =0;
//轮播图高度（个体设备上是固定值）
var slideHeight = document.querySelector(".slide-items").offsetHeight;
var header = document.querySelector("#header"); //搜索栏对象
var headerHeight = header.offsetHeight;
window.addEventListener("scroll", function(){ //窗口滚动事件
//窗口卷出去的高度
topScroll = document.body.scrollTop || document.documentElement.scrollTop ;
if(topScroll<=slideHeight-headerHeight){ //如果吸顶栏没有滚过轮播图
opacity = topScroll/slideHeight;
header.setAttribute("style","background: rgba(242, 48, 48,"+opacity+");");
}else{ //如果吸顶栏滚过了轮播图
header.setAttribute("style","background: rgba(242, 48, 48,0.8);");
}
})
}
18.1.23
