jquery实现的在当前页面查看原图_图片特效

jquery实现的在当前页面查看原图: 发布时间：2020-04-06编辑：脚本学堂

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>
    <FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
    <title><a href=http://www.jb200.com/zt/dangqianyemian/ target=_blank class=infotextkey>当前页面</a>查看原图</title>
    <style type="text/css">
    div, ul, li {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    }
    #Over {
    position: absolute;
    width: 100%;
    z-index: 100;
    left: 0px;
    top: 0px;
    }
    .img {
    width:90%;
    background-color: #FFF;
    height: 90%;
    padding: 3px;
    border-top-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-left-width: 1px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    }
    .content {
    text-align: center;
    width: 400px;
    height:300px;
    margin-right: auto;
    margin-left: auto;
    }
    .EnlargePhoto {
    cursor: pointer;
    }
    .TempContainer {
    position: absolute;
    z-index: 101;
    margin-right: 0px;
    margin-left: 0px;
    text-align: center;
    width: 100%;
    cursor: pointer;
    }
    </style>
    </head>
    <script type="text/<a href=http://www.jb200.com/js/ target=_blank class=infotextkey>javascript</a>" src="/source/js/<a href=http://www.jb200.com/jb/jquery/ target=_blank class=infotextkey>jquery</a>-1.6.2.min.js"></script>
    <script type="text/javascript"> 
$(document).ready(function(e) {
	var ImgsTObj = $('.EnlargePhoto');//class=EnlargePhoto的都是需要放大的图像
	if(ImgsTObj){
	  $.each(ImgsTObj,function(){
		  $(this).click(function(){
			  var currImg = $(this);
			  CoverLayer(1);
			  var TempContainer = $('<div class=TempContainer></div>');
			  with(TempContainer){
				  appendTo("body");
				  css('top',currImg.offset().top);
				  html('<img border=0 src=' + currImg.attr('src') + '>');
			  }
			  TempContainer.click(function(){
				  $(this).remove();
				  CoverLayer(0);
			  });
		  });
	  });
	}
	else{
		return false;
	}
	
	//====== 使用/禁用蒙层效果 ========
	function CoverLayer(tag){
		with($('#Over')){
			if(tag==1){
				css('height',$(document).height());
				css('display','block');
				css('opacity',0.9);
				css("background-color","#000");
			}
			else{
				css('display','none');
			}
		}
	}
});
 
 
</script>
    <body>
    <div class="content">
    <IMG class="img EnlargePhoto" src="/source/images/201207/sz-001.jpg" _fcksavedurl="/source/images/201207/sz-001.jpg"><br /><br />
    <IMG class="img EnlargePhoto" src="/source/images/201207/tg-001.jpg" _fcksavedurl="/source/images/201207/tg-001.jpg"><br /><br />
    </div>
    </body>
    </html>

提示：可修改代码后再运行!

上一篇：纯javascript实现的横向滑动的图片切换容器代码
下一篇：经典的jQuery焦点图代码，JS图片切换特效代码

与 jquery实现的在当前页面查看原图有关的文章

本文标题：jquery实现的在当前页面查看原图
本页链接：http://www.jb200.com/tx/123.html

浏览排行

栏目分类

热点文章

jquery实现的在当前页面查看原图