jquery图片相册可拖动展示效果

<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"/>
<title>jquery ????????</title>
<link rel="stylesheet" type="text/css教程" href="css/style.css"/>
<script type="text/网页特效" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="polaroid">
 <img src="images/01_colosseum.png" alt="colloseum" />
 <p>coloseum in rome</p>
</div>
<div class="polaroid">
 <img src="images/02_vatican.png" alt="vatican" />
 <p>vatican</p>
</div>
<div class="polaroid">
 <img src="images/03_forum_romanum.png" alt="forum romanum" />
 <p>forum romanum</p>
</div>
<div class="polaroid">
 <img src="images/04_fiat_500.png" alt="fiat 500" />
 <p>fiat 500 - typical italian car</p>
</div>
<div class="polaroid">
 <img src="images/05_me_gf.png" alt="me and my girl in florance" />
 <p>my girl and me in florance</p>
</div>
<div class="polaroid">
 <img src="images/06_venetian_gondolas.png" alt="venetian gondolas" />
 <p>venetian gondolas</p>
</div>
<div class="polaroid">
 <img src="images/07_pizza.png" alt="pizza" />
 <p>delicious pizza - <strong>the</strong> italian food</p>
</div>
<div class="polaroid">
 <img src="images/08_pool.png" alt="swimming pool" />
 <p>swimming pool near our house</p>
</div>
<div class="polaroid">
 <img src="images/09_florence.png" alt="florence" />
 <p>bridge in florence - ponte vecchio</p>
</div>
<div class="polaroid">
 <img src="images/10_tower_of_pisa.png" alt="tower of pisa" />
 <p>leaning tower of pisa</p>
</div>
</body>
</html>

源码下载地址
http://down.111cn.net/down/code/jquery/2010/0830/20524.html

时间: 2024-07-28 18:10:58

jquery图片相册可拖动展示效果的相关文章

jquery 插件QQ评论拖动分页效果

<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" c

SlideView 图片滑动(扩展/收缩)展示效果_javascript技巧

这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如下特色: 1,有四种方向模式选择: 2,结合tween算法实现多种滑动效果: 3,能自动根据滑动元素计算展示尺寸: 4,也可自定义展示或收缩尺寸: 5,可扩展自动切换功能: 6,可扩展滑动提示功能. 兼容:ie6/7/8, firefox 3.6.8, opera 10.51, safari 4.0.5, chrome 5.0 程序说明 [基本原理] 通过设置滑动元素的位置坐标(left/righ

基于jquery超酷的照片墙展示效果

这是一个超酷的照片墙展示效果,很多照片结合淡入淡出.旋转.缩放.倾斜及3D效果,照片快速从左侧切入,做旋转3D效果,最后在照片墙上整齐排列,为用户展示了超酷的照片墙展示效果. 本文结合实例给大家分享超酷的照片墙效果,该效果依赖jQuery和easing插件,因此首先载入这两个文件. <script src="jquery.min.js"></script> <script src="jquery.easing.1.3.js">&l

jQuery图片加载显示loading效果_jquery

在很多时候我们需要用到图片加载功能,在网上搜资料后就想为了以后使用方便重新整理了下,结果如图: 最后一张是加载失败显示的图片,没找到合适的图片,先用他顶替. 页面引用 <div class="container"> <div class="row block" id="img-list"> <div class="col-md-3"> <img src="/Assets/On

jQuery实现360°全景拖动展示

 360全景就是视角超过人的正常视角的图像,而我们这里说的全景特指水平视角360度,垂直视角180度的图像.可以全景空间里进行切换,达到浏览各个不同场景360全景展示的目的.     CSS   代码如下: html,body{background:#333;} #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;} #loading span{left:45%;top:40%;font:normal 5

jQuery实现360°全景拖动展示_jquery

CSS 复制代码 代码如下: html,body{background:#333;}  #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}  #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}  #demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;wid

jquery 图片Silhouette Fadeins渐显效果_jquery

我的乐队有几个朋友刚刚经历了一场小型的成员阵容的变化.他们需要更换其主页上的照片.我想这可能是有趣的事情出现了少许的互动.       这可能有不少方法可以做到这个效果,这一个刚刚进入我的头突然出现,我随它而去了.这个想法是有一个作为背景图像的轮廓,然后,在该组所有完全相同的大小与每个乐队成员的4个图像.这些图像默认隐藏.然后,有4个绝对定位的区域上面所在的区域,这是过渡区作用.在jQuery的,我们用他们悬停事件,渐渐显示相应的图像. HTML 正如我所说,只是一个div里面有四个图像和过渡区

基于Jquery制作图片文字排版预览效果附源码下载_jquery

基于jQuery图文排版图片预览特效.这是一款基于jQuery+CSS3实现的鼠标点击图片弹出画廊切换特效. 效果图如下所示,怎么样感兴趣吗,感兴趣的朋友继续往下学习哦. 效果演示     源码下载 html代码: <div id="fullscreen"> <div id="fullscreen-inner"> <div id="fullscreen-inner-left" class="fullscre

jQuery图片播放8款精美插件分享_jquery

本文将和大家一起分享8款精美的jQuery图片播放插件,每一款插件均有演示和源码下载,有兴趣的朋友可以下载使用和研究.废话不多说了,直接上这些插件. 1.3D轮播相册 这款3D相册插件利用了HTML5特性,让相片播放具有了3D效果,浏览器有限制哦. 演示   下载 2.jQuery手风琴效果图片播放器 这款播放器的特点是右侧有一个手风琴式的菜单,而且图片切换十分流畅. 演示   下载 3.流水线效果图片组切换 这款jQuery插件按一组来切换图片,方式酷似流水线,一组接着一组. 演示   下载