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>
...全文
3703 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实现点击图片放大效果
综上所述，实现JavaScript点击图片放大效果涉及到HTML结构、CSS样式以及JavaScript逻辑的综合运用。通过监听用户交互，动态调整元素样式，以及添加动画效果，我们可以为用户提供一个直观且友好的图片查看体验。在...
js实现点击图片放大照片
总结来说，利用JavaScript实现点击图片放大功能主要涉及事件监听、DOM操作和CSS样式调整。而生成缩略图则可以通过服务器端处理、前端`canvas`绘制或CSS样式控制来实现。在实际开发中，根据项目需求和性能考虑，可以...
网页代码点击图片放大效果
总结，网页代码点击图片放大效果涉及的技术包括CSS3的`transform`和`transition`属性、JavaScript的事件处理和DOM操作，以及第三方库如Lightbox的使用。根据实际需求和项目规模，可以选择适合的方法来实现这一功能。...
淘宝图片放大JS效果
淘宝图片放大JS效果是一种在网页上实现图片预览和放大功能的技术，常见于电商网站，如淘宝网。这种效果能够提升用户体验，使用户在不离开当前页面的情况下，能清晰查看商品图片的细节，有助于增强购买决策。下面我们...
jquery 实现点击图片放大效果
总结来说，通过 jQuery 我们可以轻松地实现点击图片放大效果。关键在于监听点击事件，获取图片源，创建并定位放大图片，以及添加适当的 CSS 样式。这种方法可以增强用户体验，尤其是在需要详细查看图片的场合。在...
JavaScript

87,997

社区成员

224,709

社区内容

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

加载中

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

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

+ 用AI写文章