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

2018-01-23  本文已影响0人  英俊又可爱XD

装了一手好逼啊…

实现原理

  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

上一篇 下一篇

猜你喜欢

热点阅读