图片怎么向上位移

harderror 2013-07-03 03:47:28

想实现点击图片之后,图片能够向上位移,要怎么实现呢?

...全文

276 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

ZHOU西口 2013-07-03

打赏
举报

895972411@qq.com

ZHOU西口 2013-07-03

打赏
举报

引用 7 楼 harderror 的回复:

[quote=引用 6 楼 splendid_java 的回复:] [quote=引用 4 楼 harderror 的回复:] [quote=引用 3 楼 splendid_java 的回复:]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script>
			$(function(){
				$('#imgs').click(function() {
				    $(this).animate({'top':'-=10px'});//向上移动10px
				}); 
			})
		</script>	
	</head>
	<body>
		<img src="top.jpg" id="imgs" style="position:absolute;top:100px;"/>
	</body>
</html>

$什么的是什么意思啊？今天第一次用JS写东西。[/quote]额，好吧，上面是基于JS框架jquery实现的，$是jquery中的标识。$(function(){})实现html文档的加载；$('#imgs').click(function(){})给图片添加点击事件； $(this).animate({'top':'-=10px'})jquery中可以实现动画效果的方法。[/quote] 请问你的邮箱多少啊？[/quote]这里解决不了吗？

harderror 2013-07-03

打赏
举报

引用 6 楼 splendid_java 的回复:

[quote=引用 4 楼 harderror 的回复:] [quote=引用 3 楼 splendid_java 的回复:]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script>
			$(function(){
				$('#imgs').click(function() {
				    $(this).animate({'top':'-=10px'});//向上移动10px
				}); 
			})
		</script>	
	</head>
	<body>
		<img src="top.jpg" id="imgs" style="position:absolute;top:100px;"/>
	</body>
</html>

ZHOU西口 2013-07-03

打赏
举报

引用 4 楼 harderror 的回复:

[quote=引用 3 楼 splendid_java 的回复:]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script>
			$(function(){
				$('#imgs').click(function() {
				    $(this).animate({'top':'-=10px'});//向上移动10px
				}); 
			})
		</script>	
	</head>
	<body>
		<img src="top.jpg" id="imgs" style="position:absolute;top:100px;"/>
	</body>
</html>

persuit666 2013-07-03

打赏
举报

引用 4 楼 harderror 的回复:

[quote=引用 3 楼 splendid_java 的回复:]


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script>
			$(function(){
				$('#imgs').click(function() {
				    $(this).animate({'top':'-=10px'});//向上移动10px
				}); 
			})
		</script>	
	</head>
	<body>
		<img src="top.jpg" id="imgs" style="position:absolute;top:100px;"/>
	</body>
</html>

$什么的是什么意思啊？今天第一次用JS写东西。[/quote] 是jquery的写法，jquery是js的一个库，学会它的语法，你可以很轻便地写出复杂功能的js，包括可以模拟动画效果

harderror 2013-07-03

打赏
举报

引用 3 楼 splendid_java 的回复:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script>
			$(function(){
				$('#imgs').click(function() {
				    $(this).animate({'top':'-=10px'});//向上移动10px
				}); 
			})
		</script>	
	</head>
	<body>
		<img src="top.jpg" id="imgs" style="position:absolute;top:100px;"/>
	</body>
</html>

$什么的是什么意思啊？今天第一次用JS写东西。

ZHOU西口 2013-07-03

打赏
举报


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>test.html</title>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
		<script>
			$(function(){
				$('#imgs').click(function() {
				    $(this).animate({'top':'-=10px'});//向上移动10px
				}); 
			})
		</script>	
	</head>
	<body>
		<img src="top.jpg" id="imgs" style="position:absolute;top:100px;"/>
	</body>
</html>

harderror 2013-07-03