- 博客(22)
- 收藏
- 关注
RSS订阅原创 导航栏二级下拉菜单的js特效
很多大型的网站的导航菜单栏会有二级菜单，那么刚开始的时候这些二级菜单是隐藏的，我们通过鼠标点击或者把鼠标放在上面就会让二级菜单显示，有些二级菜单会有一些动画效果，我们今天讲的是二级菜单从上面慢慢下滑并出来，以一个很平滑的方式出场，相比传统的直接出现更有交互性。今天这里我主要说的是一个js特效，通过鼠标放在上面，让导航栏改变颜色，并且让二级菜单从上面缓慢平滑的出现，有一个效果，这个效果的
2015-11-30 15:20:05
3357
原创 案例：弹幕表白技术
今天分享一个很炫酷的弹幕表白技术案例，主要功能是通过点击上方要白的弹幕表白图像，下面的输入框出现，并有音乐播放，我们通过在输入框里面输入内容能够在公屏上显示出来，下面我们一步一步来实现这个看似神秘的技术。实现让弹幕表白图片出现 通过img标签并对它设计样式，动画处理，让图片动起来 样式：img.gb{ position:f
2015-11-28 16:44:20
1528
2
原创 HTML5实战应用：如何让表单验证更友好
HTML5表单验证给前端人员带来了便利，但是在用户体验上存在一些缺陷，默认的提示对用户很不友好，无法准确的获取想要的信息。好在在接口设计的时候提供了setCustomValidilty方法可以自定义提示信息。这是一个好消息，但也存在一些弊端，需要让开人员做额外的一些处理才达到真正想要的目的。接下来通过以下示例来阐述方法的应用。未调用setCustomValidity()方法
2015-11-27 15:29:46
369
原创 调皮的JavaScript
JavaScript是一门有趣的语言，不仅有趣而且调皮，不同的内核的浏览器在解析的时候表现会有些差异，今天主要是抛砖引玉，和大家一起讨论一些在实际开发中比较常见但同时可能并没有过于在意的JavaScript表现。这里先做几个约定：由于JavaScript是一门解释性语言，自然没有编译过程，但在脚本执行之前会有语法检查和执行环境的构建，我们把这一过程姑且称为预处理吧。当使用var
2015-11-26 14:37:30
292
原创 DIV CSS网站布局八个小技巧
本文向大家介绍一下DIV CSS网站布局的八个小技巧，比如当边界重合时利用padding或border来避免，或者尝试避免同时对元素指定padding/border以及高度或宽度，相信本文介绍一定会让你有所收获。DIV CSS网站布局的八个小技巧1.若有疑问立即检测在出错时若能对原始代码做简单检测可以省去很多头痛问题。W3C对于XHTML与CSS都有检测工具可用，请见htt
2015-11-26 14:36:16
303
原创 html5+css3实现抽奖活动的效果
看过我博客的知道，前几天我发过一个通过form表单来实现和用户交互效果，上次是通关过table实现用户注册页面，那么今天我们也是通过table的表单效果来画出抽奖的页面，通过css3和javascript的动画效果来实现抽奖的一系列动作。 通过css3+html5把抽奖的页面画出来，再通过javascript函数让它动起来。具体代码奉上：
2015-11-24 14:10:31
1055
原创 响应式网站案例及源码
响应式网站： 响应式Web设计(Responsive Web design)的理念是：页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media query的使用等。无论用户正在使用笔记本还是iPad，我们的页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能
2015-11-23 15:18:03
1768
原创 WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。在大多数情况下，我们的需求是，无论用户用什么浏览器来查看我们的网站或者登陆我们的系统，都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前，我想把前端开发人员划分为两类：第一类是精确按照设计图开发的前端开发人员，可以说是精确到1px
2015-11-23 15:17:24
464
原创 form表单实现用户注册界面
button: 普通按钮 value=“按钮的文字” js/jquery代码 checkbox 复选框 checked=“checked”默认选中 file 上传控件 hidden 隐藏域 value=“值” 和php脚本程序交互 image 图片提交按钮 src=“图片路径”图片形态
2015-11-19 14:25:58
8373
原创 HTML5 开发者需要了解的技巧和工具汇总
HTML5现在已经成为了Web开发中的热门话题，大多数现代浏览器（Safari、Chrome，Firefox，IE10和移动设备）都支持HTML5。即使HTML5的规范还没有制定完成，但许多开发者已经将其作为Web开发项目中的主要技术。一些网站巨头，如Google、Facebook、Twitter和YouTube等，都建立在HTML5基础上。 HTML5中最令人兴奋的功能莫过于画布（can
2015-11-18 14:40:03
295
原创 css3更易操作的网页细节-box-shadow阴影
box-shadow的参数有六个：X轴偏移、Y轴偏移、阴影模糊半径、阴影扩展半径、阴影颜色、阴影类型。x-offset：X轴偏移阴影水平偏移量，其值可以是正负值，如果是正值则阴影在对象的右边，为负值则在左边。y-offset：Y轴偏移阴影上下偏移量，其值也可以为正负值，如果是正值，则阴影在对象的底部，为负值则在顶部。无标题
2015-11-18 14:39:18
327
原创 文本和字体：文本修饰
text-overfiow 规定当文本溢出包含元素时发生的事情，如果想让某个容器（div或者li......块级元素）显示一行文字，当文字内容过多时，不换行而是出现的，就可以使用该属性，想要实现这样的效果需要满足三个条件：设置容器宽度并添加overfiow属性将文字设置为不换行，white-space：nowrap设置text-overflow：elli
2015-11-17 15:14:17
331
原创 你必须知道的10个提高Canvas性能技巧
你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！一.预渲染错误代码：?123456789 var canvas
2015-11-17 09:43:45
660
原创 更易操作的网页细节—background背景
多背景图片，你可以在一个标签元素里应用多个背景图片，代码类似于css2.0版本写法，但饮引用图片之间需用“，”逗号隔开。第一个图片是定位元素最上面的背景，后面的背景依次放在它下面显示，如下：?1234567891011121314151
2015-11-14 14:45:04
630
原创 【小窍门】浏览器兼容圆角Border-radius的问题
圆角css代码：border-radius只有在以下版本的浏览器：Firefox4.0+、Google Chrome 10.0+、Opera 10.5+、IE9+支持border-radius标准语法格式，对于老版的浏览器，border-radius需要根据不同的浏览器内核添加不同的前缀，比说Mozilla内核需要加上“-moz”，而Webkit内核需要加上“-webkit”等，那么为了能兼容各大
2015-11-13 14:30:46
1026
原创 认识CSS3—更容易的网页细节border-radius属性
border-radius属性这个属性在CSS3里用来创建圆角，它的值类似于padding和margin的写法boder-radius：一个值表示四个角?1234567style>.box{ width:300px; height:100px;
2015-11-13 14:29:49
410
原创 其他类型的标签
1.figure和figcaption标签figure标签规定独立的流内容（图像、图表、照片、代码等等）figure元素的内容应该与主内容相关，但如果被删除，则不应对文档产生影响。figcaption定义figure元素的标题（caption）“figcaption”元素应该被置于“figure”元素的第一个或者最后一个元素的位置。?1
2015-11-12 14:58:55
417
原创 音频与视频标签—audio和video
controls属性唯一可选值为controls，出现controls属性并准确赋值时，音频和视频的的播放控件将会显示，控件包括：播放、暂停、定位、音量、全屏切换、字幕（如果可用）、音轨（如果可用）音频：您的浏览器不支持 视频： autoplay属性自动播放功能，出现autoplay属性时音频或视频文件就会自动播放音频：
2015-11-11 14:15:33
506
原创 HTML5之表单新功能 2.新的表单属性
placeholder属性这是一个很实用的属性，免去了JS去实现点击清除表单初始值，浏览器支持也不错，标准浏览器都能很好的支持。required/paaten属性表单验证属性，required类型时，若输入值为空，则拒绝提交，并会有一个提示，这个很有用，并且可以用于textara以及hidden/image/submit类型，pa
2015-11-10 11:51:55
392
原创 HTML5-表单新功能 1.新增控件类型
email输入类型 此类型要求输入格式正确的Email地址，否则浏览器是不允许提交的，并会有一个错误信息提示，此类型在opea中必须指定name值，否则无效。URL输入类型 上面代码展示的文本域要求输入格式正确的URL地址，开始处添加http：//日期时间相关输入类型 number输
2015-11-10 09:53:10
1843
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人