JS点击图片放大效果

我有很多个类似的结构，点击图片时将那张图片放大，显示到屏幕正中间，且页面变暗，突出弹出的图片，点击除弹出的图片以外的任何地方，页面还原，求大牛给个代码，在网上找过，没找到合适的<!DOCTYPE HTML>
<html>
 <head>
  <meta name="Generator" content="EditPlus">
  <title> New Document </title>
 </head>
 <style>
*{padding:0;margin:0}
body{font-size:12px}
li{list-style-type:none}
.cle{clear:both}
.News,.matter{width:960px;margin:0 auto}
.News li,.matter li{float:left;width:220px;height:300px;text-align:center}
.eTm{height:30px;line-height:30px}
.sort-t{text-align:center}
.sort-t img{cursor:pointer}
 </style>
 <body>
<div class="matter" id="sort">
<div class="sort">
<div class="eTm">分类</div>
<ul>
<li><div class="sort-t"><img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200"></div><div class="sort-b"><h3>标题</h3><p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p></div></li>
<li><div class="sort-t"><img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200"></div><div class="sort-b"><h3>标题</h3><p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p></div></li>
<li><div class="sort-t"><img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200"></div><div class="sort-b"><h3>标题</h3><p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p></div></li>
</ul>
<div class="cle"></div>
</div>
<div class="News">
<div class="eTm">分类</div>
<ul>
<li><div class="sort-t"><img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200"></div><div class="sort-b"><h3>标题</h3><p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p></div></li>
<li><div class="sort-t"><img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200"></div><div class="sort-b"><h3>标题</h3><p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p></div></li>
<li><div class="sort-t"><img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200"></div><div class="sort-b"><h3>标题</h3><p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p></div></li>
</ul>
<div class="cle"></div>
</div>
</div>
 </body>
</html>

解决方案 »

  1.   

    mingtian明天给你搞  主要是要下班了  看哈新闻 等我哦 明天
      

  2.   

    推荐个插件http://www.planeart.cn/demo/artDialog/_doc/new.html参考demo api即可用
      

  3.   

    个人做了两个类似的实例效果，希望能给你一点启示
    1、Jquery实现在当前页面浏览Img原图的效果
    http://www.56gee.com/Detail/2012/03/01/8AEB71EA14/2、JQuery实现无刷新页面：点击缩略图显示对应原图的效果
    http://www.56gee.com/Detail/2012/02/14/8AEB71E62B/
      

  4.   

    <!DOCTYPE HTML>
    <html>
     <head>
      <meta name="Generator" content="EditPlus" charset="utf-8" />
      <title> New Document </title>
     </head>
     <style>
    *{padding:0;margin:0}
    html{
    width:100%;
    height:100%;
    }
    body{font-size:12px;width:100%;height:100%;overflow:hidden;}
    li{list-style-type:none}
    .cle{clear:both}
    .News,.matter{width:960px;margin:0 auto}
    .News li,.matter li{float:left;width:220px;height:300px;text-align:center}
    .eTm{height:30px;line-height:30px}
    .imgPosition {
    width:220px;
    height:203px;
    display:none;
    }
    .sort-t{text-align:center}
    .sort-t img{cursor:pointer}
    .hoverImg img{
    position:absolute;
    width:500px;
    height:400px;
    left:50%;
    top:50%;
    margin-left:-250px;
    margin-top:-200px;
    cursor:pointer;
    z-index:9999;
    zoom:5;
    }
    /*遮罩层*/
    .shade {
    background:#666;
    width:200%;
    height:200%;
    position:absolute;
    top:0;
    left:0;
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=30);
    opacity:0.3;
    z-index:999;
    }
     </style>
     <body>
    <div class="matter" id="sort">
    <div class="sort">
    <div class="eTm">分类</div>
    <ul>
    <li>
    <div class="sort-t">
    <img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200">
    </div>
    <div class="imgPosition"></div>
    <div class="sort-b">
    <h3>标题</h3>
    <p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p>
    </div>
    </li>
    <li>
    <div class="sort-t">
    <img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200">
    </div>
    <div class="imgPosition"></div>
    <div class="sort-b">
    <h3>标题</h3>
    <p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p>
    </div>
    </li>
    <li>
    <div class="sort-t">
    <img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200">
    </div>
    <div class="imgPosition"></div>
    <div class="sort-b">
    <h3>标题</h3>
    <p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p>
    </div>
    </li>
    </ul>
    <div class="cle"></div>
    </div>
    <div class="News">
    <div class="eTm">分类</div>
    <ul>
    <li>
    <div class="sort-t">
    <img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200">
    </div>
    <div class="imgPosition"></div>
    <div class="sort-b">
    <h3>标题</h3>
    <p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p>
    </div>
    </li>
    <li>
    <div class="sort-t">
    <img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200">
    </div>
    <div class="imgPosition"></div>
    <div class="sort-b">
    <h3>标题</h3>
    <p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p>
    </div>
    </li>
    <li>
    <div class="sort-t">
    <img src="http://a4.att.hudong.com/08/21/01300000905910127709210329468.jpg" width="200" height="200">
    </div>
    <div class="imgPosition"></div>
    <div class="sort-b">
    <h3>标题</h3>
    <p>无效文字无效文字无效文字无效文字无效文字无效文字无效文字无效文字</p>
    </div>
    </li>
    </ul>
    <div class="cle"></div>
    </div>
    </div>
    <div class="shade" style="display:none;"></div>
     </body>
    </html>
    <script type="text/javascript" src="file:///F|/workspace/jquery-1.7.min.js"></script>
    <script type="text/javascript">
    $().ready(function(e) {
    $(".sort-t").click(function() {
    var _this = $(this);
    $(".sort-t").removeClass("hoverImg");//删除所有的大图片样式
    _this.addClass("hoverImg");//给当前元素添加
    $(".shade").show(100);//显示遮罩层
    _this.next(".imgPosition").show();//当图片变大的时候里面的位置不改变
    });
    $(".shade").click(function() {
    $(this).hide();
    $(".sort-t").removeClass("hoverImg");
    $(".imgPosition").hide();
    });
    });
    </script>纯属原创，给分吧 哈哈不明白的还需改进的 发站内邮件
      

  5.   

    IE下滤镜有效，看起来有点丑，就看做发好了。
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    img{width:100px; height:100px;}
    .dispDiv{position:absolute;width:500px; height:500px;display:none;}
    .shadow {width:500px; height:500px;background:#000;filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='5', MakeShadow='true', ShadowOpacity='0.60');}
    .frame {position:relative; background:#fff; padding:10px; display:block;left:10px; top:10px;
    -moz-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    -webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.6);
    }
    .close{
    position:absolute;width: 40px; height: 40px; display:none;
    }
    </style>
    <script language="javascript" src="C:\Documents and Settings\wangguanquan\My Documents\jquery.js"></script>
    </head><body><img src="ui-icons_222222_256x240.png"/><div class="dispDiv"><div class="shadow"><img src="" class="frame"/></div></div>
    <img src="close.bmp" class="close"/>
    <script language="javascript">
    var speed = 200;
    $(document).click(function(event){
    if ('IMG' != event.target.tagName) {
    $('.dispDiv,.close').hide(speed);
    }
    });
    $("img:not('.frame,.close')").click(function(){
    $('.shadow>img').attr('src', $(this).attr('src')).css({width:'491px', height:'490px'});
    $('.dispDiv').show(speed).css({top:(screen.height/2-300)+'px',left:(screen.width/2-300)+'px'});
    $('.close').show(speed).css({top:($('.dispDiv').offset().top-10)+'px', left:($('.dispDiv').offset().left+500-20)+'px'})
    });
    $('.close').click(function(){
    $('.dispDiv,.close').hide(speed);
    });
    </script>
    </body>
    </html>