网页图片简单的放大效果

样式代码

<style>    
#imgbox-loading { position: absolute; top: 0; left: 0; cursor: pointer; display: none; z-index: 90; }    
#imgbox-loading div { background: #FFF; width: 100%; height : 100%; }    
#imgbox-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: none; z-index: 80; }    
.imgbox-wrap { position: absolute; top: 0; left: 0; background: #FFF; display: none; z-index: 90; }    
.imgbox-img { padding: 0; margin: 0; border: none; width: 100%; height: 100%; vertical-align: top; }    
.imgbox-title { padding-top: 10px; font-size: 11px; text-align: center; font-family: Arial; color: #333; display: none; }    
.imgbox-bg-wrap { position: absolute; padding: 0; margin: 0; display: none; }    
.imgbox-bg { position: absolute; width: 20px; height: 20px; }    
</style>

js引入及代码

<script src="/haida/js/jqueryLibrary.min.js"></script>    
<script src="/haida/js/jquery.imgbox.pack.js"></script>    
<script>    
$(function(){    
	$(".example1").imgbox();    
	$(".example2").imgbox({    
		'speedIn'		: 0,    
		'speedOut'		: 0,    
		'alignment'		: 'center',    
		'overlayShow'	: true,    
		'allowMultiple'	: false    
	});    
});    
</script>

html

<a class="example2" href="/haida/honor/jiance/jc01.jpg"><img alt="检测报告" src="/haida/honor/jiance/jc01.jpg" width="200" style="text-align:center;"/></a>

非常简单的一个放大图片效果，没有细节图，但是整张图方法，效果足够

展现方式有两种 

example1、example2

足够使用

1、本网是非赢利性质的网站，发布文章和转载文章的目的都是为了交流和信息传播，并不意味着本网赞同其观点。
2、本站内容大都来自互联网，内容的真实性、准确性和合法性未经核实，本站不承担法律责任。
3、如果本站内容有侵权情况，请联系本站删除处理。
4、任何通过本网网页和链接得到的资讯和信息，本网概不负责，亦不负任何法律责任。

标签：图片放大