JS点击图片放大效果

jex_久尘 2012-06-27 04:32:18
我有很多个类似的结构，点击图片时将那张图片放大，显示到屏幕正中间，且页面变暗，突出弹出的图片，点击除弹出的图片以外的任何地方，页面还原，求大牛给个代码，在网上找过，没找到合适的



<!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>
...全文
3701 12 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
12 条回复
切换为时间正序
请发表友善的回复…
发表回复
bree06 2012-06-29
  • 打赏
  • 举报
 回复
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>
jzy632090295 2012-06-28
  • 打赏
  • 举报
 回复
我想要JS网页特效代码，就是在网页上点击图片，图片就在当前网页弹出一个面（不是网页）上放大！并且能够关闭的！我是个初学者，很多地方不懂 似你这个图片放不大啊...
三石-gary 2012-06-28
  • 打赏
  • 举报
 回复
http://fancybox.net/howto
d945332077 2012-06-28
  • 打赏
  • 举报
 回复
<!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>





















纯属原创，给分吧 哈哈不明白的还需改进的 发站内邮件
jzy632090295 2012-06-28
  • 打赏
  • 举报
 回复
楼主 我也要你这个效果的代码 能不能给我发个啊 谢啦
56gee 2012-06-28
  • 打赏
  • 举报
 回复
个人做了两个类似的实例效果，希望能给你一点启示
1、Jquery实现在当前页面浏览Img原图的效果
http://www.56gee.com/Detail/2012/03/01/8AEB71EA14/

2、JQuery实现无刷新页面：点击缩略图显示对应原图的效果
http://www.56gee.com/Detail/2012/02/14/8AEB71E62B/
d945332077 2012-06-28
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 的回复:]

我想要JS网页特效代码，就是在网页上点击图片，图片就在当前网页弹出一个面（不是网页）上放大！并且能够关闭的！我是个初学者，很多地方不懂 似你这个图片放不大啊...
[/Quote]


你说的是我的图片放不大？
d945332077 2012-06-28
  • 打赏
  • 举报
 回复
你测试没有啊 我的图片放不大？？？？？？我怎么一点就放大了啊 楼主快结贴了
001007009 2012-06-27
  • 打赏
  • 举报
 回复
推荐个插件

http://www.planeart.cn/demo/artDialog/_doc/new.html

参考demo api即可用
oZuoNian 2012-06-27
  • 打赏
  • 举报
 回复
fancybox? 很多的
d945332077 2012-06-27
  • 打赏
  • 举报
 回复
mingtian明天给你搞 主要是要下班了 看哈新闻 等我哦 明天
JS实现点击图片放大效果
JS 图片 放大 JS放大图片 很好的一个代码.以后还有很多.
js实现点击图片放大照片
js实现点击缩略图，显现图片放大缩小，亲测！！！！！！！！！！！
网页代码点击图片放大效果
网页点击图片放大效果，用于网页代码研究和学习，禁止商用
淘宝图片放大JS效果
淘宝图片放大JS效果淘宝图片放大JS效果
jquery 实现点击图片放大效果
jquery 实现点击图片放大效果
JavaScript

87,997

社区成员

224,709

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章