请问如何用jquery通过animate()实现图片高度不变，仅宽度变化？

dsdddssdssd 2015-01-30 09:31:44

rt

我试过若是控制一个div矩形是可以实现这一功能，但就是不知道为什么换成图片时，宽度变化，高度也等比例跟住变化……如何才能实现图片也只有宽度变化？

我的代码：



<!doctype html>

<html>

	<head>

		<meta charset="utf-8" />

		<title></title>

		



	</head>

	

	<body>



		

		<div><img src="images/Koala.jpg" alt="考拉" width="100" /></div>

	</body>

</html>



<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<script type="text/javascript">

$(function() {

	$('div').toggle(

		function() {

			$('img').animate({width: '+=50px'}, 'slow');

		},

		function() {

			$('img').animate({width: '-=50px'}, 'slow');

		}

	);

	

});

</script>

...全文

354 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2015-01-30

打赏
举报

引用 3 楼 dsdddssdssd 的回复:

[quote=引用 2 楼 jslang 的回复:] 你设置下图片的高度就行了 <div><img src="images/Koala.jpg" alt="考拉" width="100" height="100" /></div>

对喔。不过这不会有一点点不对的吗？那个高度……因为就算怎么量都很难量得准确[/quote]


<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		

	</head>
	
	<body>
		<div><img src="images/Koala.jpg" alt="考拉" width="100" /></div>
	</body>
</html>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
window.onload = function() {
	$('img').each(function (){
		$(this).height($(this).height());
	});
	$('div').toggle(
		function() {
			$('img').animate({width: '+=50px'}, 'slow');
		},
		function() {
			$('img').animate({width: '-=50px'}, 'slow');
		}
	);
};
</script>

dsdddssdssd 2015-01-30

打赏
举报

引用 2 楼 jslang 的回复:

你设置下图片的高度就行了 <div><img src="images/Koala.jpg" alt="考拉" width="100" height="100" /></div>

对喔。不过这不会有一点点不对的吗？那个高度……因为就算怎么量都很难量得准确

天际的海浪 2015-01-30

打赏
举报

你设置下图片的高度就行了 <div><img src="images/Koala.jpg" alt="考拉" width="100" height="100" /></div>

slwsss 2015-01-30

打赏
举报

<!doctype html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <div><img src="images/Koala.jpg" alt="考拉" width="100" height="100" /></div> </body> </html> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function() { $('div').toggle( function() { $('img').animate({width: '+=50px'}, 'slow'); }, function() { $('img').animate({width: '-=50px'}, 'slow'); } ); }); </script>

toggle(speed,[callback]); slideToggle(speed,[easing],[callback]); fadeTo(speed,opacity,[callback]); fadeToggle(speed,[easing],[callback]); ①toggle()： toggle方法可以切换元素的可见状态，如果元素当前是可见的，则切...

jQuery中的show()方法和hide()方法会同时修改元素的多个样式，即宽度、高度和不透明度；fadeOut()方法和fadeIn()方法只会修改元素的不透明度；slideDown()方法和slideUp()方法只会修改原色的高度。这些有时候根部满足不了需求，所以就要采取一些高级的自定义动画，在jQuery中可以使用animate()方法来自定义动画；（注：本文默认已使用jquery-1...

闲话 jQuery的动画机制有800行，虽然不如样式的1300行，难度上却是不减。由于事前不了解animate接口的细节使用规则，看代码期间吃了很多苦头，尤其是深恶痛绝的defaultPrefilter函数，靠着猜想和数次的逐行攻略，终于全部拿下。本文将一点一点拆解出jq的动画机制及具体实现，解析各种做法的目的、解耦的方式、必要的结构、增强的辅助功能。需要提前掌握queue队列的知识，

动画：点击左右按钮实现图片切换 jQuery方法：animate(), stop(), first(), last(), siblings(), appendTo(), prependTo(), attr(), addClass(), removeClass(), eq() 动画效果： <!DOCTYPE html> <html lang="en"> <h...

在以前很长一段时间里，网页上的各种特效还需要采用flash 在进行。但最近几年里，我们已经很少看到这种情况了，绝大部分已经使用JavaScript 动画效果来取代flash。这里说的取代是网页特效部分，而不是动画。网页特效比如：渐变菜单、渐进显示、图片轮播等；而动画比如：故事情节广告、MV 等等。如果复制当前代码进行在本地测试的时候，请注意把不需要（其他功能展示）的代码注释掉。代码...