js和CSS3可拖拽的横向图片预览布局

当前位置:主页 > jQuery库 > 布局和界面 > js和CSS3可拖拽的横向图片预览布局
js和CSS3可拖拽的横向图片预览布局
分享:

    插件介绍

    这是一款js和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布,可以通过鼠标前后拖拽图片。当点击图片的标号时,隐藏所有的缩略图,在屏幕上显示当前被点击的图片。

    浏览器兼容性

    浏览器兼容性
    时间:2019-06-18
    阅读:
简要教程

这是一款js和CSS3可拖拽的横向图片预览布局。该布局将所有图片在屏幕中央进行横向排布,可以通过鼠标前后拖拽图片。当点击图片的标号时,隐藏所有的缩略图,在屏幕上显示当前被点击的图片。

该布局使用TweenMax来制作动画特效,拖拽效果使用的是Draggabilly插件。

下面是该布局的一些屏幕截图效果:

js和CSS3可拖拽的横向图片预览布局-1

js和CSS3可拖拽的横向图片预览布局-2

js和CSS3可拖拽的横向图片预览布局-3

js和CSS3可拖拽的横向图片预览布局-4

该js和CSS3可拖拽的横向图片预览布局的github网址为:https://github.com/codrops/DraggableImageStrip/