2018年07月_frank201113

11月 10月 09月 08月 07月 06月 05月 02月

原创 JS代码压缩与代码混淆工具UglifyJS2的使用介绍

JS代码的压缩和代码的混淆可以使得文件变小，还可以有效的防止网站的数据被网络爬虫获取。代码混淆可以把变量名变成a, b, c等字母，可以防止爬虫获取到JS代码中的Ajax，从而防止网站数据被他人获取。目前最流行的工具是UglifyJS2。UglifyJS2官方的定义如下： UglifyJS is a JavaScript parser, minifier, compressor and b...

2018-07-30 23:06:34 4221

原创 jQuery.extend()方法讲解

jQuery.extend()方法在插件开发中经常会运用到，它能够将两个对象合并成一个对象。今天我就用一个例子来讲解jQuery.extend()的用法，具体代码如下：var object1 = { apple: 20, pear: 10};var object2 = { banana: 50, orange: 30};var fruit = $.ext...

2018-07-22 22:54:41 275

原创图片预加载之无序加载

当一个页面的图片很多，或者有图片很大的时候，就可以使用图片预加载的技术来提升用户的体验效果。图片预加载技术核心是用到了Image对象，将图片预先存在Image对象中，当需要展示这张图片的时候，就可以直接从浏览器缓存中获取，这样就不会出现页面假死的情况。今天，我打算用图片预加载技术来做一个简单的图片相册，最终的效果图如下：它的html结构如下：<div class="box"&...

2018-07-22 22:06:09 358

原创 JS实现页面返回顶部

页面返回顶部是在Web中常见的效果，在一个很长的页面中，页面返回顶部按钮可以方便用户回到页面的顶部，增强用户体验。这里我要实现的效果图如下：其html代码如下：&amp;lt;body style=&quot;height: 1800px;&quot;&amp;gt;&amp;lt;div class=&quot;to-top&quot;&amp;gt;&

2018-07-15 21:43:35 8047 3

原创原生JS实现图片幻灯片效果

图片幻灯片是在网页开发中常见的一种效果，几乎是谁处可见。我今天想要实现的幻灯片的效果图如下：它的html的代码非常的简单：<div class="img-wrap"> <ul> <li><img src="./image/aa.webp"/></li> <li>&am

2018-07-14 22:13:54 7250

原创记录一个有关offsetWidth的怪异问题

offsetWidth 是什么？从外形上来看，它和width很像，其实offsetWidth是取得一个DOM对象的border + padding + width的和。果然是和width属性是有关联的啊。我们认识了offsetWidth后，看一下以下的代码，看看offsetWidth返回的值是什么。<!DOCTYPE html><html><head&gt...

2018-07-08 22:40:08 2138

原创获取当前对象的样式

JS获取对象样式的方法如下：function css(obj, attr) { if (obj.currentStyle) { return obj.currentStyle[attr]; } else { return getComputedStyle(obj, false)[attr]; }}...

2018-07-08 10:21:23 846

原创仿苹果菜单的图片放大特效实现

我想用过mac的人都应该见过它的菜单特效，就是鼠标移到适当的位置的时候，菜单图片会有一个放大的效果，今天我就模仿这个效果来做一个有关图片的特效，最终的实现效果如下：它的HTML结构如下：<div class="wrap"> <img src="./images/aa.png"/> <img src="./images/bb.png"/> ..

2018-07-01 20:01:36 1177

原创仿京东图片放大镜动效

相信大家应该都有在京东上买过东西，那么大家在买东西的时候一定见到过图片放大的特效，就像是这样的效果：其实这个效果的原理也很简单，就是我们要准备两张尺寸比例一样的图片，一张小图，一张大图，当鼠标移动到小图上面时，大图显示出相应的部分来。<!DOCTYPE HTML><html><head><meta http-equiv="Content-...

2018-07-01 15:16:05 2389 2