replaceState()和pushState()是HTML5中history对象新添加的两个方法，用来在浏览历史中添加或修改记录，通过这两个方法可以实现替换浏览器地址栏url而不刷新网页。 语法 history.replaceState(stateObj, title[, url]); history.pushState(stateObj, title[, url]); 两上方法的参数完全一样，区别是两者是否会修改浏览历史中当前纪录。其中replaceState不会有历史记录，pushState有历史记录。 参数 ...
在Web网页前端开发中使用background-attachment:fixed;样式设置背景图片固定时发现苹果手机浏览器Safari不支持CSS属性background-attachment，这着实有点意外，毕竟background-attachment是个比较老标准的CSS属性。既然不支持，那就只能使用替代方案了，比如可以通过固定定位样式position:fixed;实现。 代码很简单，CSS基础牢固的都能想到或者理解思路。 HTML代码： <div class="parent"> <div class="fixed" style=...
在VSCode编辑器安装使用Easy LESS扩展自动编译less代码padding:0 unit(23/16,em)时报错： Error evaluating function `unit`: the first argument to unit must be a number. Have you forgotten parenthesis? 翻译过来的意思就是 计算函数“unit”时出错：unit的第一个参数必须是数字。你忘了括号了吗？ 嗯~这个真的没什么印象了，因为在Sublime编辑器也是这么用的，但没...
js汉字转拼音的代码在前面的《jquery实现淘宝APP收货地址地区联动选择效果》有发布过，这里单独记录代码的使用方法，如转全拼、提取首字母。 Javascript代码（代码比较长） /* --- description: Pinyin, to get chinese pinyin from chinese. license: MIT-style authors: Bill Lue requires: core/1.2.1: '*' provides: [Pinyin] ... */ var pinyin = (function (){ v...
slick.js是常用的轮播图插件，监听video视频播放是常用的轮播模块效果。和SuperSlide.js插件、Swiper插件实现当前焦点有视频就暂停自动轮播，等视频播放结束再继续自动轮播的实现原理基本一样，就是先判断当前焦点是否有视频，如果有视频就调用暂停轮播的插件方法，使用addEventListener监听视频是否播放结束，然后再调用启用轮播的插件方法和立即播放下一屏的插件方法。 使用到的slick.js插件方法有：slickPause、slickPlay、slickNext；使用到的slick.js插件回调函数有：afterChange；使用到的js事件有：end...
不想网页被人通过浏览器审查元素或控制台调试网页代码，可以通过比较屏幕window.outerWidth和页面可见区域window.innerWidth的差距判断浏览器是否打开了Web开发者工具，如果检测到Web开发者工具被打就清空网页代码。 实现代码： ;(function () { 'use strict'; var devtools = { open: false, orientation: null } var threshold = 160;//outerWidth与innerWidth...
目前为止还没有单个css样式属性来隐藏overflow属性的默认滚动条，需要针对不同浏览器使用不同的专属css样式属性或css伪类来实现。如对于webkit内核的浏览器Chrome、Safari等使用css伪类；Firefox火狐浏览器使用scrollbar-width属性；IE 10+浏览器使用专属属性-ms-overflow-style。 Firefox浏览器 scrollbar-width 允许开发者设置滚动条出现时的厚度，可选值：auto、thin、none，支持Firefox 64+版本、Firefox for Android 64+版本 代...
使用Swiper.js轮播图插件实现当前活动块元素有video视频时swiper停止自动切换，监听视频播放结束再继续自动切换到下一个的效果。实现该效果需要用到swiper事件有slideChangeTransitionEnd(swiper)、用到swiper的方法有mySwiper.autoplay.stop()、mySwiper.autoplay.start()。 实现代码 HTML代码 <div class="swiper" id="slides"> <div class="swiper-wrapper"> <di...
UEditor编辑器有上传附件的组件，如果网站有使用UEditor编辑器，又想在编辑器窗口外单独调用UEditor的上传附件功能，可以参考下面的代码。 HTML代码 <div class="uploadfile"> <input name="file" id="file" type="text" class="uplod_file" value="" /> <span class="btn">上传附件</span> </div> 引用UEditor编辑器相关文件 <!-- 配置...
在Less中使用CSS函数calc()动态计算长度值时出现错误，原本是px像素单位的数值被当成%百分比单位来计算，导致计算结果不正确。 Less代码： .calc { width:calc(100% - 90px); } 编译后的CSS代码： .calc { width:calc(10%); } 原因是less对代码进行了转换编译，解决方法是使用 “~''” 符合禁止对其编译，让其原样输出即可。 修改代码如下： .calc { width:~'calc(100% - 90px)'; } 编译后的代码如下：...
使用 $.ajax 请求本地静态文件数据，数据明明是JSON格式，但返回值的数据类型却是字符串，这是因为在数据传输过程中，JSON是以文本（即字符串）的形式传递的，所以返回的值也就是字符串类型，因此在操作返回的JSON数据时，需要先把JSON字符串转换为JSON对象，也就是解析，即反序列化（简单地理解）。 涉及基础 简单地理解，序列化就是把JSON对象转化成JSON字符串类型的过程；反序列化则是把JSON格式的字符串转化为JSON对象的过程。 在jQuery中可以使用 $.parseJSON(data) 实现标准格式的JSON字符串反序列化为JSON对...
在修改网页的焦点图效果：当前焦点是视频的时候，暂停焦点图的自动轮播，当视频播放完成后再启用焦点图的自动轮播。查看代码发现该焦点图使用的是 SuperSlide.js 插件，这是一款存在时间挺长的 jquery 焦点图插件，但多年的更新，插件的参数还是不够丰富全面，一些效果实现起来会比较麻烦。不过庆幸的是 SuperSlide.js 插件有提供 startFun 和 endFun 函数。 温馨提示：以下代码适用于 SuperSlide 2.1+版本。 实现代码： HTML代码 <div class="slides"> <...