![](https://img-blog.csdnimg.cn/20190918140129601.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
DOM
前端Jason
做一个能独立思考的人,有话可说,有事可干,歌以咏志。
展开
-
swaiper实现轮播图
swiper 初始化swiper 第一个参数为: 轮播图容器的css选择器 第二个参数为:是一个对象,这个对象用来做配置的 .swiper-container { width: 790px; height: 340px; } .swiper-pagination-bullet{ width: 12px; height: 12px; } .swiper-pagin...原创 2019-11-08 11:31:23 · 234 阅读 · 0 评论 -
原生JS实现轮播图
需求: js动态添加小圆点 js动态添加最后一张假图片 实现左右焦点图 + 无缝滚动 自动播放 点击小圆点同步切换 核心:改变ul的left值+无缝轮播 /index.html中的css * { margin: 0; padding: 0; list-style-type: none } div.box { width: 790px; height: 340p...原创 2019-11-08 11:17:05 · 164 阅读 · 0 评论 -
JavaScript实现放大镜效果
功能 鼠标移入到smallBox上,显示mask 和 bigBox 鼠标移出smallBox, 隐藏mask 和 bigBox 鼠标在smallBox上移动 onmousemove mask跟随鼠标移动 限制mask的移动范围 等比例的移动大图 //css * { margin: 0; padding: 0; } .box { width: 350px; ...原创 2019-11-05 11:58:44 · 117 阅读 · 0 评论 -
鼠标拖拽的两种方法
<div></div> div { width: 100px; height: 100px; background-color: aqua; cursor: move } // 方式一: var div = document.querySelector('d...原创 2019-11-05 11:52:08 · 926 阅读 · 0 评论 -
children和querySelectorAll之间的区别
共同点: children 所有的子元素 querySelectorAll 也可以来找所有的子元素 不同点: 通过children获取到的元素集合(伪数组)是个动态集合,拿到的是实时的信息 通过querySelectorAll获取到的元素集合(伪数组)是个静态集合,拿到的只是页面初次加载时的信息 解释 动态集合是会随着元素的变化而变化,元素增加了,集合就跟着增加了 元素减少了,也会跟着减...原创 2019-11-01 11:07:10 · 823 阅读 · 0 评论