2018年08月_敲出真谛

原创 jQuery实现360图片导航效果

代码如下： <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>360实现图片导航效果</title> <style> *{ margin: 0; padding: 0; }

2018-08-19 03:51:23 368

原创 jQuery实现手风琴效果

涉及技术栈 jQuery链、each（index，ele）函数代码如下<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>手风琴效果</title> <style&a

2018-08-19 00:46:29 325

原创 jQuery实现层级轮播图

涉及技术栈动态改变宽度、自定义动画、动态设置z-index值。代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>层级轮播图</title> <style> *{ margin:

2018-08-18 23:56:52 1057

原创 jQuery仿淘宝精品服饰广告的实现

技术栈涉及隐式迭代的遍历筛选选择器和为元素排序等代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>仿淘宝精品服饰广告/title> <style> *{ margin: 0;

2018-08-18 22:33:33 713

原创 jQuery实现tab栏切换

涉及到的知识点包括为选择的元素增加序号、过滤选择器、排他思想、动态增加样式等。代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>tab栏切换</title> <style type="text/

2018-08-18 21:52:52 3999 1

原创 js方式实现下拉列表框

原型思想实现函数的调用<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; p

2018-08-18 13:38:59 14371 1

原创 jQuery的9种方式实现下拉列表

利用基本动画、滑动动画、淡入淡出、自定义动画和事件实现下拉列表框。我只是将所学的知识统统实现了一遍，但是如果加上排列和组合不止这九种。（这么神奇，又在吹牛吧。）附代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

2018-08-18 13:11:59 8060 1

原创 jQuery入口函数的实现机理

据说jQuery是一个22岁的小伙子写的，听了不由得竖起大拇指。为什么jQuery可以如此的简化javascript代码呢，那么今天先从入口函数说起。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>jQuery入口函数实现机理</title&amp

2018-08-14 23:12:31 478

原创 forin与forof的区别知多少？

在ES6中有一对遍历数组的for循环，他们的长相差不多，但是具体使用的时候还是有点区别的。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>forin与forof的区别</title> </head> &a

2018-08-14 18:41:44 2620

原创 js实现点击空白处隐藏

技术栈涉及阻止冒泡的方法和怎样判断点击的是当前对象，都是一些工作中比较常用的知识点。<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style&am

2018-08-12 21:26:22 5126 1

原创 js实现垂直滚动条

滚动条长度的计算公式 = 容器的高度/内容的高度*容器的高度图例如下滚动条滚动一次，内容移动的距离 = （内容的高度 - 容器的高度）/（容器的高度 - 滚动条高度）*滚动条移动的距离代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title...

2018-08-12 17:35:12 6541 1

原创 js实现筋斗云效果

理解缓动动画的原理<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>筋斗云</title> <style>

2018-08-12 15:59:31 2340 4

原创 js实现拖动的水平条

理解拖动的原理，鼠标先按下再移动，鼠标抬起停止拖动。代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>拖动的水平条</title&g

2018-08-12 15:23:17 2891 1

原创 js实现放大镜效果

本片博客的技术栈涉及布局中的offsetxx相关的操作和子绝父相的小技巧使用，以及要想使用top/left必须使用定位等思想。代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <..

2018-08-12 13:29:49 3637

原创鼠标跟随效果的实现

本篇博客涉及的技术栈包括事件对象、缓动学公式的应用相对比较简单代码如下<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title>

2018-08-12 10:51:18 964

原创仿网易轮播图（html+css+javascript）

本篇博客还是有点难度的，前前后后加起来花了一天时间才算搞明白。涉及的技术栈包括定时器、动画原理、排他思想、json解析、浏览器兼容性问题、根据图片动态显示张数等。关键点是点击上一张和下一张以及特定张时的逻辑实现。html代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &...

2018-08-11 12:16:13 1252

原创原生js实现手风琴效果

本篇博客的技术栈涉及函数封装、获取元素属性、动画原理、json解析、排他思想等。也是一篇不错的综合案例。html代码如下：<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type

2018-08-09 20:22:11 2945 1

原创原生js仿360开机小助手

本篇博客的技术点关键在于解析json数组、动画原理、函数的封装思想和获取元素的属性等方面也是比较综合的一个案例了。学习一下对于知识点的整合很有必要。下面贴出html的相关代码如下。注释非常详细，相信机智的你一眼就能看懂。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> &l...

2018-08-09 19:23:35 788 2

车联网开发的博客