jQuery项目：京东商品详情页
2024-05-10 01:03:52
目录
- 需求分析
- 代码分析
- 1. 鼠标移入显示,移出隐藏
- 2. 鼠标移动切换二级导航菜单的切换显示和隐藏
- 3. 输入搜索关键字, 列表显示匹配的结果
- 4. 点击显示或者隐藏更多的分享图标
- 5. 鼠标移入移出切换地址的显示隐藏
- 6. 点击切换地址tab
- 7. 鼠标移入移出切换显示迷你购物车
- 8. 点击切换产品选项 (商品详情等显示出来)
- 9. 点击向右/左, 移动当前展示商品的小图片
- 10. 当鼠标悬停在某个小图上,在上方显示对应的中图
- 11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
- 完整代码
需求分析
- 鼠标移入显示,移出隐藏
目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品 - 鼠标移动切换二级导航菜单的切换显示和隐藏
- 输入搜索关键字, 列表显示匹配的结果
- 点击显示或者隐藏更多的分享图标
- 鼠标移入移出切换地址的显示隐藏
- 点击切换地址tab
- 鼠标移入移出切换显示迷你购物车
- 点击切换产品选项 (商品详情等显示出来)
- 点击向右/左, 移动当前展示商品的小图片
- 当鼠标悬停在某个小图上,在上方显示对应的中图
- 当鼠标在中图上移动时, 显示对应大图的附近部分区域
代码分析
1. 鼠标移入显示,移出隐藏
目标: 手机京东, 客户服务, 网站导航, 我的京东, 去购物车结算, 全部商品
function showhide() {$('[name=show_hide]').hover(function() {// 找到隐藏的id让他显示var id = this.id + '_items'$('#' + id).show()}, function() {// 找到显示的id让他隐藏var id = this.id + '_items'$('#' + id).hide()})};
2. 鼠标移动切换二级导航菜单的切换显示和隐藏
function hoverSubMenu() {$('#category_items>div').hover(function() {$(this).children(':last').show()}, function() {$(this).children(':last').hide()})}
3. 输入搜索关键字, 列表显示匹配的结果
function search() {// $("#txtSearch").focus(function() {//// })// .keyup(function() {//// })$("#txtSearch").on('keyup focus', function() {//如果输入框有文本才会显示列表var txt = this.value.trim()if(txt) {$('#search_helper').show()}}).blur(function() {// 隐藏列表$('#search_helper').hide()})}
4. 点击显示或者隐藏更多的分享图标
.
function share() {//标识当前的状态(初始为关闭)var isOpen = falsevar $shareMore = $('#shareMore')var $parent = $shareMore.parent()var $as = $shareMore.prevAll('a:lt(2)')var $b = $shareMore.children()$shareMore.click(function() {if(isOpen) { // 去关闭isOpen = false$parent.css('width', 155)$as.hide()$b.removeClass('backword')} else { // 去打开isOpen = true$parent.css('width', 200)$as.show()$b.addClass('backword')}// isOpen = !isOpen})}
5. 鼠标移入移出切换地址的显示隐藏
function address() {var $select = $('#store_select')$select.hover(function() {$(this).children(':gt(0)').show()}, function() {$(this).children(':gt(0)').hide()}).children(':last').click(function() {// $(this).children(':gt(0)').hide() // 不能用, this不对$select.children(':gt(0)').hide()})}
6. 点击切换地址tab
function clickTabs() {$('#store_tabs>li').click(function() {$('#store_tabs>li').removeClass('hover')this.className = 'hover'})}
7. 鼠标移入移出切换显示迷你购物车
function hoverMiniCart() {$('#minicart').hover(function() {this.className = 'minicart'$(this).children(':last').show()}, function() {this.className = ''$(this).children(':last').hide()})}
8. 点击切换产品选项 (商品详情等显示出来)
function clickProductTabs() {var $lis = $('#product_detail>ul>li')var $contents = $('#product_detail>div:gt(0)')$lis.click(function() {$lis.removeClass('current')this.className = 'current'//隐藏所有$contents$contents.hide()//显示当前对应的contentvar index = $(this).index()// $contents.eq(index).show()$contents[index].style.display = 'block'})}
9. 点击向右/左, 移动当前展示商品的小图片
function moveMiniImg() {var $as = $('#preview>h1>a')var $backward = $as.first()var $forward = $as.last()var $Ul = $('#icon_list')var SHOW_COUNT = 5var imgCount = $Ul.children('li').lengthvar moveCount = 0 //移动的次数(向右为正, 向左为负)var liWidth = $Ul.children(':first').width()// 初始化更新if(imgCount > SHOW_COUNT) {$forward.attr('class', 'forward')}// 给向右的按钮绑定点击监听$forward.click(function() {// 判断是否需要移动, 如果不需要直接结束if(moveCount === imgCount - SHOW_COUNT) {return}moveCount++//更新向左的按钮$backward.attr('class', 'backward')// 更新向右的按钮if(moveCount === imgCount - SHOW_COUNT) {$forward.attr('class', 'forward_disabled')}// 移动ul$Ul.css({left: -moveCount * liWidth})})// 给向左的按钮绑定点击监听$backward.click(function() {// 判断是否需要移动, 如果不需要直接结束if(moveCount === 0) {return}moveCount--//更新向右的按钮$forward.attr('class', 'forward')// 更新向左的按钮if(moveCount === 0) {$backward.attr('class', 'backward_disabled')}// 移动ul$Ul.css({left: -moveCount * liWidth})})}
10. 当鼠标悬停在某个小图上,在上方显示对应的中图
function hoverMiniImg() {$('#icon_list>li').hover(function() {var $img = $(this).children()$img.addClass('hoveredThumb')//显示对应的中图var src = $img.attr('src').replace('.jpg', '-m.jpg')$('#mediumImg').attr('src', src)}, function() {$(this).children().removeClass('hoveredThumb')})}
11. 当鼠标在中图上移动时, 显示对应大图的附近部分区域
var $mediumImg = $('#mediumImg')var $mask = $('#mask') // 小黄块var $maskTop = $('#maskTop')var $largeImgContainer = $('#largeImgContainer')var $loading = $('#loading')var $largeImg = $('#largeImg')var maskWidth = $mask.width()var maskHeight = $mask.height()var maskTopWidth = $maskTop.width()var maskTopHeight = $maskTop.height()$maskTop.hover(function () {// 进入$mask.show()// 动态加载对应的大图// images\products\product-s2-m.jpg// images/products/product-s2-l.jpgvar src = $mediumImg.attr('src').replace('-m.', '-l.')$largeImg.attr('src', src)$largeImgContainer.show()// 绑定加载完成的监听$largeImg.on('load', function () { // 大图加载完成// 得到大图的尺寸var largeWidth = $largeImg.width()var largeHeight = $largeImg.height()// 给$largeImgContainer设置尺寸$largeImgContainer.css({width: largeWidth/2,height: largeHeight/2})// 显示大图$largeImg.show()// 隐藏加载进度条$loading.hide()console.log($largeImg.width(), $largeImg.height())//鼠标移动的监听$maskTop.mousemove(function (event) {/*1. 移动小黄块2. 移动大图*//*1. 移动小黄块*///计算left/topvar left = 0var top = 0// 事件的坐标var eventLeft = event.offsetXvar eventTop = event.offsetYleft = eventLeft - maskWidth/2top = eventTop - maskHeight/2// left在[0, maskTopWidth-maskWidth]if(left<0) {left = 0} else if(left>maskTopWidth-maskWidth) {left = maskTopWidth-maskWidth}// top在[0, maskTopHeight-maskHeight]if(top<0) {top = 0} else if(top>maskTopHeight-maskHeight) {top = maskTopHeight-maskHeight}//给$mask重新定位$mask.css({left: left,top: top})/*2. 移动大图*/// 得到大图的坐标left = -left * largeWidth / maskTopWidthtop = -top * largeHeight / maskTopHeight// 设置大图的坐标$largeImg.css({left: left,top: top})})})}, function () {$mask.hide()$largeImgContainer.hide()$largeImg.hide()})
完整代码
见评论区网盘链接
jQuery项目：京东商品详情页相关推荐
- 京东商品详情页前端开发宝典
声明:本位来自京东张开涛的微信公众号(kaitao-1234567),授权CSDN转载,如需转载请联系作者. 作者:周琪力,前端工程师,网络常用昵称「keelii」.在过去的4年里主要负责京东网站商品 ...
- 京东商品详情页服务闭环实践
原文地址:http://blog.csdn.net/hackercn9/article/details/59508095 该文章是根据OpenResty Con 2015技术大会的演讲<Ngin ...
- 京东商品详情页碎碎念
在之前的两篇文章<构建需求响应式亿级商品详情页>和<京东商品详情页服务闭环实践>已经详细介绍了整个系统的架构设计和实现思路.本篇将介绍下杂七杂八的一些实践: 静态化 突发流量 ...
- 京东商品详情页API接口、京东商品销量API接口、京东商品列表API接口、京东APP详情API接口、京东详情API接口，京东SKU信息接口
京东商品详情页API接口.京东商品销量API接口.京东商品列表API接口.京东APP详情API接口.京东详情API接口,京东SKU信息接口,通过商品ID提取商品详情页各项数据,包含商品标题,sku i ...
- 模仿京东-商品详情页前端样式 CSS+html+js
老师让我们模仿京东前端做一下,练一下前端,我被分到商品详情页 先写静态的,后续再说 不怎么会前端,所以只用了css+html做静态页面,然后js做了一些超简单的点击事件,就点击出现/隐藏效果,还有左右 ...
- 爬取京东商品详情页信息
之前写过爬取京东商品导航信息,现在献上爬取京东商品详情页信息. #爬取京东商品详情页信息 #2017/7/30import requests from bs4 import BeautifulSoup ...
- 京东商品详情页API接口、京东详情API接口、京东商品销量API接口、京东商品列表API接口、京东APP详情API接口、京东SKU信息接口，京东API接口
通过商品ID或是商品url中的商品ID调用提取京东商品详情页API接口.京东商品销量API接口.京东商品列表API接口.京东APP详情API接口.京东详情API接口,京东SKU信息接口拿到商品详情页各 ...
- 京东商品详情页技术实现
http://www.csdn.net/article/2015-12-28/2826570 大家来京东打开商品页一般会看到如通用版.闪购.全球购等不同的页面风格,这里面会牵扯到各种各样垂直化的模板页 ...
- java电商项目搭建-------商品详情页模块
努力好了,时间会给你答案.--------magic_guo 在一个电商项目中,访问频率最高的是商品详情页页面,而且商品详情页的变化评率不会太高(除非是搞活动的时候):那么访问频率高,然后再使用数据库 ...
- android 仿淘宝、京东商品详情页 向上拖动查看图文详情控件
一.淘宝商品详情页效果 先看一下淘宝详情页的效果 我们的效果 二.实现思路 使用两个scrollView,两个scrollView 竖直排列,通过自定义viewGroup来控制两个scrollView ...
最新文章
- 总是感觉时间不够用？程序员如何管理时间？
- 欧洲安全研究人员：黑客是如何泄露加密电子邮件
- 【数据挖掘笔记九】分类：高级方法
- 说说牛顿迭代 -- 方法篇
- ecmall支持php5.3,在PHP5.3以上版本运行ecshop和ecmall出现的问题及解决方案
- Suse发生了错误Access denied for user #39;#39;@#39;localhost#39; toamp;
- matlab画交通标志,基于MATLAB的交通标志设计方法研究
- C# 读写锁 ReaderWriteLock
- 软件工程综合实践第二次作业——结对编程
- c++ vector随机排序
- undo歌词中文音译_undo的中文谐音歌词
- 15个最佳电子商务Android应用模板
- Chrome调试器中的“警告：显示了临时标题”
- Python之os库
- (边学边练)JAVA基础学习第三天
- 最新最全论文合集——多模态情感分析
- 设置行与行的间隔（行间距）
- 达梦数据库删除用户_干货分享丨DM8用户管理
- css的几种布局方式都在这
- Java数组转集合之Arrays.asList()用法