基于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. golang项目结构

    一.概述 golang更新了环境变量,导致整个goproject的结构改变: [root@node175 goproject]# tree -L . ├── bin │   └── demo ├── ...

  2. 彻底解决asp.net mvc5.2.2:vs2013 cshtml视图文件报错(当前上下文中不存在名称“model”,ViewBag,Url)

    最近遇到一个奇葩的问题,在vs2013下cshtml视图文件报错,出现当前上下文中不存在名称“model”,ViewBag,Url等等),在视图中也没有智能提示了,用@model声明视图的model类 ...

  3. List元素排序简例

    前言:这种处理方式,在程序中偶尔会用的到,栗子很简单,关键是加强一下记忆,以及以备后用 1:实现Comparable接口的方式 1-1:没有使用泛型,重写compareTo()方法时需要判断类型及转换 ...

  4. 【struts2】名为dispatcher的ResultType

    1)基本使用 名称为“dispatcher”的ResultType,在struts-default.xml里的配置如下: <result-type name="dispatcher&q ...

  5. OpenCV 学习笔记03 threshold函数

    opencv-python   4.0.1 简介:该函数是对数组中的每一个元素(each array element)应用固定级别阈值(Applies a fixed-level threshold) ...

  6. Oracle 12C -- Unified Auditing Policy

    1.审计策略是一组审计选项,用来审计数据库用户 2.创建审计策略需要被授予audit_admin角色(create audit policy ...) 3.可以在CDB.PDB级别创建创建审计策略 4 ...

  7. linux文件系统 - 初始化(三)

    执行init程序 一.目的 内核加载完initrd文件后,为挂载磁盘文件系统做好了必要的准备工作,包括挂载了sysfs.proc文件系统,加载了磁盘驱动程序驱动程序等.接下来,内核跳转到用户空间的in ...

  8. Jedis工具类(含分布式锁的调用和释放)

    个人把工具类分为两部分: 一.连接池部分 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import redis.clients.j ...

  9. vuex 温故而知新 mapState的使用

    虽然早就知道 mapState 的存在,但还是极少使用.最近代码的computed变多才开始意识到好处. 原来的代码: computed: { findLastSixMonthAir () { ret ...

  10. React Native 错误锦集

    启动时报错 : React Native version mismatch. JavaScript version: 0.57.4 Native version: 0.55.2 解决方案传送门:htt ...