2018年4月23日
js拖动滑块
摘要： 在PC端可以用mousedown来触发一个滑块滑动的效果，但在手机上，貌似无法识别这个事件，但手机上有touchstart事件，可以通过一系列“touch”事件来替代PC端的“mouse”事件。 移动端触屏滑动的效果其实就是图片轮播，在PC的页面上很好实现，绑定click和mouseover等事件来 阅读全文
posted @ 2018-04-23 11:14 申小贺 阅读(2246) 评论(0) 推荐(0) 编辑
获取和设置元素的top和left值
摘要： 第一种方法，比较简单，就是直接通过obj.style.left和obj.style.top，但是有局限性，这种获取的方法只能获取到行内样式的left和top的属性值，不能获取到style标签和link 外部引用的left和top属性值。 第二种方法 只读，可以获取所有style样式，存在兼容性问题， 阅读全文
posted @ 2018-04-23 09:49 申小贺 阅读(542) 评论(0) 推荐(0) 编辑
元素位置及宽度的计算总节
摘要： 1.dom.getBoundingClientRect().left/top/right/bottom/height/width; 返回元素相对于浏览器窗口的相对位置及自身的宽高。 IE中只能获取到元素的left,top,bottom,right的属性，而后面的现代浏览器还能获取到元素的width和 阅读全文
posted @ 2018-04-23 09:20 申小贺 阅读(234) 评论(0) 推荐(0) 编辑
2018年4月21日
js 中offsetTop、offsetLeft、offsetWidth、offsetHeight详解
摘要： 1. 偏移量共包括offsetTop、offsetLeft、offsetWidth、offsetHeight 元素：内容大小（width、height）、内边距（padding）、边框（border）、外边距（margin）、滚动条（scroll） 【1】offsetWidth：元素在水平方向上占据 阅读全文
posted @ 2018-04-21 16:01 申小贺 阅读(607) 评论(0) 推荐(0) 编辑
脱离文档流
摘要： 作者：张秋怡链接：https://www.zhihu.com/question/24529373/answer/29135021来源：知乎著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 Q: 脱离文档流就不占据空间了吗？A: 可以这么说。更准确地一点说，是一个元素脱离文档流（o 阅读全文
posted @ 2018-04-21 08:47 申小贺 阅读(245) 评论(0) 推荐(0) 编辑
2018年1月31日
CSS(3)多种方法实现水平垂直居中效果
摘要： CSS(3)多种方法实现水平垂直居中效果 CSS实现水平垂直居中对齐 在CSS中实现水平居中，会比较简单。常见的，如果想实现inline元素或者inline-block元素水平居中，可以在其父级块级元素上设置text-align: center实现；如果想实现块级元素的水平居中对齐，可以设置magi 阅读全文
posted @ 2018-01-31 15:30 申小贺 阅读(291) 评论(0) 推荐(0) 编辑
2017年12月20日
lazyload.js详解
摘要： lazyload.js详解 简介 lazyload.js用于长页面图片的延迟加载，视口外的图片会在窗口滚动到它的位置时再进行加载，这是与预加载相反的。 优点： 它可以提高页面加载速度； 在某些情况清晰它也可以帮助减少服务器负载。 安装 bower安装： $ bower install jquery. 阅读全文
posted @ 2017-12-20 09:59 申小贺 阅读(8129) 评论(0) 推荐(0) 编辑
2017年12月12日
webpack中图片的引用
摘要： rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|jpg)$/, use: { loader: 'url-loader', options: { limit: 100 } }, } 阅读全文
posted @ 2017-12-12 12:39 申小贺 阅读(1338) 评论(0) 推荐(0) 编辑
2017年12月8日
webpack热替换心得
摘要： 1.在webpack热替换中，修改文件后页面是进行局部刷新而不是重载页面。 2.在webpack热替换中，修改某一个文件后，该文件与相关的文件（即import该文件的文件）会进行替换，从而重新执行其中的代码。页面会进行局部刷新。 3.在webpack热替换中，如果一个文件（hello.js）被其他多 阅读全文
posted @ 2017-12-08 11:02 申小贺 阅读(614) 评论(0) 推荐(0) 编辑
2017年12月7日
webpack基本用法
摘要： 1.安装webpack 2.编写webpack配置文件 3.执行webpack命令 4.使用 webpack-dev-server 修改配置文件，告诉开发服务器(dev server)，在哪里查找文件： 让我们添加一个 script 脚本，可以直接运行开发服务器(dev server)： 现在，我们 阅读全文
posted @ 2017-12-07 15:01 申小贺 阅读(837) 评论(0) 推荐(0) 编辑