前言 图片懒加载也是比较常见的一种性能优化的方法，最近在用vue做一个新闻列表的客户端时也用到了，这里就简单介绍下实现原理和部分代码。 实现原理 加载页面的时候，图片一直都是流量大头，针对图片的性能方法也挺多的比如base64、雪碧图等；懒加载也是其中一种，主要原理是将非首屏的图片src设为一个默认值，然后监听窗口滚动，当图片出现在视窗中时再给他赋予真实的图片地址，这样可以保证首屏的加载速度然后按需加载图片。具体...
在为 jTool 提供 offset (获取当前节点位置）方法时， 先后使用了两种方式进行实现， 现整理出来以作记录。前后共使用了两种方式实现了该方法， 这里将这两种方法分别列出。 通过递归实现 function offset(element) {var offest = {top: 0,left: 0};var _position;getOffset(element, true);return offest;// 递归获取 offset, 可以考虑使用 getBoundingClientRectfunction getOffset(node, init) {// 非Element 终止递归if (node....
废话不多说了，直接给大家贴代码了，具体代码如下所示： <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <input id="cheakAll" type="checkbox">全选 <div> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> <input type="checkbox"> </div> </body> </html> <script> //找到全选按钮 var oChkAllBtn=document.getElementById...
在做项目的时候，有时候需要用到异步数据请求，但是如果这个时候没有框架的依赖，就需要用到原生JS进行异步数据请求。这时候无非有两种请求方式，一种是AJAX，另一个是JSONP。通过原生JS对异步请求进行简单的封装。 AJAXAJAX是一种数据请求方式，不需要刷新整个页面就能够更新局部页面的数据。AJAX的技术核心是XMLHttpRequest对象，主要请求过程如下： 创建XMLHttpRequest对象(new)连接服务器(open)发送请求(send)接收响应数据(onr...
先给出效果图：写的小组件支持图片的渐显、渐隐，并且可以是有序、随机两种方式。我采用的原型是属性写在构造函数内，方法写在原型对象内。方法写构造函数内有个问题，就是每次调用这个方法就相当于重新实例化一次，举个粟子：实现网格效果的原理上是将读取图片的宽高，按照设定的参数，分成等高宽的网格（我用的span标签表示的网格），网格利用定位铺满整个图片，每个网格的背景图都是原图片，原理同sprite，利用background-posit...
实例如下： // 使用原生js 封装ajax // 兼容xhr对象 function createXHR(){if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器return new XMLHttpRequest();}else if(typeof ActiveXObject != "undefined"){ // IE6浏览器var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp",];for(var i = 0; i < version.length; i++){try{return new ActiveXObject(version[i]);}catch(e){//跳过}}}else{throw...
需求分析 简单的分析一下，要实现N级菜单，首先从布局入手，即判断是否有下级菜单 1.没有下一级菜单,直接排列 2.有下级菜单，又分为下级菜单排放位置，和在上级菜单显示类似 > 的符号，效果如图:图：1 初步实现 1.实现是否存在 > 注意： 下面凡是担忧 xxx===yyy ? xxx : xxx都是利用三元表达式，来表达思路。 ＨＴＭＬ结构如下：图：2 ?要实现图一的效果，我们只需要判断li标签里面的children.length===2 ? span存在 : span移除...
上图为博客右侧截取的GIF图，下图为代码效果 HTML： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>SlideFont</title> </head> <body><div class="F-SlideFont-Box"><dl class="F-SlideFont-Box-Tag"><dd class="F-SlideFont-Tag">谷歌</dd><dd class="F-SlideFont-Tag">百度</dd><dd class="F-SlideFont-Tag">阿里</dd><dd class="F-SlideFont-Tag">苹果</dd><dd class="F-SlideFont-Tag">三星</dd><dd ...
作为一名前端工程师，手写轮播图应该是最基本掌握的技能，以下是我自己原生js写的轮播，欢迎指点批评：首先css代码 a{text-decoration:none;color:#3DBBF5;}*{margin: 0;padding: 0;}.wrapper{width: 400px;height: 300px;margin: 100px auto;}#lunbo{position: relative;overflow: hidden;}#list{position: relative;white-space: nowrap; // 这块用行元素模拟，所以才用该属性，块元素可修改这块}#list span{display: inline-blo...
又是轮播？没错，换个样式玩轮播。HTML: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>wtf</title> </head> <body><div class="container"><div class="box"><img class="front" src="img/A.jpg" alt="PIC"><img class="back" src="img/B.jpg" alt="PIC"><img class="active" src="img/C.jpg" alt="PIC"><div class="btns"><span class="btn"><</span><span class="btn">></span></div></div></div></bod...
本文实例为大家分享了js实现放大镜特效展示的具体代码，供大家参考，具体内容如下 普及知识：放大镜特效涉及到的几个值 offsetWidth 获取元素的宽度 offsetHeight 获取元素的高度 offsetLeft父元素没有定位时，获取元素距离页面的左边距，父元素有定位时，获取元素距离父元素的左边距 offsetTop父元素没有定位时，获取元素距离页面的上边距，父元素有定位时，获取元素距离父元素的上边距 scrollTop 内容滚动的上边距 scrollLe...
本文实例为大家分享了js实现贪吃蛇游戏的具体代码，供大家参考，具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>贪吃蛇游戏</title><style type="text/css"> * {margin: 0;padding: 0; }.wrap {width: 600px;margin: 0 auto;position: relative; }p {position: absolute;left: 65%;top: 10%; }h1 {text-align: center;margin-bottom: 20px; }#score {text-align: center;f...
最近用原生JS写一个环形的鼠标滑动效果，代码如下： <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>*{margin:0;padding:0;}div{width:50px;height:50px;border-radius:50%;position: absolute;border-width:10px;border-style: solid;}</style> </head> <body> </body> <script>var divList=[];//创建一个空的集合，用来存储创建的divfor(i=0;i<50;i++){//循环次数50，创造50个div（环...
效果图：代码如下： <!DOCTYPE html> <html> <head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><title></title><style>*{margin:0;padding:0;}#container{width:310px;height:310px;margin:30px auto;}#ul1{width:310px;height:310px;list-style:none;}#ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}#ul1 a:hover{cursor...
这个导航下拉菜单需要实现的功能是：下拉菜单的宽度与浏览器视口的宽度一样宽；一级导航只有两项，当鼠标移到一级导航上的导航项时，相应的二级导航出现。在本案例中通过改变二级导航的高度来实现二级导航的显示和消失。为了便于理解我画了一个图，如下：在这个案例主要用到的知识有：设置定时器，清除定时器，mouseout和mouseover事件，另外还有css中position相关知识。本案例分为两部分讲解。第一部分html和css，第二部分js。 一...