专注于web前端开发以及强大的用户体验设计!

Html5(css3)的瀑布流布局的实现

css-column

有一段时间没有写文章了,之前的几篇瀑布流布局的文章得到一些朋友的关注。应该是受到淘宝UED的这篇(瀑布流布局浅析)博文的启发,发现好多朋友一直在寻找html5(css3)实现瀑布流布局的方法,故有此下文。

在开始这篇文字之前我先指出,做学问要严谨,比较准确的说,此文讲的并不是html5来实现的瀑布流效果,并且单纯的html也实现不了样式的表现,这里指的是css3的实现。而为什么我还要写成html5(css3)这样的标题呢,当然是引入流量了。你懂得!

css3中增加了一个新的属性:column,来实现等高的列的布局效果。该属性有column-width宽度,column-count数量等[......]

继续阅读>>

作者:痞子|时间:|分类目录:html+css,html5,css3教程|Tag标签: |阅读(414)
12 条评论

jquery实现无限滚动瀑布流实现原理

jquery实现无限滚动瀑布流原理
瀑布流的用户体验真的有那么强大吗?

现在类似于pinterest这类的表现效果很火,其实我比较中意的是他的布局效果,而不是那种瀑布流。

虽然我不是特别喜欢这种瀑布流的表现样式,但是还是写了几篇关于无限滚动瀑布流效果的文章,Infinite scroll+Masonry=无限滚动瀑布流infinite-scroll-jquery滚动条(下拉)加载数据插件之类的文章。可能是我表达描述不是很详细清楚,所以好多朋友看了不是很清楚,并发信给我求解释。所以有了今天这篇文章。

其实早在:十几款jquery无限滚动插件这篇文章中我就提到过这种效果的实现原理。主要是判断滚动条滚动的位[......]

继续阅读>>

作者:痞子|时间:|分类目录:html+css,html5,css3教程|Tag标签: |阅读(1,101)
25 条评论

简单js+css实现模拟自定义select样式

简单js加css模拟select样式

对于select这个标签在各个浏览器下的显示样式都不相同,这就给设计师和前端开发者带来了极大的不方便。所以做出一个统一的样式的select样式是最直接的需求。

那么如何实现不同的浏览器下,有着相同样式的select呢?

下面看下本人的方法:

  • 该方法主要用到的是js+css,代码量小,无插件
  • 自定义select的样式
  • 兼容性方面嘛,ie6可以无视了。

实现原理:(js+css模拟select样式)

将select的标签元素,设置opacity:0隐藏掉,并给其设置z-index将其移动到最上层。这样在点击外围box的时候,实际上是点击了select。[......]

继续阅读>>

作者:痞子|时间:|分类目录:html+css,html5,css3教程|Tag标签: |阅读(387)
4 条评论

JS如何实现响应滚轮(同时设置滚动条无效)

js 响应滚轮效果
翻滚吧,javascript

我这个人记录东西有个习惯,就是想到的东西就尽量延伸。能想到的地方尽量都写出来。所以这篇文章还是围绕着js响应鼠标滚动来论述。在之前的一篇文章(JS(如何判断)鼠标滚轮事件解析)中,我已经说清楚了对于各个浏览器是如何来用js进行判断鼠标滚轮是向上滚动还是向下滚动。(主要是获取反馈回来的e.wheelDelta或者e.detail,不明白的看上文)

今天这里就写了一个小例子来进行小小的实战的一下。当然这个小例子有个不同的地方,就是当鼠标移动到固定的box(div盒子)上并滚动滚轮的时候,浏览器默认的滚动条会失效(当然不是什么bug,是js使得默认的[......]

继续阅读>>

作者:痞子|时间:|分类目录:js,javascript,jquery教程|Tag标签: |阅读(234)
一条评论

JS(如何判断)鼠标滚轮事件解析

onmousewheel js鼠标滚轮

继续水文一篇,js如何判断滚轮的上下滚动。

我们都见到过这些效果,用鼠标滚轮实现某个表单内的数字增加减少操作,或者滚轮控制某个按钮的左右,上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。
不同浏览器不同的事件
首先,不同的浏览器有不同的滚轮事件。主要是有两种,onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持),关于这两个事件这里不做详述,想要了解的朋友请移步:鼠标滚轮(mousewheel)和DOMMouseScroll事件

另外在操作的过程中需要添加事[......]

继续阅读>>

作者:痞子|时间:|分类目录:js,javascript,jquery教程|Tag标签: |阅读(201)
没有评论

添加Mime type类型,支持音/视频在线播放

在之前的一篇文章:js结合audio制作声音菜单效果(有插件)中,以及本站其他的关于audio标签的文章中用到了ogg格式的文件。并提供了几个在线运行的示例,这几个示例在google浏览器中运行良好。可是移植到firefox浏览器中就不会有声音了。之前一直没有发现这个问题,直到乌贼朋友留言提醒我:无法在线运行时才发现此问题。

为什么会出现此问题呢,其实就是对于ogg(音频)类型文件定义的mime type不正确。浏览器无法正确解析该文件类型,所以导致firefox将此类型文件当做一般的无法直接解析的文件来处理,那么就会出现打开后直接下载的情况。而至于google为什么可以直接解析我就不得[......]

继续阅读>>

作者:痞子|时间:|分类目录:html+css,html5,css3教程|Tag标签: |阅读(171)
3 条评论

js结合audio制作声音菜单效果(有插件)

js结合audio制作声音菜单效果
js结合audio制作声音菜单效果

audio是html5中新增加的标签,现在好多浏览器都支持html5了。所以制作有声音网页也比较简单了。尤其是在一些网页游戏中的应用非常强大。

本站之前的文章中已经介绍过Html5 audio标签(属性)的使用详解Javascript控制html5 Audio标签,这两篇文章都比较详细的介绍了audio标签的使用。这里就不多说了

关于js或者jquery操作audio的方法以及插件有很多了,最后简单说几个。另外整理了一些关于audio的播放器,以及api资料等。

首先是一个js结合audio制作声音菜单的例子。

[......]

继续阅读>>

作者:痞子|时间:|分类目录:js,javascript,jquery教程|Tag标签: |阅读(262)
5 条评论

PiSlider-简单的jquery图片左右循环滚动插件

jquery左右循环滚动插件-PiSlider
jquery左右循环滚动插件-PiSlider

之前的项目中用到的一个效果,比较简单。正好找到两个不错的素材图片,所以将效果封装成插件共享出来,代码量较少。平滑滚动效果,可以设置是否自动滚动。兼容大部分浏览器

此插件的名字叫PiSlider(无关紧要的东西)

演示地址:http://www.niumowang.org/demo/pislider/

就是一个jquery的插件,也没有什么特别说明的地方。

使用方法:

$(“#scroll”).pislider(); //自行设置选择器。

高级用法:

$(“#scroll”).pislider({[......]

继续阅读>>

作者:痞子|时间:|分类目录:js,javascript,jquery教程|Tag标签: |阅读(343)
2 条评论

如何使用规范的CSS清除浮动方法

关于清除浮动的方法,随便找一个懂得css的人都应该能写出一两个来。当然今天这里的谈的不是技术文,而是水文一篇。说些我自己的见地。
清除浮动方法一:(clear:both;)
给浮动元素后面添加div 或者 br 标签,并制定css为 clear:both;

示例如下:可以编辑运行代码,删除clear标签查看对比效果

<style>
*{margin:0;padding:0;color:#fff;}
ul{background:red;list-style:none;}
ul li{float:left; background:red;margin:5px;}[......]

继续阅读>>

作者:痞子|时间:|分类目录:html+css,html5,css3教程|Tag标签: |阅读(194)
没有评论

Javascript控制html5 Audio标签

在上一篇文章:Html5 audio标签(属性)的使用详解中已经把关于audio标签的如何使用以及支持属性说清楚了。这里写篇文章记录一下:如何使用js控制html5的audio标签。
javascript动态创建audio标签
在页面中添加audio元素的方法主要是两种,一种是在html中加入audio代码,可以加入一些属性(autoplay,preload)等,这些在之前的文章已经说过了。另外一种是js动态加载进来的。代码如下:

var audio=document.creatElement(“audio”);
audio.src=”audio/source.ogg”;//路径
a[......]

继续阅读>>

作者:痞子|时间:|分类目录:html+css,html5,css3教程|Tag标签: |阅读(396)
6 条评论