jQuery适合移动设备触摸屏的响应式幻灯片插件

EasyFader 是一款轻量级的响应式幻灯片插件,Gzip 压缩之后之后仅 1.5 KB.因为 EasyFader 是轻量级的,所以它并没有太多花哨的功能,但幻灯片的基本功能是一个都不少的,比如箭头控制.项目导航.切换间隔.切换动画持续时间.回调函数等. 查看演示

这是一款效果非常好的支持移动触摸设备的响应式模块化jQuery幻灯片插件.通过这个幻灯片插件你可以制作出漂亮和专业的幻灯片效果.它的特点有: 模块化的体系结构. 响应式设计. 支持触摸滑动. 支持CSS3过渡效果. 支持动画层. 幻灯片可以无限循环. 支持旋转木马布局. 支持全屏显示. 幻灯片带有缩略图. 支持深层链接. 图片带有懒加载模式. 支持视网膜设备. 支持淡入淡出效果. 导航按钮使用CSS生成,不使用图片,样式容易控制. 支持幻灯片中嵌人视频. 支持图片尺寸自适应(不同的图片会显示不同

这是一款设计的非常简单非常实用的jQuery幻灯片插件.现在的幻灯片插件层出不穷,这款jQuery幻灯片插件返璞归真,使用不到1000字节完成了幻灯片所需的必要功能. 该幻灯片插件小巧玲珑,简单实用.它的特点有: 简单小巧.该jquery幻灯片插件的压缩版本的js文件只有991字节大小.非常适合于手机等移动设备的使用. 支持键盘导航.可以使用键盘的左右方向键来控制幻灯片. 支持所有的内容.幻灯片中的内容可以是图片.文字.视频或其他内容. 跨浏览器支持.该幻灯片插件可以在最新版本的Chrome,

Smoothbox是一款非常实用的超酷jQuery轻量级响应式lightbox插件.该lightbox插件在图片转换时带有平滑的CSS3过渡效果.如果不使用CSS3过渡效果,该插件可以支持到IE8浏览器.它的特点有: 轻量级[1.7Kb] 预加载图片 可以在多个项之间建立画廊 实用CSS3 transitions制作平滑过渡效果 响应式图片设置 效果演示:http://www.htmleaf.com/Demo/201504171697.html 下载地址:http://www.htmleaf.c

一.响应式开发 现在移动设备用户的增多,我们在PC端开发的页面不能完美的适配于移动端,那为了让移动端的用户拥有用好的体验效果,一般来说,我们会针对移动端来做一套特定的版本.而显然,技术是不断更新迭代的,这时候就出现了响应式开发,指的是同一页面在不同屏幕尺寸下有不同的布局,即用一套代码,来适配不同的设备. 二.响应式布局的原理 1.通过CSS中的媒体查询,即media queries,可以针对不同的媒体类型定义不同的样式. 语法:@media all and(min-width:??px)and(

在线预览   源码下载 lightgallery.js是一款纯JavaScript轻量级响应式lightbox插件.该Lightbox插件支持图片,视频,iframe等多种媒体.支持全屏,导航,缩放,下载等功能,还支持多种动画过渡效果.lightgallery.js的特点还有: 完全响应式设计. 内置插件的模块化体系结构. 支持移动触摸设备. 桌面设备中可以通过鼠标拖拽来切换. 鼠标双击可以查看原尺寸的大图. 缩略图带动画特效. 支持各种视频. 支持20多种硬件加速的CSS3过渡动画. 支持动态

这是一款效果非常炫酷的jQuery和CSS3 3d翻转图片幻灯片插件.这个幻灯片插件开始的时候图片都堆叠在一起,当用户点击了其中的某张图片后,该图片会以3D翻转的方式"飞"到堆叠图片的最前面. 在该幻灯片插件中使用了 CSS3 transition.CSS3 animations 和 CSS3 transforms,并用jQuery来处理鼠标点击事件. 在线演示:http://www.htmleaf.com/Demo/201502081346.html 下载地址:http://www.

一.使用方法 <link rel="stylesheet" href="css/sangarSlider.css" type="text/css"> <link rel="stylesheet" href="css/sangar-skin-default.css" type="text/css"> <script type="text/javasc

最近一段时间都在忙于移动端工作的开发,其间积累了一些经验,在此和大家分享一下.如有不正确的地方,还希望网友能及时指正! 移动端开发最头疼的事情,莫过于设备的适配.也就是根据设备分辨率的大小,要展示一样的页面.首先要提醒大家注意的地方是,页面头部一定添加如下代码: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0