jquery点击图片弹图片放大效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>带阴影的图片展示灯箱效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
html, body, div, ul {
 margin: 0;
 padding: 0;
}
body {
    color: #262626;
 background: #f4f4f4;
 font: normal 12px/18px verdana, sans-serif;
}
#content {
 width: 400px;
 margin: 40px auto 0 auto;
 padding: 0 60px 30px 60px;
 border: solid 1px #cbcbcb;
 background: #fafafa;
 -moz-box-shadow: 0px 0px 10px #cbcbcb;
 -webkit-box-shadow: 0px 0px 10px #cbcbcb;
}
p {
 margin: 0;
 padding: 7px 0;
}
a {
 outline: none;
}
a img {
 border: 1px solid #bbb;
 padding: 2px;
 margin: 10px 20px 10px 0;
 vertical-align: top;
}
a img.last {
 margin-right: 0; 
}
ul {
 margin-bottom: 24px;
 padding-left: 30px;
}
/*
 * fancybox - jquery plugin
 * simple and fancy lightbox alternative
 *
 * examples and documentation at: http://fancybox.net
 *
 * copyright (c) 2008 - 2010 janis skarnelis
 * that said, it is hardly a one-person project. many people have submitted bugs, code, and offered their advice freely. their support is greatly appreciated.
 *
 * version: 1.3.2 (20/10/2010)
 * requires: jquery v1.3+
 *
 * dual licensed under the mit and gpl licenses:
 *   http://www.opensource.org/licenses/mit-license.php教程
 *   http://www.gnu.org/licenses/gpl.html
 */
#fancybox-loading {
 position: fixed;
 top: 50%;
 left: 50%;
 width: 40px;
 height: 40px;
 margin-top: -20px;
 margin-left: -20px;
 cursor: pointer;
 overflow: hidden;
 z-index: 1104;
 display: none;
}
#fancybox-loading div {
 position: absolute;
 top: 0;
 left: 0;
 width: 40px;
 height: 480px;
 background-image: url('/effect/images/201010262215/fancybox.png');
}
#fancybox-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 z-index: 1100;
 display: none;
}
#fancybox-tmp {
 padding: 0;
 margin: 0;
 border: 0;
 overflow: auto;
 display: none;
}
#fancybox-wrap {
 position: absolute;
 top: 0;
 left: 0;
 padding: 20px;
 z-index: 1101;
 outline: none;
 display: none;
}
#fancybox-outer {
 position: relative;
 width: 100%;
 height: 100%;
 background: #fff;
}
#fancybox-content {
 width: 0;
 height: 0;
 padding: 0;
 outline: none;
 position: relative;
 overflow: hidden;
 z-index: 1102;
 border: 0px solid #fff;
}
#fancybox-hide-sel-frame {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: transparent;
 z-index: 1101;
}
#fancybox-close {
 position: absolute;
 top: -15px;
 right: -15px;
 width: 30px;
 height: 30px;
 background: transparent url('/effect/images/201010262215/fancybox.png') -40px 0px;
 cursor: pointer;
 z-index: 1103;
 display: none;
}
#fancybox-error {
 color: #444;
 font: normal 12px/20px arial;
 padding: 14px;
 margin: 0;
}
#fancybox-img {
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 border: none;
 outline: none;
 line-height: 0;
 vertical-align: top;
}
#fancybox-frame {
 width: 100%;
 height: 100%;
 border: none;
 display: block;
}
#fancybox-left, #fancybox-right {
 position: absolute;
 bottom: 0px;
 height: 100%;
 width: 35%;
 cursor: pointer;
 outline: none;
 background: transparent url('/effect/images/201010262215/blank.gif');
 z-index: 1102;
 display: none;
}
#fancybox-left {
 left: 0px;
}
#fancybox-right {
 right: 0px;
}
#fancybox-left-ico, #fancybox-right-ico {
 position: absolute;
 top: 50%;
 left: -9999px;
 width: 30px;
 height: 30px;
 margin-top: -15px;
 cursor: pointer;
 z-index: 1102;
 display: block;
}
#fancybox-left-ico {
 background-image: url('/effect/images/201010262215/fancybox.png');
 background-position: -40px -30px;
}
#fancybox-right-ico {
 background-image: url('/effect/images/201010262215/fancybox.png');
 background-position: -40px -60px;
}
#fancybox-left:hover, #fancybox-right:hover {
 visibility: visible;    /* ie6 */
}
#fancybox-left:hover span {
 left: 20px;
}
#fancybox-right:hover span {
 left: auto;
 right: 20px;
}
.fancybox-bg {
 position: absolute;
 padding: 0;
 margin: 0;
 border: 0;
 width: 20px;
 height: 20px;
 z-index: 1001;
}
#fancybox-bg-n {
 top: -20px;
 left: 0;
 width: 100%;
 background-image: url('/effect/images/201010262215/fancybox-x.png');
}
#fancybox-bg-ne {
 top: -20px;
 right: -20px;
 background-image: url('/effect/images/201010262215/fancybox.png');
 background-position: -40px -162px;
}
#fancybox-bg-e {
 top: 0;
 right: -20px;
 height: 100%;
 background-image: url('/effect/images/201010262215/fancybox-y.png');
 background-position: -20px 0px;
}
#fancybox-bg-se {
 bottom: -20px;
 right: -20px;
 background-image: url('/effect/images/201010262215/fancybox.png');
 background-position: -40px -182px;
}
#fancybox-bg-s {
 bottom: -20px;
 left: 0;
 width: 100%;
 background-image: url('/effect/images/201010262215/fancybox-x.png');
 background-position: 0px -20px;
}
#fancybox-bg-sw {
 bottom: -20px;
 left: -20px;
 background-image: url('/effect/images/201010262215/fancybox.png');
 background-position: -40px -142px;
}
#fancybox-bg-w {
 top: 0;
 left: -20px;
 height: 100%;
 background-image: url('/effect/images/201010262215/fancybox-y.png');
}
#fancybox-bg-nw {
 top: -20px;
 left: -20px;
 background-image: url('/effect/images/201010262215/fancybox.png');
 background-position: -40px -122px;
}
#fancybox-title {
 font-family: helvetica;
 font-size: 12px;
 z-index: 1102;
}
.fancybox-title-inside {
 padding-bottom: 10px;
 text-align: center;
 color: #333;
 background: #fff;
 position: relative;
}
.fancybox-title-outside {
 padding-top: 10px;
 color: #fff;
}
.fancybox-title-over {
 position: absolute;
 bottom: 0;
 left: 0;
 color: #fff;
 text-align: left;
}
#fancybox-title-over {
 padding: 10px;
 background-image: url('/effect/images/201010262215/fancy_title_over.png');
 display: block;
}
.fancybox-title-float {
 position: absolute;
 left: 0;
 bottom: -20px;
 height: 32px;
}
#fancybox-title-float-wrap {
 border: none;
 border-collaps教程e: collapse;
 width: auto;
}
#fancybox-title-float-wrap td {
 white-space: nowrap;
}
#fancybox-title-float-left {
 padding-left: 15px;
 background: url('/effect/images/201010262215/fancybox.png') -40px -90px no-repeat;
}
#fancybox-title-float-main {
 color: #fff;
 line-height: 29px;
 font-weight: bold;
 padding-bottom: 3px;
 background: url('/effect/images/201010262215/fancybox-x.png') 0px -40px;
}
#fancybox-title-float-right {
 padding-left: 15px;
 background: url('/effect/images/201010262215/fancybox.png') -55px -90px no-repeat;
}
/* ie6 */
.fancybox-ie6 #fancybox-close {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_close.png', sizingmethod='scale');
}
.fancybox-ie6 #fancybox-left-ico {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_nav_left.png', sizingmethod='scale');
}
.fancybox-ie6 #fancybox-right-ico {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_nav_right.png', sizingmethod='scale');
}
.fancybox-ie6 #fancybox-title-over {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_title_over.png', sizingmethod='scale'); zoom: 1;
}
.fancybox-ie6 #fancybox-title-float-left {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_title_left.png', sizingmethod='scale'); }
.fancybox-ie6 #fancybox-title-float-main {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_title_main.png', sizingmethod='scale'); }
.fancybox-ie6 #fancybox-title-float-right {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_title_right.png', sizingmethod='scale'); }
.fancybox-ie6 #fancybox-bg-w, .fancybox-ie6 #fancybox-bg-e, .fancybox-ie6 #fancybox-left, .fancybox-ie6 #fancybox-right, #fancybox-hide-sel-frame {
 height: expression(this.parentnode.clientheight + "px");
}
#fancybox-loading.fancybox-ie6 {
 position: absolute; margin-top: 0;
 top: expression( (-20 + (document.documentelement.clientheight ? document.documentelement.clientheight/2 : document.body.clientheight/2 ) + ( ignoreme = document.documentelement.scrolltop ? document.documentelement.scrolltop : document.body.scrolltop )) + 'px');
}
#fancybox-loading.fancybox-ie6 div {
 background: transparent;
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_loading.png', sizingmethod='scale');
}
/* ie6, ie7, ie8 */
.fancybox-ie .fancybox-bg {
 background: transparent !important;
}
.fancybox-ie #fancybox-bg-n {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_n.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-ne {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_ne.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-e {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_e.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-se {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_se.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-s {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_s.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-sw {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_sw.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-w {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_w.png', sizingmethod='scale');
}
.fancybox-ie #fancybox-bg-nw {
 filter: progid:dximagetransform.microsoft.alphaimageloader(src='/effect/images/201010262215/fancy_shadow_nw.png', sizingmethod='scale');
}
</style>
<script type="text/网页特效" src="/effect/images/jquery-1.4.min.js"></script>
<script type="text/javascript">
!window.jquery && document.write('<script src="/effect/images/jquery-1.4.3.min.js"></script>');
</script>
<script type="text/javascript" src="/effect/images/201010262215/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="/effect/images/201010262215/jquery.fancybox-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
 /*
 *   examples - images
 */
 $("a#example1").fancybox();
 $("a#example2").fancybox({
  'overlayshow' : false,
  'transitionin' : 'elastic',
  'transitionout' : 'elastic'
 });
 $("a#example3").fancybox({
  'transitionin' : 'none',
  'transitionout' : 'none' 
 });
 $("a#example4").fancybox({
  'opacity'  : true,
  'overlayshow' : false,
  'transitionin' : 'elastic',
  'transitionout' : 'none'
 });
 $("a#example5").fancybox();
 $("a#example6").fancybox({
  'titleposition'  : 'outside',
  'overlaycolor'  : '#000',
  'overlayopacity' : 0.9
 });
 $("a#example7").fancybox({
  'titleposition' : 'inside'
 });
 $("a#example8").fancybox({
  'titleposition' : 'over'
 });
 $("a[rel=example_group]").fancybox({
  'transitionin'  : 'none',
  'transitionout'  : 'none',
  'titleposition'  : 'over',
  'titleformat'  : function(title, currentarray, currentindex, currentopts) {
   return '<span id="fancybox-title-over">image ' + (currentindex + 1) + ' / ' + currentarray.length + (title.length ? '   ' + title : '') + '</span>';
  }
 });
 /*
 *   examples - various
 */
 $("#various1").fancybox({
  'titleposition'  : 'inside',
  'transitionin'  : 'none',
  'transitionout'  : 'none'
 });
 $("#various2").fancybox();
 $("#various3").fancybox({
  'width'    : '75%',
  'height'   : '75%',
  'autoscale'   : false,
  'transitionin'  : 'none',
  'transitionout'  : 'none',
  'type'    : 'iframe'
 });
 $("#various4").fancybox({
  'padding'   : 0,
  'autoscale'   : false,
  'transitionin'  : 'none',
  'transitionout'  : 'none'
 });
});
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id="content">
 <p>
  different animations<br>
  <a id="example1" href="/effect/images/201010262215/1_b.jpg"><img alt="example1" src="/effect/images/201010262215/1_s.jpg"></a>
  <a id="example2" href="/effect/images/201010262215/2_b.jpg"><img alt="example2" src="/effect/images/201010262215/2_s.jpg"></a>
  <a id="example3" href="/effect/images/201010262215/3_b.jpg"><img alt="example3" src="/effect/images/201010262215/3_s.jpg"></a>
  <a id="example4" href="/effect/images/201010262215/4_b.jpg"><img class="last" alt="example4" src="/effect/images/201010262215/4_s.jpg"></a>
 </p>
 <p>
  different title positions<br>
  <a id="example5" href="/effect/images/201010262215/5_b.jpg" title="lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="/effect/images/201010262215/5_s.jpg"></a>
  <a id="example6" href="/effect/images/201010262215/6_b.jpg" title="etiam quis mi eu elit tempor facilisis id et neque. nulla sit amet sem sapien. vestibulum imperdiet porta ante ac ornare. vivamus fringilla congue laoreet."><img alt="example5" src="/effect/images/201010262215/6_s.jpg"></a>
  <a id="example7" href="/effect/images/201010262215/7_b.jpg" title="cras neque mi, semper at interdum id, dapibus in leo. suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="/effect/images/201010262215/7_s.jpg"></a>
  <a id="example8" href="/effect/images/201010262215/8_b.jpg" title="sed vel sapien vel sem tempus placerat eu ut tortor. nulla facilisi. sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="/effect/images/201010262215/8_s.jpg"></a>
 </p>
 <p>
  image gallery (ps, try using mouse scroll wheel)<br>
  <a rel="example_group" href="/effect/images/201010262215/9_b.jpg" title="lorem ipsum dolor sit amet"><img alt="" src="/effect/images/201010262215/9_s.jpg"></a>
  <a rel="example_group" href="/effect/images/201010262215/10_b.jpg" title=""><img alt="" src="/effect/images/201010262215/10_s.jpg"></a>
  <a rel="example_group" href="/effect/images/201010262215/11_b.jpg" title=""><img alt="" src="/effect/images/201010262215/11_s.jpg"></a>
  <a rel="example_group" href="/effect/images/201010262215/12_b.jpg" title=""><img class="last" alt="" src="/effect/images/201010262215/12_s.jpg"></a>
 </p>
</div>
</body>
</html>

时间： 2024-08-23 08:07:01

jquery点击图片弹图片放大效果的相关文章

jquery图片预览放大效果

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.111cn.net/ 1999/xhtml"> <head> <meta http-equiv="cont

jQuery实现为图片添加镜头放大效果的方法_jquery

本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg" }); $(&

jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现_jquery

关键字"拖曳搜索"之"拖曳"功能需要 jQuery UI 之 droppable 库 效果如下: 搜索包含相关关键字时,把拖曳左边关键字到右边框里面 也可以在输入框里输入自定义关键字到下面框 即可搜索 如果去掉不需要的关键词 搜索时 把不需要的关键词从右边框拖曳回到左边 即可   无论原来还是自定义加入的关键词 如果已存在 她会提示... 实现: 复制代码 代码如下: <script type="text/javascript" src=&

jQuery实现为图片添加镜头放大效果的方法

本文实例讲述了jQuery实现为图片添加镜头放大效果的方法.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: ? 1 2 3 4 5 6 $(function () { $("#img_01").imageLens(); $("#img_02").imageLens({ lensSize: 200 }); $("#img_03").imageLens({ imageSrc: "images/sample01.jpg

jQuery点击按钮弹出遮罩层且内容居中特效_jquery

本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮.一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devic

jQuery实现的自定义弹出层效果实例详解_jquery

本文实例讲述了jQuery实现的自定义弹出层效果.分享给大家供大家参考,具体如下: dialog.css: #DialogBySHFLayer { width:100%; height:100%; left:0; top:0; position:fixed; z-index:500; background-color:#333333; filter:alpha(Opacity=40); -moz-opacity:0.4; opacity: 0.4; } /*弹出的提示框*/ #DialogByS

JQuery点击事件回到页面顶部效果的实现代码_jquery

JQuery点击事件回到页面顶部效果的实现代码 //2个div,点击某个时回到顶部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <script type="text/javascript"> $(function(){ $("#top&quo

jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)_jquery

弹出层用来向用户展示详细的信息,交互性非常强.弹出层有对话框.模态窗口等形式,这里我都把他们叫做弹出层,我的同事们也是这么叫的.一般我们喜欢使用比较成熟的弹出层插件如fancybox等,但在本文,我将先抛弃插件,给大家介绍如何使用jQuery+CSS3+Html5实现弹出层. 效果展示        源码下载 我们完全使用HTML5+CSS3+jQuery来实现一个基本的弹出层效果,因此我们可以在示例中任意修改弹出层外观样式.甚至js方法调用.我们最终做出来的弹出层效果应该是响应式的,也就是说可

jQuery实现仿人人网弹出层效果

有兴趣的朋友可以从文章最顶部的链接下载js文件.下面的代码是我所拓展的部分.在这分隔线之前基本上没有多少改动. 1 //---------------------------------------blockUI part end-----------------------------------    2 //change blockUI default settings    //change blockUI border    $.blockUI.defaults.css.border