基于jQuery点击缩略图右侧滑出大图特效
基于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点击缩略图右侧滑出大图特效的更多相关文章
- 基于jQuery点击圆形边框弹出图片信息
分享一款基于jQuery点击圆形边框弹出图片信息.这是一款鼠标经过图片转换成圆形边框,点击可弹出文字信息.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div id=&q ...
- 基于jQuery点击加载动画按钮特效
分享一款基于jQuery点击加载动画按钮特效.这是一款基于jQuery+CSS3实现的鼠标点击按钮加载动画特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery打造的选项卡向上弹出jquery焦点图切换特效
基于jQuery打造的选项卡向上弹出jquery焦点图切换特效 鼠标经过标题栏,会出现层特效向上滑动,并且在同时进行幻灯片切换,效果十分不错. 有兴趣的童鞋可以下载看看,在IE6方面兼容性也不错,只有 ...
- 基于jQuery点击图像居中放大插件Zoom
分享一款基于jQuery点击图像居中放大插件Zoom是一款放大的时候会从原图像的位置以动画方式放大到画面中间,支持点击图像或者按ESC键来关闭效果.效果图如下: 在线预览 源码下载 实现的代码. ...
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
- 基于jQuery右侧带缩略图导航的焦点图
今天我们要来分享一款右侧带缩略图导航的jQuery焦点图插件,这款jQuery焦点图插件的特点是右侧有一列缩略图导航列表,并且可以定义任意数量的图片,你可以拖动列表来查看所有的图片,点击缩略图后,即可 ...
- 一款基于jQuery底部带缩略图的焦点图
之前我们已经分享过不少实用的jQuery焦点图插件了,今天我们要介绍的这款jQuery焦点图插件是带有缩略图的,我们只需点击缩略图即可切换至相应的图片,图片切换的时候出现淡入淡出的动画效果. 在线预览 ...
- jQuery点击缩略图切换大图代码
很多网站上都会有点击缩略图切换成大图的效果,下面来分享一下它的源码 还是先来看效果截图 运行文件 然后点击下一张 下面分享源代码 html文件 <!DOCTYPE html PUBLIC &qu ...
- 一款基于jQuery外观优雅带遮罩弹出层对话框
今天我们要来分享一款基于jQuery的弹出层对话框插件,该插件包含多种对话框类型,比如提示框.确认框等.更为实用的是,这款jQuery对话框中的按钮事件也可以被我们所捕获,从而相应对话框按钮的各种事件 ...
随机推荐
- Nginx反向代理+Tomcat+Springmvc获取用户访问ip
Nginx+Tomcat+Springmvc获取用户访问ip 1.Nginx反向代理 修改Nginx配置文件 location / { ***********之前代码*******; proxy_se ...
- android image加载中等待动画
在布局中添加一个ImageViw和一个EditText. <ImageView android:id="@+id/loading_imageView_info" androi ...
- 【Struts2】Struts2与Spring整合后,如何指定Action为多例模式
Strust2默认是多例的,但是Spring默认是单例的,在进行Spring+Strust2整合的时候,就需要把Spring管理的action指定为多例模式,只需要在action上面加上@Scope( ...
- WCF入门教程(四)通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF,采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]
WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...
- OpenCV 学习笔记03 drawContours函数
opencv-python 4.0.1 轮廓的绘制或填充. cv2.drawContours(image, contours, contourIdx, color[, thickness[, li ...
- 小而美的ghost driver
做过selenium自动化项目的同学应该都遇到过这样的问题:测试用例太多,运行速度过慢导致团队成员怨声载道. 于是便有了selenium grid和多线程运行selenium测试用例的方法.这些方法各 ...
- [转]Greenplum 资源隔离的原理与源码分析
摘要: 背景 Greenplum是一个MPP的数据仓库系统,最大的优点是水平扩展,并且一个QUERY就能将硬件资源的能力发挥到极致. 但这也是被一些用户诟病的一点,因为一个的QUERY就可能占光所有的 ...
- java appium客户端 6.1.0android长按及滑动变更
今天使用appium 6.1.0 java客户端,发现长按longpress(element),无法使用.如下代码在5.0.4 版本是可以正常运行的, WebElement noteDelete = ...
- 颠覆Git 命令使用体验的神器 - tig
颠覆 Git 命令使用体验的神器 -- tig tig, 就是把 Git 这个单词倒过来念, 它是一个命令行工具, 日常使用中我用它来取代 Git 最高频的几个操作, 如 git log, g ...
- WPF 程序在 Windows XP 下报错:The image format is unrecognized.
最近做的一个 WPF 程序,在 Windows 7 或以上版本的系统中,测试都很正常,在 Windows XP 下运行时一开始就报了个错误: { "ClassName" : ...