纯 JavaScript 带小图导航的焦点图、图片切换效果

作为前端,我们以开发页面时,难免会用到一些切换效果,比如常用的焦点图(Banner),但在这里我要跟大家分享的是一个带小图导航的图片切换效果,一个不基于其它库(如:jQuery)的实现方法。我们还是先来看看这个效果的过截图吧,一个是垂直方向的,一个是水平方向的,我想就这两个基本的效果都可以解决你90%关于带小图导航的图片切换了问题了。 由于代码有点多,就不在这里贴出来了,你可以点击对应效果...

2016
08-29

MongoDB 在 window 下安装及配置方法

MongoDB 下载 第一步肯定是要下载 MongoDB,你可以到官网上下载,官方下载网址为: https://www.mongodb.com/download-center#community 择window版本,下载msi版本的MongoDB,下载完之后直接安装就可以了,这里有一点值得注意的是,MongoDB 的安装路径最好不要太深,因为后面会得经常切换到MongoDB 的 bin 目录(以下所执行的命令行都是在bin目录下执行的)。 MongoDB 安装、配置 把MongoDB安装到D:\...

2016
08-26

学习计划:centos7 web服务器配置(完)

前言 由于自己的虚拟空间也快到期了,并且自己有两个站(云库网、朝夕熊博客),如果不用云主机的话,那么真的吃不消,所以为了在到期之前换上云主机,于是就有了这个学习计划,centos7 web服务器配置。都说站长都是全能的,什么都得自己来,现在我信了。下面我就把这段时间以来学习web服务器配置的心得分享出来,并把一整套学习计划记录清单都列出。 学习心得 学习东西不是一天打鱼两天晒网,学习是一...

2016
08-24

Centos 7 phpMyAdmin 服务安装及配置

前言 现在跟大家来讲讲最常用的数据库管理工具 phpMyAdmin 。这个工具我就不用多说了,对于不怎么了解数据命令的朋友来说用它最适合不过了,它把一行行让人记不住的命令变成了界面操作,就像操作window系统一样简单。好了话不多说,我们开始吧。 phpMyAmin 下载、安装 下载 我们打开  phpMyAdmin 官网找到下载页面,这里我给大家下链接  http://www.phpmyadmin.net/downloads/ 在页面里你可以看到不...

2016
08-23

Node.js + Express.js 环境配置

前言 Node.js 如今越来越火,不管你走到哪里,跟Node.js 打交道的机会还是很多的,例如:当你想换工作的时候,在各大求职网站上东找找西找找的时候,你肯定会看到 会Node.js 或者 精通 Node.js。一直都觉得 Node.js 好高大尚,所以也不敢撞他,但不管我如何对它,都不会阻止它的流行及在前端中的地位,所以今天我还是硬着头皮开始了Node.js 之旅。我这次是在Window 系统下安装测试的,但是万变不离其踪,...

2016
08-14

常用的 JavaScript 函数封装

获取兄弟节点 所有兄弟节点(不含自己) // 获取所有兄弟节点(不包含自己) function yk_sibling( elem ) { var ar = []; var n = elem.parentNode.firstChild; for ( ; n; n = n.nextSibling ) { if ( n.nodeType === 1 && n !== elem) { ar.push( n ); } } return ar; } 所有节点(含自己) // 获取所有兄弟节点(包含自己) functio...

2016
08-11

wordpress 后台编辑器 TinyMCE 自定义按钮

前言 这是一篇很不错的文章,你可以从这篇文章里得到一个提高效率的方法,一个关于如何为 wordpress 后台自带的编辑器 tinymce 添加自定义按钮的方法,纯粹干货,行过路过,真的不要错过。 在写这篇文章的时候,我也把这个自主开发的,云库网制造的说它不是 wordpress 插件,但它又确确实实有插件的功能的两堆代码。不多说,是马是驴,拉出来溜溜就知道。代码如下,分两步。 代码案例 修改functions.p...

2016
08-06

纯 JavaScript 固定导航效果(fixed)

前言 现在不少网站页面本身内容都会比较多,从而导致页面过长,当用户浏览页面时,如果要用户反手动拉滚动条回到顶部找导航那多少会有点不方便,或者说这样用户体验不怎么好。其实他个问题有很多种解决方案,如:给页面添加一个返回顶部的按钮,这样用户就可以快速地返回到顶部。那很多时候我们就是导航固定在页面的顶部,毕竟这个对于提高用户体验还是有帮助的。下面我们就来看看如何通过纯 JavaScript ...

2016
08-04

纯 JavaScript 实现单条新闻滚动效果

前言 单条新闻滚动效果相信你已经见过不少了,这个效果在很多导航页面中或多或少都会出现。最近我们360导航中就看到了这个效果,可当我研究下这是怎么实现的时候,竟然有意外的收获,这个页面里用到的方法是我从来都没有想过的,不过我也不知道我的猜测对不对,光从页面中的 HTML 结构及运动效果我大概地想到了这是如何实现的,但到底不是不真的像我想的那样,那就不一定了。好了费话不多说,我们还是来...

2016
08-01

纯 JavaScript 实现 tab 切换效果

作为前端开发人员,一些效果你肯定会常常用到,在这里我给大家分享一个tab 切换效果,这个效果我已经封闭好了,如果你想用直接把源代码复制到你的项目中就可以了,下一步你只需要在需要用到这个效果的页面调用这个函数就可以了,不管页面中有多少个Tab 切换,你都可以轻而易举地完成。下面我就直接把源代码贴出来。 移动端 Tab 切换 JavaScript 代码 function tab(tabWrap,tabMenu,tabLink,tabContent,...

2016
07-30

纯 JavaScript 生成随机数方法

前言 用到随机数的地方还是挺多的,如有些网站为了吸引用户就会对网站文章的点赞数,评论数,阅读数等等作出一个可观的数字,让别人看起来觉得不点都不舒服,虽然把随机数用到这里有点不好,但这种现象确确实实存在于我们的生活中。随机数除了这个用途外,其实还有很多方面会用到它。下面我们变来了解下如何通过 JavaScript 生成一个随机数。 相关方法 在说随机数之前我们先来了解JavaScript 中的几个...

2016
07-27

Z-Blog常用标签大全(精华版)

前言 博客系统的历史可以说很悠久了,还记得我刚开了自己的博客的时候,有朋友跟我说,现在都什么年代了,还玩博客。他说得也不无道理,但很多东西有没有价值,用不用,关键还是看自己,我觉得博客还是个好东西,我可以把工作中的经验都记录下来,把生活中的快乐,想法或者些许感悟都记录下来,以便日后装B之用。扯远了,回到正题,本文要介绍的是 Z-Blog 常用标签,相对来说我还是比较喜欢 Z-Blog 博客...

2016
07-21

织梦常用标签大全(精华版)

前言 之前跟大家分享过了 wordpress 常用标签,现在跟大家说说织梦常用的标签,为什么说是常用的,因为本文是基于一个实践网站(云库网)所用到的标签的基础上添砖加瓦的。如果你是一个初学者,那么这篇文章真的非常适合你,如果你对于常用的织梦标签已经比较熟悉了,那么也可以把它叫藏起来,毕竟好记性不如烂毛头。 为了让你看得更加清晰明了,有些直接把完整的 HTML 结构也贴出来了。这个对于理解如...

2016
07-19

Centos 7 nginx 服务安装及配置

前言 nginx 跟 Apache 的作用差不多,都是提供 WEB 服务,但 nginx 相对于 Apache 来说,在性能上有更好的体现,而 Apache 有稳定性方面会比 nginx 好一些,所以要用哪一个,自己喜欢就好。下面就给大家分享下 nginx 的安装及配置方法。如果你觉得下面记录的东西有点乱,你可以直接看本文后面的总结也是可以的,更省时,更省心。我在这里。 小插曲 如果你直接执行命令 # yum install nginx 你会得到这...

2016
07-16

Centos 7 Apache,php,MariaDB,FTP的卸载方法

前言 作为站长或者前端开发者,云服务器对于你来说应该不陌生了。我相信你还经常跟Centos 7 Apache,php,MariaDB,FTP等这些极常用的服务打了不少交道。包括这些服务的安装,配置和卸载。本文要分享的是如何卸载这些服务。下面我们就一步一个脚印来了解这些服务的卸载方法。 卸载 Apache 卸载 我们的第一个例子就先拿 Apache 来开刀。不管你信不信现在我就要把它从Centos里卸载掉,不要问为什么,你...

2016
07-15

Centos 7 php 环境安装及配置

前言 在这篇文章之前,我已经分享过三篇有关于在 centos 7下配置 web服务器环境的文章了,如果你有什么不懂可以前往阅读在这里为您开个传送门,速度有点快,请系好您的安全带《Centos 7 FTP(vsftp)服务安装及配置》、《Centos 7 Apache 服务安装及配置》、《Centos 7 MariaDB 数据库服务安装及配置》。加上这一篇文章就刚好凑够 WEB 服务器环境配置的四大天王了。php 的安装及配置相对于前面三个服务的...

2016
07-13

Centos 7 MariaDB 数据库服务安装及配置

小插曲 一开始在网上看到装 mysql 教程,于是就跟着做了,可执行了第一行命令就把错了 # yum install mysql-server 回车后显示如下错误提示 Loaded plugins: fastestmirror base | 3.6 kB 00:00 extras | 3.4 kB 00:00 rpmforge | 1.9 kB 00:00 updates | 3.4 kB 00:00 updates/7/x86_64/primary_db | 5.7 MB 00:00 Loading mirror speeds from cached hostfile * base: mirrors.yun-idc.com * extras: m...

2016
07-13

Centos 7 Apache 服务安装及配置

前言 在上一篇文章中,我已经对 Centos 7 FTP(vsftp)服务安装及配置进行了详细的介绍,如果你对于FTP有什么不懂的可以去看看这篇文章。在这里我就不重复了。本文给大家介绍下在Centos 7 下如何安装及配置 Apache,Apache的安装及配置比FTP的安装及配置更为简单些。只需要几行代码就可以了。下面我们马上开始吧! Apache 安装 Apache的安装非常地简单,你只需要输入一行代码回车就可以了 # yum instal...

2016
07-11

Centos 7 FTP(vsftp)服务安装及配置

作为前端工程师,要想在中国有一席之地,你不得不作出不可能的努力,把自己变成一个全能的人。你不仅仅要会 HTML、CSS、JavaScript、PhotoShop、Node.js、Angular.js、以及各种前端流行框架 如Boostrap、Kube、UIKIT、amazeui 等等,你还得会配置服务器Linux、Windows。所以下面我们变来聊聊的服务器的配置,在本文中我们要介绍的是在 Centos 7 下安装及配置 FTP 服务。 提示FTP服务的软件有很多,在这里我...

2016
07-10

meta viewport 你真的了解吗?

前言 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no"> 上面是一行我几乎每天都用到的代码,它给我们带来的好处是非常明显的,一眼就可以看到的,除了这一点,我对它就一无所知了,我天真地以为只要认识它能给我实现什么样的效果就足够了,可事实却告诉我:“你这小子也太天真了,你千万别被网上一大堆的搜索结果骗了,...

2016
07-09

设备像素,设备独立像素,CSS像素

前言 这两个属性说难不难,说容易又不易容。但如果你弄明白了这个,你就明白了一些东西,一些你常常用但却不知道为什么的代码。下面我们还是先从它们各自的定义开始说起,其实虽然标题里是三个名词,但我们接下来只聊两个就可以了,为什么?看完你就知道了。 基本定义 设备像素:设备像素又称物理像素(physical pixel),设备能控制显示的最小单位,我们可以把这些像素看作成显示器上一个个的点。 CSS...

2016
07-02

wordpress 常用标签大全(精华版)

title标题 <title><?php if ( is_home() ) {bloginfo('name');} elseif ( is_category() ) {single_cat_title(); echo " - "; bloginfo('name');} elseif (is_single() || is_page() ) {single_post_title(); echo " - "; bloginfo('name');} elseif (is_search() ) {single_post_title(); echo " - "; bloginfo('name');} elseif (is_search() ) {echo "搜索结果"; echo " - "; bloginfo('...

2016
06-27

document.querySelector()

前言 在平时的前端开发中,我们经常需要写一些小效果,比如TAB切换、图片轮播等等,不管是写什么 JavaScript 效果,你肯定离不开获取元素作为对象,然后对这个对象进行一系列的操作。而获取元素时,我们可以使用jQuery 库,也可以使用 JavaScript 为我们提供的原生的并且比较常用的方法getelementbyid()、getelementbyTagName()、getElementsByClassName()。但是本文要跟大家分享是另一种方法也是 JavaSc...

2016
06-22

纯 JavaScript 实现页面返回顶部效果

前言 对于一个内容有点多的页面来说,当你滚动页面底部浏览了一通后,突然想回到页面顶部,而如果页面没有类似于返回顶部功能的按钮,那么你也只能乖乖地滚动鼠标滚轮或者拉动浏览器滚动条来实现回到页面,很多时候你会觉得这个很费劲,特别是在手机端,一个屏幕本来就小得可怜的手机,如果内容非常,那么手动滚动回到页面顶部就如同噩梦一般。所以下面就给大家分享一个纯 JavaScript 实现的页面返回顶部...

2016
06-21

AngularJS

简单介绍 HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. 译:不可否认 HTML 是一个很棒的静态文档语言,但当我们用它来做 webAPP 应用时,它就...

2016
06-16

html5 page visibility api 用法

前言 如今浏览器的多tab 窗口设计已经很普遍,可以说绝大多数的浏览器都已经默认地使用这种方法来打开网页进而提高用户体验。但因此问题也随之而来-资源的浪费,性能的下降。 在我们平时浏览页面时候,都没不经意地打开很多页面。就拿我自己来说,很多时候可能会同时打开7-8面而,由于工作需要甚至同时打开十几二十个页面也是常有的事。即使页面的数量不能少,那么怎么才能让用户使用了浏览器默认的tab窗...

2016
06-15

JavaScript call() 方法 和 apply() 方法详解

前言 最近在研究canvas时无意中遇到了call方法,于是乎一场不可避免的为期两天的厮杀就这样开始了。call() 听起来简单,但要是让你在别人的项目中遇到了,我估计你还是不怎么明白,别人为什么这样写。就拿我自己来说,一开始在网上查了了,看到一个解释是说这个方法是用来改变this 的指向的。如果单单看到这个,我想我早就应该明白了,call() 方法说真的其实很简单,但要把它真真正正的搞明白了,还是需...

2016
06-14

CSS3 clip-path 用法详解

前言 css3 的出现无疑是我们这些作为前端人的福音。因为它的出现让我们的在前端的世界变得更炫,多美,更多姿!接下来要给大家介绍的这个属性clip-path 就是一个可以让我们的页面更多姿多彩的 css3 属性。 clip-path 作用 正如前言中所说到的,可以让我们的页面变得多姿多彩,何为多姿,何为多彩呢? 多姿:可以让一个元素显示出不同的形式(如:正方形,圆形,长方形,椭员形,多边形……)...

2016
06-09

CSS 中改变横纵方向 writing-mode 属性

前言 Writing-mode属性,我从事前端这么久也还没看到过,更不用说上过了,是近在网上看到一篇关于 writing-mode属性的介绍,觉得不错,所以在这里也给大家整理分享出来。 其实这个属性IE5.5 版本的浏览器就已经支持了,但这个属性还是没流行起来,或者是说极少看到它的身影,因为在很长的一段时间里 FireFox,Chrome 浏览器都不支持wirting-mode属性。但随着前端技术的发展,各大主流浏览器也慢慢地开始...

2016
06-07

wordpress 中强大的文章调用函数 query posts 用法

前言 刚用上 wordpress 不久,就觉得 wordpress 这个博客系统棒棒哒,一开始还用不惯,但用了一会后,发现wordpress 还真不错。由于用上了新的博客系统,所以网站模板也必需重新做,于是就有了这篇文章下面就给大家分享下这个强大的wordpress函数 query_posts()。 基本用法 <?php //定义要显示的文章范围查询 query_posts(); //文章循环 if ( have_posts() ) : while ( have_posts() ) : the_po...

2016
06-05