【京东详情页】——原生js爬坑之二级菜单

一.引言做京东详情页仿写的时候,要用原生js实现顶部菜单的二级菜单显示与隐藏事件的触发. 过程中遇到了一个坑,在这里与大家分享.要实现的效果如下: 二.坑谁触发事件?显示.隐藏二级菜单 a? 如果绑给a 查找a 怎么查? 选择器怎么写? 调试看是否找到全部a ,找到的是不是自己想要的a区域. 遍历a,添加事件用上了this,当"鼠标移入"a时,触发showSub事件.因为前面showSub已经定义好了,所以不用再写function了.此处,"鼠标移…

【京东详情页】——原生js爬坑之放大镜

一.引言在商城的详情页中,放大镜的功能是很常见的.这里京东详情页就要做一个仿放大镜的效果,预览如下: 二.实现原理实际上,放大镜的实现是单纯用几个div,鼠标移入其中一个小图div,触发事件显示另一个div中的大图. 并非真的使用了某种flash或插件之类,用到放大的效果.所以,网页中的放大镜功能都是模拟. 1.移动功能小坑:ul有left ,左边距不为0,有20px的间距,所以,应到的位置要加20px作为抵消. const LiWIDTH=62://li的宽 const OFFSET=2…

【京东详情页】——原生js爬坑之标签页

一.引言要做详情页的商品评价等5个li的标签页转换,效果如下: 二.实现原理有一个特别的地方:上面五个li,但下面只有四个容器(table/div). 设计的目的:无论点哪个li,只有前四个div或table在显示或隐藏,其它三个清除.商品评价一直显示,如果点击的是商品评价的li,则前四个容器全部清除. 实现过程如下: +function(){ //获得id为product_detail下的ul下的li var lis=document.querySelectorAll( "#product…

【2048小游戏】——原生js爬坑之封装行的移动算法&事件

引言:2048小游戏的核心玩法是移动行,包括横行和纵行,玩家可以选择4个方向,然后所有行内的数字就会随着行的移动而向特定的方向移动.这个行的移动是一个需要重复调用的算法,所以这里就要将一行的移动算法封装,循环调用给所用行,这样便实现了所有行的调用. 一.一行的左移关键逻辑算法伪代码 ↓ c从0开始,遍历当前行每个元素找c右侧下一个不为0的位置nextc 如果找到 → 如果c位置的值是0,将nextc位置的值赋值给c位置,将nextc位置的值置为0,c留在原地:否则如果c位置的值等…

【2048小游戏】——原生js爬坑之遍历算法显示二维数组内容

引言:做2048小游戏会将横纵方向的数字内容,存储在一个二维数组中,要将这个二维数组中的内容显示在页面上,就一定要用遍历算法来实现了. 一.二维数组存储首先考虑用二维数组存储所有行数,列数 → var RN=4,CN=4; 然后再定义一个变量data 来保存这个二维数组 → var data; 游戏的所有主要执行程序都保存在start()函数下 → 启动游戏保存存有行数,列数的二维数组到data中关键代码 ↓ function start(){ data=[]; /…

【2048小游戏】——CSS/原生js爬坑之纯CSS模态对话框&游戏结束

引言:2048小游戏的结束界面,使用纯CSS制作模态对话框,一般做模态对话框都会使用BootStrap自带的模态对话框组件方便使用,但在制作要运行在移动端的小项目时,就不能使用BootStrap,因为文件太大,下载耗时,耗费流量. 一.模态对话框的组成 2个Div,一个铺满整屛,一个显示内容坑:如何让Div铺满整屛?解决:2个办法宽高 100% → position:absolute: → top=0;left=0; 四个方向 margin-top/left/righ…

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var defaultPra = { mainMenuId: "ArcMenu",//主菜单id menuBoxId:"menuBox",//菜单包裹id position: "",//弧形菜单 customPosition:"0,0",/…

【京东详情页】——原生js学习之匿名函数

一.引言在js模块中,要给每一个功能封装一个匿名函数.为了更好的理解什么是匿名函数,为什么要用匿名函数,我做了一些查阅和学习. 二.匿名函数什么是:在创建时,不被任何变量引用的函数. 为什么:节约内存:划分临时作用域,避免全局污染. 何时:只要一个函数只用一次,就释放. 1.回调创建一个函数后,将函数对象传递给其他函数调用. 比如: arr.sort( functioin(a,b){return a-b} ); arr.replace(reg,function(){ return xxx;…

H5-移动端实现滑屏翻页-原生js/jquery

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con…

Jmeter使用Websocket插件测试SingalR，外加还有阿里云PTS的Jmeter原生测试爬坑日志。

题外话:距离我的上一篇博客已经过去7年多了,我实在是个不务正业的程序员,遇到测试方面的东西总想分享一下,因为可用的资料实在太少了(包括国外的资料). 本人不喜欢授人以鱼,所以不会直接给出问题和解决方案的键值对,各位看官多多包涵. 先说说这次的场景: 在开发中我们使用.Net Core的SignalR(底层实现为包括WebSocket的多个协议的封装)作为长连接方案.同时对于该长连接的压力测试也是一个非常重要的环节. 坑1:Jmeter连接SingalR 我通过Chrome查看时,看到有一个连接是…

原生JS通过勾股定理计算苹果菜单效果

JS原生苹果菜单效果知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需要的时候调用难点: 计算 #box { width: 100%; position: absolute; text-align: center; bottom: 0; } #box img { width: 60px; } html结构: <input type="text">…

js点击出现二级菜单，点击二级菜单主菜单换成二级菜单

点击出现二级菜单 *{ margin:0px auto; padding:0px; } .yiji{ width:200px; height:40px; background-color:red; color:#fff; text-align:center; line-height:40px;h vertical-align:middle; border:1px solid #FFF; } .erji1{ width:200px; height:40px; background-color:#F…

JS控制显示/隐藏二级菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ…

Android跳转淘宝、京东APP商品详情页

import Android.content.Intent; import android.content.pm.PackageManager; import android.net.Uri; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; public class MainActivity extends AppCompatActivity…

用js原生加jquery实现下拉跳转至商品详情页，上拉回到商品简介

在做一个商城的项目时,做到商品详情页的时候需要实现这种下拉跳转到商品详情页加载许多图片,上拉回到商品简介的效果,并且需要用户在滑动时有一种费力的感觉.最初是通过iscroll插件实现的,但这个插件在使用时有太多坑儿,总是下面会出现大片空白,还找不到是哪里的问题. 这里用了js原生事件,核心是移动端的touchstart,touchmove,touchend三个事件,判断相对位移来绑定相应的事件.下面是相应的代码,效果还不是很完善. <!DOCTYPE html><html><…

标签页（tab）切换的原生js,jquery和bootstrap实现

概述这是我在学习课程Tab选项卡切换效果时做的总结和练手. 原课程中只有原生js实现,jquery和bootstrap实现是我自己补上的. 本节内容标签页(tab)切换的原生js实现标签页(tab)切换的jquery实现标签页(tab)切换的bootstrap实现 js实现说明: 代码是我自己写的,与课程中的不一样. 主要利用display:none来把部分内容隐藏而显示其它内容. 遇到了事件的循环绑定,我是利用添加id使其成为钩子来解决的. 代码: <!DOCTYPE html>…

原生JS实现分页效果2.0（新增了上一页和下一页，添加当前元素样式）

虽然写的很烂,但至少全部都是自己写的,因为这个没有固定的顺序,所以就没有封装,如果你技术好的话,可以你写的分享给我,谢谢. <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>原生JS实现分页效果</title> <style> body{ margin:100px 200px; } #page{ m…

使用原生js与jQuery分别实现一个简单的tab页签

tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&…

JS仿淘宝详情页菜单条智能定位效果

类似于淘宝详情页菜单条智能定位对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"(要滚动的对象)距离页面顶部的高度,也就是说滚动的对象与窗口的上边缘接触时,立即将对象定位属性position值改成fixed(固定) (除IE6以外,因为IE6不支持fixed).对于IE6用绝对定位position:absolute,top:就是"游览器滚动的top".在 IE6下浏览看…

【京东账户】——Mysql/PHP/Ajax爬坑之添加购物车

一.引言做京东账户项目中的购物车模块,功能之一就是添加购物车.要用到的是Apach环境,Mysql.PHP以及Ajax. 预计效果:用户点击->"加入购物车" 添加成功已经2件二.依据功能创建库.表.记录创建库:jd 创建表:购物车表添加多条记录小坑:购物车表注意尽量少的与产品表重复.只要有:哪个用户?买了哪个商品?买了几个?就够了. 小坑:小计,一般用程序计算,不写死.因为时间不同可能会有打折等变化出现,如果写死,则无法正确得出价格. /***购物车表***/…

多线程爬虫爬取详情页HTML

注意:如果想爬取详情页的信息请按须添加方法 import requests import os import re import threading from lxml import etree #爬去详情页得HTML内容 class CnBeta(object): def get_congtent(self,url): #获取网页首页HTML信息 r = requests.get(url) #将获取得HTML页面进行解码 html = r.content.decode('utf-8') #返回…

scrapy爬取网址，进而爬取详情页问题

1.最容易出现的问题是爬取到的url大多为相对路径,如果直接将爬取到的url进行二次爬取就会出现以下报错: raise ValueError('Missing scheme in request url: %s' % self._url),该错误的意思是request的url为无效链接. 解决方法:将相对路径转换为绝对路径 # -*- coding: utf-8 -*- import scrapy from pyquery import PyQuery from ..items import C…

js处理文章详情页点击量统计

具体需求:在文章管理系统中,需要统计文章详情页面的点击量,来体现该文章是否受用户欢迎,方便管理员调整日后编辑新文章时的内容方向. 解决方案:设置有过期时间的cookie 我们在访问文章详情页面时,拿到该文章的id和该文章所属栏目的id,配合一些特殊符号,以组合成一个独一无二的专属该文章页的cookie名,避免影响其他文章页面的点击量统计.例如有一篇文章名为<水浒传内容简析>的文章,该文章id为7,隶属于<四大名著>栏目下,该文章栏目为2,我给出一段特殊字符串:"jia&q…

Vue 爬坑之路（十二）—— vue-cli 3.x 搭建项目

Vue Cli 3 官方文档:https://cli.vuejs.org/zh/guide/ 一.安装 @vue/cli 更新到 3.x 之后,vue-cli 的包名从 vue-cli 改成了 @vue/cli 如果之前全局安装了旧版本的 vue-cli (1.x 或 2.x),首先需要使用以下命令卸载掉 // 如果没有安装旧版本的 vue-cli 可以跳过卸载直接安装 npm uninstall vue-cli -g # OR yarn global remove vue-cli 然后重新安装…

【饿了么】—— Vue2.0高仿饿了么核心模块&移动端Web App项目爬坑（三）

前言:接着上一篇项目总结,这一篇是学习过程记录的最后一篇,这里会梳理:评论组件.商家组件.优化.打包.相关资料链接.项目github地址:https://github.com/66Web/ljq_eleme,欢迎Star. ratings seller 一.评论组件-ratings 评论组件主要分为三块评分信息-overview 评论选择-ratingselect 评论详细信息评分信息部分左侧评分布局Dom <div class="ratings-content">…

【音乐App】—— Vue-music 项目学习笔记：歌手详情页开发

前言:以下内容均为学习慕课网高级实战课程的实践爬坑笔记. 项目github地址:https://github.com/66Web/ljq_vue_music,欢迎Star. 歌曲列表歌曲播放一.子路由配置以及转场动画实现 components->singer-detail目录下:创建singer-detai.vue route->index.js中:引入并配置Singer子路由SingerDetail import SingerDetail from '@/components/singe…

《VueRouter爬坑第三篇》-嵌套路由

VueRouter系列的文章示例编写时,项目是使用vue-cli脚手架搭建. 项目搭建的步骤和项目目录专门写了一篇文章:点击这里进行传送后续VueRouter系列的文章的示例编写均基于该项目环境. VueRouter系列文章链接 <VueRouter爬坑第一篇>-简单实践 <VueRouter爬坑第二篇>-动态路由 <VueRouter爬坑第三篇>-嵌套路由阅读目录一.前言-从需求出发二.需求实现 1.菜单 2.产品列表 3.产品详情三.主角-嵌套路由四…

VueRouter爬坑第三篇-嵌套路由

【CSS进阶】原生JS getComputedStyle等方法解析

最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐进增强)优雅的处理能力以及 Ajax 等方面周到而强大的定制功能无不令人惊叹. 另外,阅读源码让我接触到了大量底层的知识.对原生JS .框架设计.代码优化有了全新的认识,接下来将会写一系列关于 jQuery 解析的文章. 我在 github 上关于 jQuery 源码的全文注解,感兴趣的可以围观一下…

从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

一.博客系统进度回顾上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效果 2.2实现控制器在前台控制器中创建一个Blog的控制器,主要是展示博客分类以及详情页 Action详情页实现: /// <summary> /// 详情页 /// </summary> /// <param name="id"></param&…

【【京东详情页】——原生js爬坑之二级菜单】的更多相关文章