页面的交互特效封装成对象的方法，声明在构造函数的原型中

装了一手好逼啊…

实现原理

1. 将京东页面的各个特效集合成一个对象jdpage的不同方法，将事件函数声明在该对象的构造函数jdEffect的原型jdEffect.prototype中
2. 实例化new一个京东页面特效的对象jdpage
3. 窗口加载事件中，调用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