文章目錄

• 1.實現導航欄中“下載App”，和“購物車”,的下拉效果
• • • 效果展示：
    • 代碼展示：
• 2.實現側邊導航欄中商品顯示效果
• • • 效果展示：
    • 代碼展示：
• 3.輪播圖效果
• • • 效果展示：
    • 代碼展示：
• 4.固定右側側邊欄
• • • 效果展示：
    • 代碼展示：
• 5.跳轉登錄注冊界面
• • • 效果展示：
    • 代碼展示：

---

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)';}

---

總結

以上是生活随笔為你收集整理的用js做购物界面的常用效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。