以前写购物车，总是或多或少会留下几个小bug被学生捉虫，这次把以前jQuery写的一个商城项目的购物车单独拎出来，用原生js(ES6)再写一次，希望是零漏洞了。点击图片看效果。功能：很多很多小细节，就...
2023年07月02日 854
最近更新
JavaScript案例集
原生js实现放大镜效果
现在都是手机端，使用放大镜功能的情况很少了，把以前电商网站中的放大镜效果单独拎出来，用原生js写一遍。点击图片查看具体效果。放大镜核心功能在于小方块在小图上移动距离的比例和大图移动的比例是一样的。当然...
2023年07月01日 1286
JavaScript案例集
克隆节点实现无缝幻灯片的滑动
做过很多种类型的幻灯片，无缝滑动幻灯加上自动播放应该是幻灯最常见的形式，各大组件库提供的幻灯也一般是这种形式。那这次用原生js实现一个。点击图片看效果。功能：1、默认自动播放，鼠标经过停止，移开继续自...
2023年07月01日 760
JavaScript案例集
仿优设网站的幻灯片
优设是一个设计师喜欢的网站，仿一个它的幻灯片。点击图片查看具体效果。功能：1、数组存放图片路径和标题信息。2、点击上一张、下一张图片滑动切换。3、图片切换的时候标题的高亮对应切换。4、点击标题可以切换...
2023年06月14日 802
CSS教程
PC端的鼠标经过样式在移动端如何去掉？
PC端一般都会做很多鼠标经过的样式，比如文字变色，图片变大，显示隐藏等效果。但是到了移动端，鼠标经过效果变成了点击之后出现，还伴随一个半透明的灰色背景。其实，在做页面之前，我们就要思考，这个效果是PC端鼠标悬停时的效果，在移动端没有悬停的时候又应该是什么样子？最好的解决方案就是利用Media Que...
2023年06月10日 890
CSS3案例集
强迫flex实现二维布局并且每行个数不一样的痛苦！
flex是一维一维一维布局的设计，grid才是二维二维布局的解决方案。但是，flex又提供了flex-wrap这个属性，所以也允许折行显示。但是如果每一行的显示个数不一样的时候，再把对齐和分布等属性用...
2023年06月09日 994
CSS3案例集
flex布局中的order属性最适合的应用场景
order属性可以在不改变html元素结构的情况下，改变元素在页面中渲染的顺序。对于需要交错式排版的场景是最好不过了。比如下面这种交错式时间轴，就可以利用order结合nth-child选择器完美实现...
2023年06月08日 865
CSS教程
移动端适配最好的方案
曾经用flexible.js通过js动态计算html的font-size的方式已经不可取了。经过很多项目测试，发现最好的方式还是calc()结合vw、rem是最可取的最新方案。有了vw单位，再配合calc()函数进行计算，无须使用任何JavaScript代码，就可以实现基于设备宽度的移动端布局适配方...
2023年06月07日 764
CSS教程
flex布局下单行和多行文本省略号的问题
使用flex弹性布局的时候，遇到单行文本使用省略号的时候，常常发现不成功。其实内部的原因还是因为宽度计算的优先级问题。min-width(max-width) > flex-grow(flex-shrink) > flex-basis(值非auto) > width ，如果弹性盒子...
2023年06月06日 932
项目代码下载
05-HTML4+CSS2快速复习视频对应资料下载
这是对HTML4+CSS2的快速复习，在完成了前面的学习之后，可以快速进行复习，适合已经有了html、css基础的童鞋。这套课程虽然短小，只有30个视频，但是确是web2.0web标准的浓缩精华。几乎包括了大部分核心概念的讲解，把这些概念吃透了，几乎没有页面可以难倒你。也就是完全摆脱了看别人代码写页...
2023年06月05日 880