Welcome 微信登录

首页 / 脚本样式 / JavaScript

jQuery滚动加载图片实现原理

jQuery滚动加载图片实现原理

本文主要通过以下几方面来说明懒加载技术的原理,个人前端小菜,有错误请多多指出一、什么是图片滚动加载? 通俗的讲就是:当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径(这样就只需请求一次),只有当图片出现在浏览器的可视区域内时,才设置图片正真的路径,让图片显示出来。这就是图片懒加载。二、为什要使用这个技术? 比如一个页面中有很多图片,如淘宝、京东首页等等,如果一上来就发送这么多请求,页面加载就会很漫长,如...
js实现拖拽效果(构造函数)

js实现拖拽效果(构造函数)

一、利用构造函数模式进行开发的优势 1、业务逻辑思路更清晰; 2、避免了大量全局变量的产生,只有一个全局变量,相当于就是这一功能模块向外暴露的唯一接口; 3、如果结合模块化开发,很方便就可以把自定义的模块加到统一modules中,只要自定义的模块名不冲突,使用起来也不会互相干扰; 4、代码可维护性好,利人利己;二、下面就利用这一模式,以拖拽为实例,进行讲解。1、html,如下:<body> <div class="box" id="...
通过设置CSS中的position属性来固定层的位置

通过设置CSS中的position属性来固定层的位置

定义和用法position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值:static继承性:no版本:CSS2JavaScript 语法:object.style.position="absolute"实例定位 h2 元素:h2 { position:absolute; left:100px; ...
CSS中position属性之fixed实现div居中

CSS中position属性之fixed实现div居中

position 属性规定元素的定位类型。这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。上下左右 居中div{position:fixed;margin:auto;left:0;right:0;top:0;bottom:0;width:200px;height:150px;}如果只需要左右居中,那么把 bottom:0; 或者 to...
Position属性之relative用法

Position属性之relative用法

Relative是position的一个属性,是相对定位。position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static)如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。absolute是相对于自己最近的父元素来定位的,如果你不给#demo相对定位,那么#sub的绝对定位就是相对于body来定位...
jQuery position() 函数详解以及jQuery中position函数的应用

jQuery position() 函数详解以及jQuery中position函数的应用

position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移,也就是相对于被定位的祖辈元素的坐标。该函数只对可见元素有效。所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。该函数返回一个坐标对象,该对象有一个left属性和top属性。属性值均为数字,它们都以像素(px)为单位。与offset()不同的是:position()返回的是相对于被定位的祖...
javascript中new关键字详解

javascript中new关键字详解

和其他高级语言一样javascript中也有new关键字,我们以前认知的new是用来创建一个类的实例对象,但在js中万物皆是对象,为何还要new关键字呢,其实js中new关键字不是用来创建一个类的实例对象,而是用于继承。 接下来,本文将带你一起来探索JS中new的奥秘...function Animal(name){this.name = name;}Animal.color = "black";Animal.prototype.say = functio...
基于JavaScript实现一定时间后去执行一个函数

基于JavaScript实现一定时间后去执行一个函数

在实际需要中可能需要规定在指定的时间之后再去执行一个函数以达成期望的目的,这也就是一个定时器效果,恰好在js中就已经给定了这样的一个函数setTimeout(),下面先介绍一下次函数的用法:语法:复制代码 代码如下:setTimeout(code,interval) 此函数能够规定在指定的在指定的事件之后去执行一段指定代码,此代码只执行一次。setTimeout()函数具有两个参数,第一个参数规定要执行的执行代码,第二个参数规定在多长时间后去执行代码,单位...
JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解

JavaScript 实现的 zip 压缩和解压缩工具包Zip.js使用详解

zip.js是什么 zip.js的github项目地址:http://gildas-lormeau.github.io/zip.js/ 通过zip.js封装一个能在网页端生成zip文件的插件, 直接在网页中创建包含文件夹和文件的压缩包,也可以自定义名字并下载; 如何使用: 1:引用zip.js 2:引用jQuery; 3:并引用封装的ZipArchive.js ,(因为zip.js的api使用起来比较繁琐,所以自己封装实现了这个插件) 4:引...
JavaScript中eval()函数用法详解

JavaScript中eval()函数用法详解

eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行。如果参数是一个表达式,eval() 函数将执行表达式。如果参数是Javascript语句,eval()将执行 Javascript 语句。语法复制代码 代码如下:eval(string)参数描述string必需。要计算的字符串,其中含有要计算的 JavaScript 表达式或要执行的语句。eval()函数用法详解:此函数可能使用的频率并不是太高,但是在某些情况下具有很大的作用,...
以JavaScript来实现WordPress中的二级导航菜单的方法

以JavaScript来实现WordPress中的二级导航菜单的方法

导航菜单导航菜单早已 "深入民心", 在博客上的应用日益重要且多样. 从本文开始, 我将开展几个关于 WordPress 导航菜单的话题, 讨论如何在 WordPress 上使用和加强导航菜单, 话题间有一定的承接关系, 难度也会逐步增加.WordPress 上的导航菜单一般有两种, 页面导航菜单和分类导航菜单.可曾记得? WordPress 是可以撰写独立页面的, 页面导航菜单就是以首页和各个独立页面组成的菜单. 而分类导航菜单则是以首页和各个分...
探究JavaScript函数式编程的乐趣

探究JavaScript函数式编程的乐趣

编程范式编程范式是一个由思考问题以及实现问题愿景的工具组成的框架。很多现代语言都是聚范式(或者说多重范式): 他们支持很多不同的编程范式,比如面向对象,元程序设计,泛函,面向过程,等等。函数式编程范式函数式编程就像一辆氢燃料驱动的汽车——先进的未来派,但是还没有被广泛推广。与命令式编程相反,他由一系列语句组成,这些语句用于更新执行时的全局状态。函数式编程将计算转化作表达式求值。这些表达式全由纯数学函数组成,这些数学函数都是一流的(可以被当做一般值来运用和处...
javascript实现网页端解压并查看zip文件

javascript实现网页端解压并查看zip文件

WEB前端解压ZIP压缩包 web前端解压zip文件有什么用: 只考虑标准浏览器的话, 服务器只要传输压缩包到客户端, 节约了带宽, 而且节约了传输时间, 听起来好像很厉害的说; 如果前端的代码很多, 而且包含大副的图片,那么就可以把js和css和jpg和png等各种数据通过服务端打包成zip传送到浏览器, 浏览器负责解压, css实用动态生成插入到dom中,js也用globalEval直接执行, jpg或者png各种图片文件由blob流转化为...
js编写“贪吃蛇”的小游戏

js编写“贪吃蛇”的小游戏

贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识: 1、JS函数的熟练掌握, 2、JS数组的应用, 3、JS小部分AJAX的学习 4、JS中的splice、shift等一些函数的应用,基本上就这些吧,下面提重点部分:前端的页面,这里可自行布局,我这边提供一个我自己的布局:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/...
<< 1251 1252 1253 1254 1255 1256 1257 1258 1259 1260 >>