WEB前端

jQuery图片缩放插件jQThumb.js 避免宽高同图片变形

位置:首页 > WEB前端 > jquery教程,2019-03-21 09:02
这是jQuery图片缩放插件jQThumb.js 避免宽高同图片变形,能在固定宽度的div中显示不固定宽度的图片。

jQuery图片缩放,jQThumb.js(图0)

jQuery图片缩放,jQThumb.js使用代码如下

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片缩放插件jQThumb</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Consolas,arial,"宋体";}

h2{font-size:20px;text-align:center;height:32px;margin:30px 0 0 0;}

.pic{width:920px;margin:0 auto;zoom:1;}
.pic:after{content:'';display:table;clear:both;}
.pic li{float:left;width:200px;height:200px;margin:20px 10px 0;display:inline;}

.default{border:5px solid #d9534f;}
.default img{width:200px;height:200px;vertical-align:top;}

.apply{border:5px solid #5cb85c;}
</style>

<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jqthumb.min.js"></script>
<script type="text/javascript">
$(function(){
	$('.apply img').jqthumb({
		width: 200,
		height: 200,
		after: function(imgObj){
			imgObj.css('opacity', 0).animate({opacity: 1},1000);
		}
	});
});
</script>

</head>
<body>

<h2>默认效果:图片对比下</h2>
<ul class="pic">
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/1.jpg" alt="蓝学网"></a></li>
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/2.jpg" alt="蓝学网"></a></li>
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/3.jpg" alt="蓝学网"></a></li>
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/4.jpg" alt="蓝学网"></a></li>
</ul>

<h2>使用效果:图片对比下</h2>
<ul class="pic">
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/1.jpg" alt="蓝学网"></a></li>
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/2.jpg" alt="蓝学网"></a></li>
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/3.jpg" alt="蓝学网"></a></li>
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/4.jpg" alt="蓝学网"></a></li>
</ul>

<h2>默认效果:图片对比下</h2>
<ul class="pic">
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/5.jpg" alt="蓝学网"></a></li>
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/6.jpg" alt="蓝学网"></a></li>
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/7.jpg" alt="蓝学网"></a></li>
	<li class="default"><a href="https://www.ablanxue.com"><img src="images/8.jpg" alt="蓝学网"></a></li>
</ul>

<h2>使用效果:图片对比下</h2>
<ul class="pic">	
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/5.jpg" alt="蓝学网"></a></li>
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/6.jpg" alt="蓝学网"></a></li>
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/7.jpg" alt="蓝学网"></a></li>
	<li class="apply"><a href="https://www.ablanxue.com"><img src="images/8.jpg" alt="蓝学网"></a></li>
</ul>
</body>
</html>

TAGS:jQuery图片缩放jQThumb.js

上编:详解jQuery each()遍历方法

下编:没有了

猜你喜欢

NewHot