CSS3 3D立方体焦点图动画

之前我们分享过很多基于jQuery和CSS3的焦点图动画插件,大部分都是在平面上通过过渡动画切换不同的图片。今天我们要在这里继续分享一款基于CSS3的焦点图插件,它的特点是图片切换容器是一个3D的立方体,点击图片后即可将该图片呈现在立方体的前面。
css3-3d-cube-image-player

jQuery左右切换焦点图插件 3D阴影相框

这是一款相对比较简单而实用的 jQuery焦点图应用,它的特点是左右切换按钮悬浮在图片右下角,点击切换按钮即可让图片进行左右平移地切换,效果着实是简单,但是个人觉得很实用。另外还有一个特点是,这款 jQuery焦点图插件带有3D阴影的相框,从而简单中稍带一点点华丽。
jquery-easy-shade-image-play

jQuery简易平滑焦点图插件

今天要给大家介绍一款超实用的jQuery简易平滑焦点图插件,这款焦点图的扩展性非常强,主区域可以是图片,也可以是文字和视频,理论上讲可以是任意HTML元素。另外还有一个特点是可以自定义切换按钮,控制显示切换箭头还是切换按钮,还支持自动播放图片。
jquery-easy-image-player

带投影的3D jQuery焦点图 可自适应页面大小

之前我们为大家分享很多带有3d视觉效果的jQuery/HTML5焦点图插件,比如这款jQuery/CSS3 3D旋转图片切换焦点图插件功能就非常强大。这次我们要分享的是一款带投影的3D jQuery焦点图,它的特点是利用CSS3的投影特性,让图片带有3D立体的视觉效果,同时另外一个特点是图片可以随着页面大小而自适应,可以让焦点图插件在大屏的PC页面和迷你的移动页面上均可使用。
jquery-3d-shadow-image

jQuery带缩略图焦点图插件 淡入淡出切换效果

今天我们要给大家介绍一款相对比较实用的jQuery焦点图插件,这款焦点图插件的特点有2个,一个是每一张图片都有一个同比例尺寸的缩略图,所有缩略图都排列在下方,点击缩略图即可切换到对应的图片;另外一个特点是图片切换时出现淡入淡出的动画效果,播放十分流畅。
css3-image-slider-thumbnail

jQuery宽屏左右切换焦点图 支持鼠标拖拽切换

这是一款很实用的jQuery宽屏左右切换焦点图,该焦点图左右两侧均有一个切换箭头按钮,点击按钮可以逐一切换图片。另外,图片下方有一排圆形切换按钮,可以跳转到任意图片。这款jQuery焦点图还有一个特点是支持鼠标拖拽切换,因此适合移动设备上使用。
jquery-drag-slider

jQuery百叶窗动画焦点图插件 个性化图片切换按钮

今天要给大家分享一款非常酷的jQuery百叶窗动画焦点图插件,它的特点是图片切换均采用百叶窗的样式风格,但是通过横向百叶窗和纵向百叶窗的区分,让整个焦点图不显单调。另外这款jQuery焦点图插件的图片切换按钮非常个性化,除了左右切换箭头,还有底部的任意图片切换按钮,其风格都与我们之前介绍的焦点图有很大的区别。
jquery-blind-slider

精美的jQuery首屏产品展示焦点图插件

这是一款非常精美而简洁的jQuery产品展示焦点图插件,首先图片的切换过渡动画采用淡入淡出的动画特效,其次图片上方左右悬浮两个切换按钮,当鼠标滑过图片时,这两个切换按钮就会显示出来。同时我们也可以点击图片下方的一排按钮切换到任意一张图片。
jquery-product-slider

HTML5/SVG运动模糊动画 支持焦点图、弹出层和菜单

这次要分享的是一种基于HTML5和SVG的运动模糊的动画效果,比如在焦点图插件中图片切换时候的模糊效果,弹出层弹出时的模糊效果,还有下拉菜单展开收缩时的模糊效果。大部分我们使用CSS3的模糊属性以及HTML5实现的运动算法,让图片、菜单等元素实现在运动中的模糊动画特效,为了让运动模糊效果更加逼真,我们需要选择一个比较合理的运动算法公式。
html5-svg-motion-blur-effect