---

1.实现导航栏中“下载App”，和“购物车”,的下拉效果

效果展示：

经过【下载APP】图片盒子显示

代码展示：

 <li class="san">
	 <a href="JavaScript:;"> 下载app</a>
	 <span> |</span>
	 <div class="app">
 	 	<div class="appcode"></div>
 	 	//放在里面 经过图片盒子时也能显示
		<div class="app-nav">
 			<img src="./主页图片/xiaomi-android.png" alt="">
 			<p>小米商城APP</p>
 		</div>
 	</div>
 </li>

//小三角形
.appcode {
    margin-left: 30px;
    width: 0;
    height: 0;
    border: 10px solid transparent;
}

    var app = document.querySelector('.app')
    var san = document.querySelector('.san')
    san.addEventListener('mouseover', function() {
        app.style.transition = ' all 0.4s ease-in';//给图片的展示添加过渡动画
        app.style.height = '167px';// 利用父盒子overflow: hidden; 显示图片
    })
    san.addEventListener('mouseleave', function() {
        app.style.height = '0px';//隐藏图片
    })

---

2.实现侧边导航栏中商品显示效果

效果展示：

代码展示：

原理同效果【1】相似

  <div class="swiper-wrapper">
        <ul class="list-custom">
            <li class="list-nav">
                <a href="JavaScript">手机 <span></span></a>
                <div class="list-item">
                //要显示的商品信息
                </div>
            </li>
            <li class="list-nav">
                <a href="JavaScript">电视<span></span></a>
                <div class="list-item">
                  //要显示的商品信息
                </div>
            </li>
        </ul>
    </div>

    var list = document.querySelectorAll('.list-nav')
    for (var i = 0; i < list.length; i++) {
        list[i].addEventListener('mouseover', function() {
            this.children[1].style.height = '450px';
        })
        list[i].addEventListener('mouseleave', function() {
            this.children[1].style.height = '0px';
        })
    }

---

3.轮播图效果

效果展示：

代码展示：

具体做法，上篇博客有写，这里仅展示代码

window.addEventListener('load', function() {
    var arrow_l = document.querySelector('.arrow-l');
    var arrow_r = document.querySelector('.arrow-r');
    var focus = document.querySelector('.focus');
    var focusWidth = focus.offsetWidth;
    focus.addEventListener('mouseenter', function() {
        arrow_l.style.background = 'rgba(0, 0, 0, .3)';
        arrow_r.style.background = 'rgba(0, 0, 0, .3)';
        timer = null;
    });
    focus.addEventListener('mouseleave', function() {
        arrow_l.style.background = 'rgba(0, 0, 0, 0)'
        arrow_r.style.background = 'rgba(0, 0, 0, 0)'
        timer = setInterval(function() {
            arrow_r.click();
        }, 2000);
    });
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('.circle');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        li.setAttribute('index', i);
        ol.appendChild(li);
        li.addEventListener('click', function() {
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            var index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -index * focusWidth);
        })
    }
    ol.children[0].className = 'current';
    var first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    var num = 0;
    var circle = 0;
    var flag = true;
    arrow_r.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            circleChange();
        }
    });
    arrow_l.addEventListener('click', function() {
        if (flag) {
            flag = false;
            if (num == 0) {
                num = ul.children.length - 1;
                ul.style.left = -num * focusWidth + 'px';
            }
            num--;
            animate(ul, -num * focusWidth, function() {
                flag = true;
            });
            circle--;
            circle = circle < 0 ? ol.children.length - 1 : circle;
            circleChange();
        }
    });

    function circleChange() {
        for (var i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';
        }
        ol.children[circle].className = 'current';
    }
    var timer = setInterval(function() {
        arrow_r.click();
    }, 3000);



function animate1(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
        window.scroll(0, pageYOffset + step);
    }, 15);
}

---

4.固定右侧侧边栏

效果展示：

页面滑动到一定距离，回到顶部模块显示

代码展示：

    var container = document.querySelector('.container');
    var backtop = document.querySelector('.backtop');
    var containerTop = container.offsetTop;
    document.addEventListener('scroll', function() {
        if (window.pageYOffset >= containerTop) {//页面卷去的长度=你规定的长度
            backtop.style.display = 'block';
        } else {
            backtop.style.display = 'none';
        }
    })
    backtop.addEventListener('click', function() {
        animate1(window, 0);
    })

//封装的过渡动画函数
    function animate1(obj, target, callback) {
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var step = (target - window.pageYOffset) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (window.pageYOffset == target) {
            clearInterval(obj.timer);
            callback && callback();
        }
        window.scroll(0, pageYOffset + step);
    }, 15);
}

---

5.跳转登录注册界面

效果展示：

点击【登录】跳转到登录界面
点击【注册】跳转到登录界面

代码展示：

 <li class="tzzc">
	 <span> |</span>
 	 <input type="button" value="注册" id="bt2">
 </li>
 <li class="tzdl">
 	 <input type="button" value="登录" id="bt1">
 </li>

1.点击页面的js

var tzdl = document.querySelector('.tzdl')
    var tzzc = document.querySelector('.tzzc')
    tzdl.addEventListener('click', function() {
        totest1()
    })
    tzzc.addEventListener('click', function() {
        totest2()
    })

//点击页面获得跳转页面的数据
    function totest1() {
        var parm1 = document.getElementById("bt1").value;
        var myurl = "2.html" + "?" + "parm1=" + parm1;
        window.location.assign(myurl);
    }
    function totest2() {
        var parm2 = document.getElementById("bt2").value;
        var myurl = "2.html" + "?" + "parm2=" + parm2;
        window.location.assign(myurl);
    }

2.跳转页面的js

    // 点击登录 登录界面显示 点击注册 注册界面显示
    var dl = document.getElementById('dl')
    var zc = document.getElementById('zc')
    var text = document.querySelector('.text')
    var select_selection = document.querySelector('.select_selection')
    var ink_bar = document.querySelector('.ink_bar')
    dl.addEventListener('click', function() {
        text.style.display = 'block';
        select_selection.style.display = 'none';
        dl.style.color = '#000'
        zc.style.color = '#bbbb'
        ink_bar.style.transform = 'translate3d(0px, 0px, 0px)';
    })

    zc.addEventListener('click', function() {
        select_selection.style.display = 'block';
        text.style.display = 'none';
        zc.style.color = '#000'
        dl.style.color = '#bbbb'
        ink_bar.style.transform = 'translate3d(60px, 0px, 0px)';
    })


    var dl = document.getElementById('dl')
    var zc = document.getElementById('zc')
    var text = document.querySelector('.text')
    var select_selection = document.querySelector('.select_selection')
    var ink_bar = document.querySelector('.ink_bar')
    var parm1 = null;
    getparm();
//控制台获得数据
 function getparm() {
        var url = location.href;
        console.log(url + "111111111");
        var tmp1 = url.split("?")[1];
        console.log(tmp1);
        var tmp2 = tmp1.split("&")[0];
        console.log(tmp2);
        var tmp3 = tmp2.split("=")[1];
        console.log(tmp3);
        parm1 = tmp3;
    }

    if (parm1 == "%E6%B3%A8%E5%86%8C") {//点击跳转  控制台获得的数据
    //相应跳转页面的效果
        select_selection.style.display = 'block';
        text.style.display = 'none';
        zc.style.color = '#000'
        dl.style.color = '#bbbb'
        ink_bar.style.transform = 'translate3d(60px, 0px, 0px)';
    }

---