Hover动画之图标动画

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-24 21:11:04.0
紧接着上一篇文章, 继续我们的hover动画之路, 这篇文章主要是使用一个图标的hover动画效果.HTML代码结构如下代码HTML    <div class="hover">        <span class="icon">☆</span>        <span class="text">图标动画</span>    </div>然后

hover动画之 斜角背景

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-23 10:43:52.0
hover动画-斜角背景, 给人一种拨开云雾见青天的感觉. 哈哈, 这形容词不知道用得对不对. 好了, 我们先来分析一下这个知识要点.这个动画主要的知识点:position的定位, 层次transforms的动画伪元素的使用, 伪类hover的使用其实重点就在于这三个方面的知识.那我们首先来看看HTML结构代码代码HTML <div class="hover"> 倾斜背景 </div>代码似乎同上一篇文章类似, 是的. 上一篇文章用的是A标签, 这里我们用的是DIV. 其实没有什么不同的, 就是标签名称不一样.

hover动画之背景椭圆缩放

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-22 10:46:29.0
这两天我们来试试写一些鼠标hover后的动画效果的编写, hover这种状态在很多地方都会出现, 一般网站, 或者H5页面可能都会有意的出现.今天来试一个简单的效果, 背景椭圆的缩放.首先将HTML代码结构编写好代码名称 <a href=""> hover </a>这个代码非常简单, 下面还得利用伪元素:after来进行动画处理. border-radius的设置就会将伪元素设置为一个椭圆. left, top, right, bottom都为0, 则是设置其宽度, 高度和父元素相同.代码名称 a {

Javascript实现倒计时功能

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-21 22:06:57.0
接着上一篇文章, 我们这次来实现一个倒计时功能. 倒计时功能, 用在项目的发布时间, 或者某个活动做倒计时等等的突出时间功能的方面. 界面代码结构,先要完成好. 这个界面我就不做那么美观了,凑合就行(O(∩_∩)O哈哈~).代码名称<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>倒计时实现</title>    <style>  &n

Javascript计时器的实现

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-20 22:42:09.0
计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面代码名称<label>计时:</label>  <input type="text" name="" id="timer&q

Javascript实现弹出框

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-19 08:57:50.0
弹出框在页面中是不可缺少的一部分. 我们今天来实现简单的弹出框效果.首先我们来分析弹出框的部件.简单弹出框分为头,内容,尾部. 头部中有标题和关闭按钮,内容就可以图文,媒体,iframe,flash等等,尾部就是按钮(确认,取消等等),这个例子尾部我就不加入按钮了,这个例子主要是实现弹出框的核心部分.<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     

Javascript实现图片轮播:(三)前后按钮控制的实现!

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-18 08:49:30.0
图片轮播在上一篇文章中实现了图片序列的效果,其实已经算是一个完整的效果了.但是有时候,我们可以发现很多的图片轮播有前后按钮的控制.在这篇文章里我们就完成图片轮播的第三步.HTML,CSS代码不做任何的修改.如果需要的话,可以给前后按钮一个Hover状态的效果.这样会更友好.好了,我们继续下面的分析.控制前后按钮我们首先值得要考虑的就是图片索引位置的改变,我们代码里面使用的是index,所以需要对index--或者index++.接着就得对index做越界的考虑. 做好判断后,其他的容易了,改变景色(UL)的显示位置,然后改变图片序列的状态.最好还要考虑清除setInterval,否则就会出现跳

Javascript实现图片轮播:(二)图片序列节点的控制实现!

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-17 09:25:27.0
紧接着上一篇文章,这里我们实现图片序列节点的跳转实现.在图片跳转的同时,我们一般需要知道他跳转的是哪个位置,这里就是图片序列节点需要跟图片一同显示.下面我们就直接作分析.在HTML,CSS代码结构中我们需要加入一个图片序列是否选中的样式#slider ol li a.active{     background-color: #ffffff;     color: #ff0000; }JS代码中我们需要对上一篇文章的JS代码做一些改变和增加,这里首先要改变的是

Javascript实现图片轮播:(一)让图片跳动起来!

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-16 11:42:53.0
图片轮播效果,在现在的网站的首页,差不多是必备的效果显示. 所以我从三个方面来讲解这一效果的简单实现.图片跳动起来图片序列控制的实现前后按钮控制的实现这篇文章来看图片按照间隔时间进行切换.我们先把结构代码完成,这个我就不做详细的讲解了.看效果代码如下:<!DOCTYPE html> <html> <head>     <meta charset="UTF-8">     <title></title&g

JavaScript实例:开关灯泡

吴统威 on 编程语言 前端编程 HTML/CSS/JAVASCRIPT | 2016-02-14 10:43:05.0
最近我们来写一些JS的实例,来辅助学习JS.这次实现的是简单的灯泡开关效果.这个实例主要是利用两张图片来完成.考虑到的知识点有点击事件和标签元素属性的操作.首先我们默认的灯泡是一个关闭的状态<img src="http://www.w3school.com.cn/i/eg_bulboff.gif" />文章的图片来源w3school中文教程网.我们先从思路来讲,然后在上代码.点击事件应用在这个图片标签上,默认的时候我们的图片标签的灯泡是关闭状态.那这时候我们应该给与这个图片标签一个状态属性(我们例子中使用的是state属性,这个是自定义的属性)然后就是对stat