基于jQuery点击缩略图右侧滑出大图特效是一款基于strip.pkgd插件实现的点击左侧缩略图右侧滑出大图切换代码。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

<div id='page'>
<div id="content" class='clearfix'>
<section class='clearfix'>
<p>
<a href='images/bigdm1.jpg' class='strip thumbnail' data-strip-caption="Dorhout Mees F/W 2014-15" data-strip-group="dorhoutmees">
<img src='images/dm1.jpg'>
</a>
<a href='images/bigdm2.jpg' class='strip thumbnail' data-strip-caption="Dorhout Mees F/W 2014-15" data-strip-group="dorhoutmees">
<img src='images/dm2.jpg'>
</a>
<a href='images/bigdm3.jpg' class='strip thumbnail' data-strip-caption="Dorhout Mees F/W 2014-15" data-strip-group="dorhoutmees">
<img src='images/dm3.jpg'>
</a>
</p> <p>
<a href='images/bigjohn_singer.jpg' class='strip thumbnail thumbnail-landscape' data-strip-caption="John Singer Sargent - Portrait of a Boy - 1890" data-strip-group="art">
<img src='images/john_singer.jpg'>
</a> <a href='images/bighenry_scott_tuke.jpg' class='strip thumbnail thumbnail-landscape' data-strip-caption="Henry Scott Tuke - Beach Study - 1928" data-strip-group="art">
<img src='images/henry_scott_tuke.jpg'>
</a> <a href='images/bigwyeth.jpg' class='strip thumbnail thumbnail-landscape' data-strip-caption="Andrew Wyeth - Wind from the Sea - 1947" data-strip-group="art">
<img src='images/wyeth.jpg'>
</a> </p>
</section>
</div>
</div>

via:http://www.w2bc.com/Article/45435

基于jQuery点击缩略图右侧滑出大图特效的更多相关文章

  1. 基于jQuery点击圆形边框弹出图片信息

    分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=&q ...

  2. 基于jQuery点击加载动画按钮特效

    分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  3. 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效

    基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...

  4. 基于jQuery点击图像居中放大插件Zoom

    分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览   源码下载 实现的代码. ...

  5. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  6. 基于jQuery右侧带缩略图导航的焦点图

    今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可 ...

  7. 一款基于jQuery底部带缩略图的焦点图

    之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...

  8. jQuery点击缩略图切换大图代码

    很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...

  9. 一款基于jQuery外观优雅带遮罩弹出层对话框

    今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...

随机推荐

  1. 【C语言】练习2-1

     题目来源:<The C programming language>中的习题P27  练习2-1: 编写一个程序以确定分别由signed及unsigned限定的char.short.int ...

  2. 【C语言】练习1-23

     题目来源:<The C programming language>中的习题  练习1-23: 写一个删除C语言程序中所有的注释语句.要正确处理带引号的字符串与字符常量.在C语言中,注释不 ...

  3. cucumber java从入门到精通(2)用代码定义步骤

    cucumber java从入门到精通(2)用代码定义步骤 上一节里我们定义了feature文件,feature文件就是自然语言描述的用例文件,它有一定的章法,具体的潜规则是: 使用Feature关键 ...

  4. SharePoint 2013怎样创建Wiki库

    们使用Wiki页面来分享知识,增进团队合作.下面我将向大家展示SharePoint 2013 Wiki的使用方法.教程我都将以这张Wiki页面(即当前页)为示例. 编辑页面 如要编辑页面,单击顶部Ed ...

  5. SharePoint 2013 启用 以其他用户身份登陆(Sign in as different user)

    习惯于SharePoint 2010的用户会发现,SharePoint 2013默认把  以其他用户身份登陆(Sign in as different user)的选项去掉了,这对于开发人员来说很麻烦 ...

  6. 第二篇:呈现内容_第一节:Control呈现

    一.Control的呈现过程 在上个章节““生死有序”的控件生命周期”中,我们提到Render是控件开发的主角,但在控件树的“合成模式(Composite)”部分这位主角却缺席了(戏份太多的缘由).哦 ...

  7. Web安全之XSS(Cross Site Scripting)深入理解

    XSS的含义 XSS(Cross Site Scripting)即跨站脚本.跨站的主要内容是在脚本上. 跨站脚本 跨站脚本的跨,体现了浏览器的特性,可以跨域.所以也就给远程代码或者第三方域上的代码提供 ...

  8. BT5配置网络

    root@bt:~# vi /etc/network/interfaces 编辑IP地址auto eth0#iface eth0 inet dhcpiface eth0 inet staticaddr ...

  9. mysql数据导入遇到的timestamp类型问题

    今天准备把最新的表导入自己以前的机子上做临时开发,在数据库导入的时候遇到一个问题:Incorrect table definition; there can be only one TIMESTAMP ...

  10. 关于python中__name__=='__main__'的解释

    调用文章是:https://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000/0014318451 ...