- 博客(27)
- 收藏
- 关注
RSS订阅转载 深入研究-webkit-overflow-scrolling:touch及ios滚动
1. -webkit-overflow-scrolling:touch是什么？MDN上是这样定义的：-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。 touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和...
2019-08-26 11:05:17
341
转载 JS中或者(或 or ||)与并且(与 and &&)
一、||（逻辑或）从字面上来说，只有前后都是false的时候才返回false，否则返回true。alert(true||false); // truealert(false||true); // truealert(true||true); // truealert(false||false); // false但是，从深层意义上来说的话，却有另一番天地，试下面代码alert(0|...
2019-08-21 13:50:28
79246
原创 文字下划线从中间往两头延伸动画
如图所示：可用方法：javascript```li>a:after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #0052d9; transform: scale(...
2019-08-16 11:25:18
847
原创 手机移动端浏览器 HTML 音乐不能自动播放的三种方法
第一种：添加控制属性（controls）<audio autoplay="autopaly" loop="loop" controls="controls" id="audios"> <source src="music/bg.mp3" type="audio/mp3" /></audio>第二种：自定义Func实现交互触发play() v...
2019-08-06 20:44:24
9695
1
原创 js网页点击音乐图片按钮控制音乐播放，转动
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>animation</title> <meta name="viewport" content="width=device-width, user-scalable...
2019-08-06 20:39:04
7412
2
原创 js实现判断鼠标滚轮的上下滚动
<script type="text/javascript"> var scrollFunc = function (e) { e = e || window.event; if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件 if (e.wheelD...
2019-08-01 14:44:47
2511
1
原创 jquery判断鼠标滚轴向上滚动还是向下滚动
$(document).on("mousewheel DOMMouseScroll", function (e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || // chrome & ie ...
2019-08-01 14:42:52
2422
原创 关于水平垂直居中的几种方式
1.如果要设置某个元素在窗体中水平垂直居中的话，将此元素设置为绝对定位（不设置其祖先为相对定位，让其默认针对窗体定位），然后设置元素的margin值为auto,在设置定位的上下左右都为0,即可实现此元素在窗体中水平垂直居中。如：margin:auto;position:absolute;top:0; bottom:0;left:0;right:0;如果要设置某个子元素在父元素中水...
2019-07-31 17:21:08
263
原创 关于使用background-position来控制图片的某部分展示到页面上方法
1.background-position的值为两个数，其中分别是x和y的距离，表示一个html标签盒子中其中的某个位置（以当前html元素的左上角为原点，右边为x轴正向，下边为y轴正向）2.一张背景图片默认是在html标签的左上角原点处开始展示的3.此时我们需要把一张超级大图的一部分展示到html标签中时，我们需要测量出我们要取的那部分图的左边和上边距离我们的html标签盒子的左上方距离为多...
2019-07-31 17:02:40
1661
原创 使用filter实现模糊查询搜索功能
var ar=["zs","ls","ww","zl"];document.write(`<div id="div1">66666666</div>`);var res=ar.filter(function(e){return e.indexOf("s")!=-1;});var res1="";res.forEach(function(e){res1+=`&l...
2019-07-31 16:58:50
4716
原创 关于instanceof的使用
除了Function外，由构造函数new出来的实例都应该是一个普通的对象，即为Object的实例，当然他肯定也是当前构造函数的实例，这个并不冲突。Instanceof是用来验证一个普通对象是否为某个构造函数的实例的，这个对象应该是通过new，而诞生的才能使用instanceof，数组和对象除外。数组可以直接使用，对象不能直接使用自变量，单是变量形式或者包一个括号也可以...
2019-07-31 16:56:07
973
原创 AJAX请求简单封装–demo
<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>随机点名系统</title> <...
2019-07-19 19:48:48
1724
原创 cookie、sessionStorage、localstorage作用范围
关于cookie1.expires属性指 定了coolie的生存期，默认情况下coolie是暂时存在的，他们存储的值只在浏览器会话期间存在，当用户退出浏览器后这些值也会丢失。如果想让 cookie存在一段时间，就要用户expires属性设置为未来的一个过期日期，默认为UTC或GMT时间4. 4. 也可使用max-age属性设置为多少秒过期，max-age用秒来设置 cookie的生存期。...
2019-07-19 19:42:07
4147
1
原创 img之间有空隙的问题
在li中纯放图片img,出现的bug是图片之间有3px的间隙,给li加高度也无效,解决图片间有空隙方法如下:直接加样式img{vertical-align:bottom; display:block}当然在某些情况下无效,比如我要加三个图片,上中下,中间的图片是设为背景,发现用此方法无效,只是上和中的图片空隙没了,而下与中之间还存在,方法很简单,把vertical-align:bottom改成...
2019-07-19 19:23:02
1623
原创 swiper动态加载数据轮播滑动异常问题
最近做项目时遇到的问题开发需求是需要通过接口请求来动态的改变swiper数据最开始是模拟的数据，这样开始使用起来是没有问题的，但是在使用真实数据后就有一大波问题出现，开始以后是同步异步的问题，所以将swiper的初始化放在了请求数据成功后，但还是没有解决问题。出现的问题：1、swiper不能自动切换（设置了autoplay）。2、数据不匹配（需要加载的数据以改变，但是swiper里面的数...
2019-07-15 18:43:38
1654
原创 “use strict” 严格模式使用
ECMAscript5添加一种严格模式的运行模式（“use strict”），让你的js语句在更加严格的环境下进行运行；一、主要作用：消除版本javascript中一些不合理及不严谨之处，减少怪异行为提高编译效率，提高运行速度为新版本的javasript做铺垫兼容二、如何使用启动严格模式的标志就是，在开头第一行中添加"use strict"字符串，在低版本的浏览器，或是说js引擎中，只...
2019-07-11 10:31:42
783
原创 使用scrollTop回到顶部时间
锚链接使用锚链接方式实现回到顶部效果,是最简便的一种方式,即将标签a中的href属性值设置为#即可:,便可实现一键回到顶部效果.为了提供较好的用户体验,这里使用js实现这个功能.功能点1、返回顶部的过程是一个由快到慢的滚动过程;2、在返回顶部的滚动过程中，如果滚动鼠标滚轮，可暂停在当前位置。3、滚动条距离顶部较远时,显示返回顶部按钮,较近时不显示;主要知识点1、DOM操作docum...
2019-07-10 17:21:33
1844
原创 关于swiper 轮播图，手势滑动以后不能继续轮播的问题？
swiper 轮播图，手势滑动以后不能继续轮播的问题;去了解了一下， 发现有个属性： autoplayDisableOnInteraction: false 是用来控制 手势滑动过以后，依然能够重启轮播的属性，但是我加上去以后并不管用。mySwiper4 = new Swiper('.slotMachinesinfo .swiper-container', { direction:...
2019-07-09 14:09:04
2273
3
原创 什么叫闭包？JavaScript
闭包是JavaScript中非常重要的一个概念，下面我们来谈谈什么是闭包借用百度百科关于闭包的定义：闭包就是能够读取其他函数内部变量的函数。由于在javascript中，只有函数内部的子函数才能读取局部变量，所以闭包可以理解成“定义在一个函数内部的函数“。在本质上，闭包是将函数内部和函数外部连接起来的桥梁先假设有这么一个函数：function nv(){var n=10;}它里...
2019-07-04 16:04:13
321
原创 css如何隐藏div滚动条却又能实现滚动功能？
很多时候我们为了美观不想出现滚动条，但是又要保留随着鼠标滚动而滚动的功能。下面我来谈谈该如何做原理如下: 可以用padding等，把滚动条挤出到外面去，达到隐藏的效果。具体操作：在当前div的外面在嵌套一个div，外面div设置隐藏滚动条，里面的div宽度小于外面n像素，右内边距设置成n像素，然后在设置显示竖直滚动条先给大家看一个简单的有滚动条的html界面：代码如下：<htm...
2019-07-04 15:45:53
3715
原创 用jQuery的attr()方法设置属性值无效怎么办？
无疑的jquery是一个极其强大的前端框架，作为一名前端程序员，jQuery几乎是其必备技能，然而有时候却出现jquery失效的情况，现在我们就来讨论为何用jquery的attr方法会失效。我有些CheckBox类型的html控件，通过一个按钮来使用jquery的attr方法来控制选中或者取消选中。奇葩的事情发生了，我第一次选中成功，第一次取消选中也成功，然后我再次进行选中，，，失败了！...
2019-07-04 15:35:09
6767
2
原创 解决iphonex屏幕过长背景图或放在元素里面的图片不能铺满的问题
目前有四种方法1.让设计单独设计一版iphonex的尺寸的图，用js代码判断设备，如果检测到是iphonex就换图 //如果设备是iphonex则追加元素填补空余 function isIPhoneX(fn){ var u = navigator.userAgent; var isIOS = !!u.m...
2019-07-04 15:03:52
2201
原创 jquery.cookie() 方法的使用(读取、写入、删除)
jquery.cookie() 方法:一个轻量级的cookie 插件，可以读取、写入、删除 cookie，下面有个不错的数量，大家可以学习下一个轻量级的cookie 插件，可以读取、写入、删除 cookie。jquery.cookie.js 的配置首先包含jQuery的库文件，在后面包含 jquery.cookie.js 的库文件。 使用方法1.新添加一个会话 cookie：...
2019-07-04 14:59:28
2869
转载 移动端js实现点击复制到剪贴板，【真正】兼容所有浏览器uc、qq、微信、手机自带等浏览器
[查看demo](https://www.love85g.com/majiang/copy/index.html)前言：在移动端上经常会遇到这样的需求，第一种就是点击复制当前页面的链接，第二种就是类似卡券的功能，需要复制密码等，之前需求太紧急，基本上都使用了clipboard.js ,使用方法也很简单：（这种办法也会有很多浏览器及机型是不支持的，只能来做降级处理，提示用户去手动复制，但是假...
2019-06-20 21:17:07
2015
原创 复制微信号并跳转到微信界面
经常遇到需要写复制微信号并跳转到微信界面的功能，这里整理了两种样式，方便下次直接拿来使用。<style> a:link{text-decoration:none;}/* 指正常的未被访问过的链接*/ a:visited{text-decoration:none;}/*指已经访问过的链接*/ a:hover{text-decoration:none;}/*指鼠标...
2019-06-20 18:17:45
3678
1
原创 点击复制内容到剪切板并打开微信
<!DOCTYPE html><html><style> #biao1{ display: none !important; }</style><div cols="20" id="biao1" >444444564564</div><script type="text/jav...
2019-06-20 18:12:33
17612
2
原创 JQuery定时自动消失提示框/弹出框
在表单提交中，不论成功与否，好的体验都应该有弹出提示，效果：alert在页面中央显示提示，1.5秒后消失，不影响页面的正常布局。1 HTML代码HTML代码显示提示内容，放在页面中任何位置。2 CSS代码弹出框参考了 Bootstrap 的样式：.alert {display: none;position: fixed;top: 50%;left: 50%;min-wid...
2019-06-20 17:15:05
3488
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人