添加到百度首页
添加收藏 RSS 网站地图 旧版网站
  • 全部
  • 网页特效
  • 建站教程
  • 设计分享
当前位置:首页 > 网页特效 > 图文相册 >

jQuery图片横向响应式排列图片特效

时间:2015-08-03      来源:互联网     
特效说明:
一款jQuery图片横向响应式排列图片特效,jQuery图片自适应排列显示代码是一款基于jquery.flex-images插件实现的类似谷歌、百度图片流效果。(兼容测试:IE7及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)
使用方法:
1、调用CSS样式:
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" href="css/jquery.flex-images.css">

2、调用JS插件代码:
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/jquery.flex-images.js"></script>

3、添加HTML代码:
将<!--效果html开始-->......<!--效果html结束-->之间的html和js代码;放在<body></body>之间。

4、JS代码:
<script>
    $('#demo1').flexImages({rowHeight: 140});
    $('#demo2').flexImages({rowHeight: 120, truncate: 1, maxRows: 2});
    $('#demo3').flexImages({object: 'iframe', rowHeight: 200, truncate: 1});
    $('#demo4').flexImages({ truncate: 1 });
    $('#demo5').flexImages({ truncate: 1 });
    $('#demo6').flexImages({ truncate: 1 });
</script>
相关特效
  • flexslider移动端响应式图片轮播网页特效

    flexslider移动端响应式图片轮播网页特效

    一款flexslider移动端响应式图片轮播网页特效,响应式网站建设特效代码,自适应宽度图片轮播JS特效代码。……
    2015-10-17
  • jQuery响应式全屏等比例缩放图片背景代码

    jQuery响应式全屏等比例缩放图片背景代码

    一款jQuery响应式全屏等比例缩放图片背景代码下载,该图片背景代码是一款支持随着窗口改变图片背景等比例放大、缩小jquery.ez-bg-resize.js插件,兼容性强,简单好用的jQuery插件特效。……
    2015-08-03
  • PC端、IPAD、手机等响应式图片展示触屏滚动插件

    PC端、IPAD、手机等响应式图片展示触屏滚动插件

    一款PC端、IPAD、手机等响应式图片展示触屏滚动插件Owl Carousel网页特效,响应式各分辨率屏幕显示、包含很多demo,方便各种响应式应用插件。……
    2015-03-06
  • jQuery响应式全屏背景自动切换特效

    jQuery响应式全屏背景自动切换特效

    一款jQuery响应式全屏背景自动切换网页特效免费下载,可设置切换方式、切换效果等参数。特效切换效果包含:透明渐变切换、左右滑动切换、上下滑动切换、角度滑动切换等。……
    2015-01-21
  • jQuery全屏响应式图片轮播代码

    jQuery全屏响应式图片轮播代码

    一款jQuery全屏响应式图片轮播代码网页特效,根据不同分辨率响应对应尺寸焦点图轮播代码。带左右按钮,自动轮播及点击按钮切换焦点图。……
    2014-05-24



最新更新特效

设计分享