JavaScript和CSS3色彩对比度可视化实现

如果你使用过类似PS的图形处理软件,应该不会对色彩对比度感到陌生,对比度指的是一幅图像中明暗区域最亮的白和最暗的黑之间不同亮度层级的测量。今天我们用JavaScript和CSS3来实现色彩对比度。首先载入两幅相同的图片,然后通过一个水平滑杆来改变其中一幅图片的色彩对比度。这个应用的特点是可以改变图片初始的色彩。类似的jQuery图片对比应用大家还可以看看这款jQuery原始图片对比插件JavaScript图片拖动对比 实现图片差异定位

javascript-css3-color-contrast

在线演示源码下载

SVG螺旋式扩散的Loading加载动画

SVG在绘制网页矢量图方面非常强大,甚至是一些矢量动画也是相当不错。之前我们分享过一些比较实用的SVG Loading动画,比如这个HTML5 SVG Loading 动画加载特效和这款富有创意的CSS3/SVG沙漏式Loading加载动画。这次我们要给大家分享的是另外一款基于SVG和JavaScript的螺旋式扩散的Loading加载动画,这个Loading动画非常适合页面加载时的等待动画。

svg-spiral-loading

在线演示源码下载

CSS3带小图标的手风琴下拉菜单

对于网页菜单来说,我们用得最多的虽然还是横向主菜单,但是在系统后台中,手风琴下拉菜单还是用得十分广泛的。之前我们也介绍过一些使用的jQuery和CSS3垂直手风琴菜单,比如这款炫酷实用的CSS3 3D垂直手风琴菜单和这款jQuery带小图标手风琴垂直菜单。这次要分享的也是一款基于CSS和JavaScript的手风琴菜单,同时这款菜单左侧也同样带有漂亮的小图标。

css3-accordion-menu-icon

在线演示源码下载

5组炫酷的纯CSS3 Loading加载动画

之前我们为大家分享过很多基于纯CSS3的Loading加载动画,你可以在10组蓝色风格的纯CSS3 Loading动画图标这篇文章中找到许多实用的CSS3 Loading动画。这次我们再给大家分享5组炫酷的纯CSS3 Loading加载动画,这些Loading动画都非常快速,是一款快进版的CSS3 Loading动画。

5-cool-css3-loading-animation

在线演示源码下载

jQuery实现的Mac样式消息提示框 可自动消失

在平时的前端开发中,我们经常需要通过一个提示框提示用户正在进行什么操作,或者已经完成什么操作。然而我们用的最多的是使用alert方法弹出浏览器默认的提示框,并且也是在浏览器中居中显示。这次我们分享给大家一款Mac样式的jQuery消息提示框插件,这款插件可以让消息框在不同的位置显示,而且为不同的消息级别分别定制了不同的外观,消息提示框会在一定的时间内淡出消失。

jquery-mac-message-tips

在线演示源码下载

纯CSS3抽屉打开关闭动画

这是一款基于纯CSS3的抽屉打开关闭动画,抽屉一共有3层,每一层都标识一个名称,只有打开抽屉才可以看到。当你用鼠标点击某一个抽屉时,该抽屉便会打开,再点击一次便会关闭。当然也许这款动画对你的实际应用并不会有太大帮助,但是它可以让你学习到很多关于CSS3的动画特性。

pure-css3-drawer-animation

在线演示源码下载

纯CSS3实现吸附和阴影效果的垂直菜单导航

今天我们要给大家带来一款很别致的纯CSS3垂直菜单导航,它的特点是菜单项带有3D立体阴影的效果,同时当鼠标滑过菜单项时,菜单项便会吸附在页面上,移开鼠标菜单项便又会离开页面呈现3D阴影的视觉效果。这款菜单基于纯CSS3实现,因此使用非常方便。

css3-attach-shadow-menu

在线演示源码下载

jQuery超酷的层叠照片墙 可放大切换预览图片

有一段时间没有更新jQuery插件了,今天开始我们将继续为大家分享一些实用的jQuery插件HTML5应用。今天带来的是一款基于jQuery的层叠样式照片墙,该插件允许一些不同形状的图片层叠无序的摆放在照片墙上,并且点击图片缩略图可以放大图片,并且支持上一张和下一张的图片切换。

jquery-image-wall

在线演示源码下载

基于Vue.js的冒泡排序模拟动画

vue.js是一款轻量级的渐进式JavaScript框架,之前我们也分享过一些基于vue.js的应用,例如这款基于Vue.js的Tooltip用户通知弹出框基于Vue.js的超实用科学型计算器。这次给大家带来了一款基于Vue.js的有趣动画,它主要模拟了冒泡排序的过程,冒泡排序大家应该非常熟悉,这次用vue.js来直观展现冒泡排序的全过程,还是非常富有创意的。

vuejs-bubble-sort-animation

在线演示源码下载

基于Echarts的HTML5 Canvas中国地图

之前我们分享过几个基于HTML5和SVG的地图应用,例如这款HTML5世界地图利用了SVG的path特性,又比如这款jQuery矢量SVG地图插件JVectorMap同样通过SVG和jQuery实现。这次我们要分享一款基于Echarts的中国地图,底层技术是HTML5 Canvas技术,正是利用了Canvas中绘制图形的便利性,这款中国地图应用可以为每一个省添加描述信息。

echarts-html5-canvas-map

在线演示源码下载