明凯博客

关注网站技术,一个特立独行的程序员

前端设计

用纯CSS打造旋转的圆形图片的方法

TIM截图20170922153814

上次看到一个博客的LOGO图片很好看,一个旋转的圆形人物图片,但是我看他用了大量的JS代码来渲染这个效果。 其实这种方式纯CSS3是完全可以实现,我们只需要考虑清楚我们的思路。 1、圆形图片 我们这里使用了一张哈弗H2的图片。 然后把图片写成圆形。 1 2 3 height: 3 […]

, ,

HTML5中Canvas绘图各种基本图形的方法

2012112616464676

canvas是html5的一部分,当然他们说的H5也并不是html5的意思,只是表示在手机浏览器中,更侠义的是在微信浏览器中打开的酷炫的网页。 曾几何时,我也觉得canvas真的酷爆了,各种什么烟花、酷炫的动画效果、canvas游戏等,都燃烧着我学习的热情。 后来通过学习,多看书 […]

, ,

IE下radio/checkbox的change事件失效的解决办法

今天写一个全选功能,在chrome和firefox下测试都正常实现效果,到了ie下死活没效果。 一番周折,测试发现在ie中勾选了以后还要点击其他位置才会触发onchange事件。 这种问题呢,有两种方式可以解决,用onclick事件代替或者用onpropertychange事件代 […]

, ,

关于setTimeout/setInterval的第三个参数

setTimeout/setInterval,这两个函数相信前端开发同学都很熟悉。 它们在非IE(6-9)浏览器中还可以如下使用 1 2 3 setTimeout(function(obj){ alert(obj.a); &#12 […]

,

span之间的空隙的原因和解决办法

span之间的空隙,到底是什么?display:inline-block的元素虽然能够处于同一行,但是很变态的是它们之间出现了空格,如何处理? (例如在浮动元素居中当中,我们必须使用display:inline-block) 1 2 3 4 5 6 7 8 9 10 11 12 […]

,

推荐一款焦点图jQuery插件 SlidesJs

js

给大家推荐一款比较好用的 Jquery Slide 插件 slidesjs,本人一直在使用的哦。 这个插件支持两种slide效果,一个是滑动,还有一个是渐隐渐出,而且它还支持自适应屏幕 自动播放,播放暂停, callback等,功能还是比较齐全,大家可以在此基础上扩展很多效果。 […]

, ,

JavaScript中escape()、encodeURI()、encodeURIComponent()的区别

JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decodeURIComponent 。 下面简单介绍一下它们的区别 1 escape() […]

, ,

重置form表单时遇到reset is not a function脚本出错

今天用js来重置表单的时候,遇到了一个BUG,正常的表单HTML结构如下所示: 1 2 3 4 5 6 <form action="" method="post" id="LoginForm"> <in […]

, ,

在线代码编辑器 CodeMirror 的详细配置说明

code

CodeMirror是一款在线的支持语法高亮的代码编辑器。官网: http://codemirror.net/ 下载后,解压开得到的文件夹中,lib下是放的是核心库和核心css,mode下放的是各种支持语言的语法定义,theme目录下是支持的主题样式。一般在开发中,添加lib下的 […]

, ,

纯CSS3实现手风琴风格菜单的具体步骤

sfq

有朋友问我,我的demo里面的手风琴效果怎么做出来,看起来很漂亮,其实这个手风琴效果没用一点js,全部用css3来实现的。 如何使用纯CSS3创建手风琴风格菜单呢,菜单主要通过使用:target伪类来实现,教程中我们主要通过使用伪类:before和:target来定义样式,使用: […]

, ,

下一页