jquery图片内容展开/收缩选项卡

所属分类:媒体-图片展示

 46372  428  查看评论 (8)
分享到微信朋友圈
X
jquery图片内容展开/收缩选项卡 ie兼容6

使用方法

1,将jquery库和gridquote.js以及所取样式加入到您的页面。

<!--必要样式-->
<link rel="stylesheet" href="css/jquery.gridquote.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.gridquote.min.js"></script>

2,html

<div class="grid-container">
    <div class="thumb-container" data-title="Optional Background Color" data-fontsize="27" data-bgcolor="green">
        <img src="imgs/thumbnail1.png" alt="" class="grid-img">
        <div class="quote-container">
        <p>
            <span class="date-info">11 Jun, 2013</span>
            It&#39;s responsive, please try to resize your browser.again to close this panel.<br />
            <span class="little-info">--- Link to my profile</span>
        </p>
        </div>
    </div>
</div>

3,js

<script type="text/javascript">
$(document).ready(function($){
	$('.grid-container').gridQuote();
});
</script>
相关插件-图片展示

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 51451  696

js 3D图片旋转

原生js 3D图片旋转插件
  图片展示
 35358  348

jQuery放大镜插件imgzoom.js

jQuery图片放大插件imgzoom.js
  图片展示
 27942  317

jQuerh H5移动端图片预览插件fly_zomm_img.js

H5图标浏览插件,支持多图识别切换,支持手势放大切换
  图片展示
 66747  372

讨论这个项目(8)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ???????? 0
    2024/3/15 10:51:06
    鼠标移过去自动展开,怎么改? 回复
    lean 0
    2018/6/27 17:17:23
    这个功能是怎么实现的,原理是什么呀 回复
    秘制酱料 0
    2017/1/30 16:11:01
    橘子味汽水 0
    2016/11/16 14:11:19
    展开之后网页会自动往下滚,要怎么改
        橘子味汽水0
        2016/11/16 15:11:46
        自己解决了~~
        秘制酱料0
        2017/1/30 17:33:42

        在js里把autoScroll属性改成0

        秘制酱料0
        2017/1/30 17:37:41

        额好像不对 怎么弄的?

        mytxz0
        2017/7/18 16:41:17

        怎么弄的?

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复