文章目录

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做购物界面的常用效果相关推荐

JS实现购物网站商品放大镜效果
一.需求说明 1.鼠标移入图片显示遮罩层和右边的放大镜鼠标移出图片隐藏遮罩层和右边的放大镜 2.鼠标经过下面的图片列表区切换显示的图片 3.鼠标在显示的图片上移动,遮罩层也会跟着移动,并 ...
qt web混合编程_QT做界面真是绝美，并且还可嵌入HTML与JS做界面（许多案例）
1. 这年头想要酷炫, 还是用web最方便, QT自带嵌入式webkit, 然后用d3.js D3.js - Data-Driven Documents什么的, 各种酷炫的互动表随手而来. 这里有各种 ...
video.min.js php,使用flv.js与video.js做一个视频直播效果
这次给大家带来使用flv.js与video.js做一个视频直播效果,使用flv.js与video.js做出视频直播效果的注意事项有哪些,下面就是实战案例,一起来看一下. 环境配置首先运行livego ...
javascript php 界面,js实现卡片式项目管理界面UI设计效果_javascript技巧
这是一款非常有创意的卡片式项目管理界面UI设计效果.该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向下滚动鼠标可以看到该项目的介绍信息. 该 ...
仿京东购物界面放大镜效果
背景知识:元素偏移量 offset offset 翻译为偏移量 ,使用 offset 的相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置获得元素自身的大小(宽 ...
php 把省市存入数据库,用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码...
用JS做了个省市县三级联动效果可存入数据库的值老不对,有代码,在线等现在的问题是这样的,当我选好地址后就提交他到数据库中去,可是现在怎么修改提交到数据库中的值都是前面的那些编码,就不是后面的文字.要 ...
js 做返回顶部效果
涉及的知识点: font-awesome字体图标:使用的cdn. window.onload 窗口加载完成事件:如果js代码写在body标签之前,则所有的js都要写在window.onload的事件中 ...
用D3.js 十分钟实现字符跳动效果
用D3.js 十分钟实现字符跳动效果注本文基于 D3.js 作者 Mike Bostock 的例子原文分为三部分, 在这里笔者将其整合为了一篇方便阅读. 该效果基于 D3.js, 主要使用到了 ...
用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在上一篇博客中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

用js做购物界面的常用效果

文章目录

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

效果展示：

代码展示：

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

效果展示：

代码展示：

3.轮播图效果

效果展示：

代码展示：

4.固定右侧侧边栏

效果展示：

代码展示：

5.跳转登录注册界面

效果展示：

代码展示：

用js做购物界面的常用效果相关推荐

最新文章

热门文章