![](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 · 236 阅读 · 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 · 166 阅读 · 0 评论 -
JavaScript实现放大镜效果
功能鼠标移入到smallBox上,显示mask 和 bigBox鼠标移出smallBox, 隐藏mask 和 bigBox鼠标在smallBox上移动 onmousemovemask跟随鼠标移动限制mask的移动范围等比例的移动大图//css* { margin: 0; padding: 0;}.box { width: 350px; ...原创 2019-11-05 11:58:44 · 123 阅读 · 0 评论 -
鼠标拖拽的两种方法
<div></div>div { width: 100px; height: 100px; background-color: aqua; cursor: move }// 方式一: var div = document.querySelector('d...原创 2019-11-05 11:52:08 · 927 阅读 · 0 评论 -
children和querySelectorAll之间的区别
共同点:children 所有的子元素querySelectorAll 也可以来找所有的子元素不同点:通过children获取到的元素集合(伪数组)是个动态集合,拿到的是实时的信息通过querySelectorAll获取到的元素集合(伪数组)是个静态集合,拿到的只是页面初次加载时的信息解释动态集合是会随着元素的变化而变化,元素增加了,集合就跟着增加了元素减少了,也会跟着减...原创 2019-11-01 11:07:10 · 826 阅读 · 0 评论