Fork me on GitHub

锚点跳转过渡动画

jQuery–1

此技术非常简单。

  1. 像往常一样设置链接,
    例如: href =“#comments”(comments是目标的ID)

  2. 在link元素上添加一个class =“ scroll”属性,现在看起来像这样:

    1
    2
    3
    <a href="#comments" class="scroll">
    滚动到评论
    </a>
    Read more

禁用浏览器调试工具

在某些情况我们可能会需要禁止用户打开调试面板来对页面做一些简单的安全保护,以下是我整理的一些方法。

一、禁止选中

禁止选中主要是防止用户复制文字和图片,样式中禁用即可:

1
2
3
4
5
6
7
8
/*禁止选中*/ 
body{
-moz-user-select: none; /*火狐*/
-webkit-user-select: none; /*webkit浏览器*/
-ms-user-select: none; /*IE10*/
-khtml-user-select: none; /*早期浏览器*/
user-select: none;
}

如果只是禁止部分区域的话,直接在标签上加上onselectstart=“return false”

Read more

网站备案记录

以前备案貌似比较麻烦,需要邮寄签字等过程。不过我这次比较简单和快速,域名和服务器都是在阿里云,一般域名服务商都会有个ICP代备案管理系统,流程比较简单。不了解备案流程的可以去阿里云备案了解一下。

大致流程如下:

image-20200527162847908

Read more

CSS定位详情

CSS 有两个最重要的基本属性,前端开发必须掌握:displayposition

display属性指定网页的布局。两个重要的布局:弹性布局flex网格布局grid

本文介绍非常有用的position属性。我希望通过10分钟的阅读,帮助大家轻松掌握网页定位,说清楚浏览器如何计算网页元素的位置,尤其是新引进的sticky定位。

一、position 属性的作用

position属性用来指定一个元素在网页上的位置,一共有5种定位方式,即position属性主要有五个值。

Read more

Node.js+puppteer爬虫学习P1

关于Puppeteer

Puppeteer 是一个 Node 库,它提供了一个高级 API 来通过 DevTools) 协议控制 Chromium 或 Chrome。Puppeteer 默认以 headless 模式运行,但是可以通过修改配置文件运行“有头”模式。

Puppeteer 是 Node.js 工具引擎, 通过 Chrome DevTools Protocol 协议控制 Chromium/Chrome 浏览器的行为, 实现网页爬取, 自动化测试, 性能诊断等一系列的网页自动化的一些操作.

下面是一个简单的例子, 保存百度图片到本地.

Read more

获取option自定义属性

HTML

1
2
3
4
5
<select name="choose-fruits" id="fruits" >
<option value="Apple" data-sku="fruits-1">Apple</option>
<option value="Orange" data-sku="fruits-2">Orange</option>
<option value="banana" data-sku="fruits-3">banana</option>
<select>
Read more

防抖节流函数

防抖函数和节流函数都是用来提升性能优化及用户体验的一种方案;

防抖函数只会执行一次,且是最后触发的那一次,而节流函数会规律性的执行多次;

防抖

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//定义方法即要做的事情
function fun() {
console.log('onresize');
}
//定义事件触发要执行的方法,两个参数分别是传入的要做的事情和定时器的毫秒数
function debounce(fn, delay) {
//定义一个变量作为等会清除对象
var handle;
//这里用到了闭包,一个函数里面return另一个函数,变量相互签引导致垃圾回收机制不会销毁handle变量
return function () {
//在这里一定要清除前面的定时器,然后创建一个新的定时器
clearTimeout(handle);
//最后这个定时器只会执行一次也就是事件触发完成之后延迟500毫秒再触发(这里的变量赋值是跟定时器建立连接,进行地址赋值,一定要重新赋值给handle
handle = setTimeout(function () { fn() }, delay);
}
}
//给浏览器添加监听事件resize
window.addEventListener('resize', debounce(fun, 500));
Read more
载入天数...载入时分秒...

请我喝杯咖啡吧~

支付宝
微信