jquery mouseover 事件疑问

a2547709540 2012-06-27 01:40:53
想实现的功能效果是

在一张图片上 鼠标移上去图片就变大,鼠标移开了 图片变回原样。大虾本请问用jquery 怎么实现。



$("#imagesid").mouseover(function(){
$(this).css{width:'500px;', height:'900px;'};
});



<a href="#"><img src="1.jpg" style="height:65px; width:132px;" id="imagesid"/></a>

我上面写的报错,不行。
...全文
201 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
a2547709540 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 11 楼 的回复:]
楼上给的是范例,LZ要学会变通处理。
如果你是循环出来的,每张图片的ID不同,而楼上的范例里只针对一个ID起作用。
根据需要你可以把ID部分改下
例如 1:图片都在一个id为 imgGroup 的DIV中,那么你可以改写成
$("#imgGroup img").mouseover(function(){ ------------- })
2:给每个图片加一个class
$(".……
[/Quote]

哈哈,谢谢大家,我摸索出来了,实现 该效果了。
a2547709540 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 11 楼 的回复:]
楼上给的是范例,LZ要学会变通处理。
如果你是循环出来的,每张图片的ID不同,而楼上的范例里只针对一个ID起作用。
根据需要你可以把ID部分改下
例如 1:图片都在一个id为 imgGroup 的DIV中,那么你可以改写成
$("#imgGroup img").mouseover(function(){ ------------- })
2:给每个图片加一个class
$(".……
[/Quote]
----------------------
求代码啦,大虾。。。。。。在线等。
a2547709540 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 11 楼 的回复:]
楼上给的是范例,LZ要学会变通处理。
如果你是循环出来的,每张图片的ID不同,而楼上的范例里只针对一个ID起作用。
根据需要你可以把ID部分改下
例如 1:图片都在一个id为 imgGroup 的DIV中,那么你可以改写成
$("#imgGroup img").mouseover(function(){ ------------- })
2:给每个图片加一个class
$(".……
[/Quote]
---------------------
大虾,代码怎么写呀,不知道怎么写的,你那样
kinghome 2012-06-27
  • 打赏
  • 举报
回复
楼上给的是范例,LZ要学会变通处理。
如果你是循环出来的,每张图片的ID不同,而楼上的范例里只针对一个ID起作用。
根据需要你可以把ID部分改下
例如 1:图片都在一个id为 imgGroup 的DIV中,那么你可以改写成
$("#imgGroup img").mouseover(function(){ ------------- })
2:给每个图片加一个class
$(".class").mouseover(function(){ ------------- })

方式随个人喜欢。

licip 2012-06-27
  • 打赏
  • 举报
回复
+1[Quote=引用 1 楼 的回复:]
ni de 你的css方法写错了 至少应该是css({width:"100px",height:"100px"});这样啊!!
[/Quote]
a2547709540 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 7 楼 的回复:]
JScript code

<script type="text/javascript">
<!--
$(function(){
$("#imagesid").mouseover(function(){
$(this).width(500).height(900);
})……
[/Quote]
--------------
奇怪了,那个img 图片是动态循环显示不同图片的,但是我移到第一张图片就有效果,别的就没有那效果。
三石-gary 2012-06-27
  • 打赏
  • 举报
回复
<!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>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<style>
.a
{
width: 300px;
height: 900px;
}
img
{
height: 65px;
width: 132px;
}
</style>
<script>
$(function () {
$("#imagesid").mouseover(function () {
$(this).addClass('a');

}).mouseleave(function () {
$(this).removeClass('a');
});

})
</script>
</head>
<body>
<a href="#">
<img src="1.jpg" id="imagesid" /></a>
</body>
</html>
daichangfu 2012-06-27
  • 打赏
  • 举报
回复
  	<script type="text/javascript">
<!--
$(function(){
$("#imagesid").mouseover(function(){
$(this).width(500).height(900);
}).mouseout(function(){
$(this).width(132).height(65);
});
})
//-->
</script>
<a href="#"><img src="images/xu_xi_yuan[1].jpg" style="height:65px; width:132px;" id="imagesid"/></a>
a2547709540 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 5 楼 的回复:]
HTML code

<!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>
<title>……
[/Quote]
-------------------
大虾,那鼠标移开的时候变回原图片大小呢?
三石-gary 2012-06-27
  • 打赏
  • 举报
回复
<!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>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
$(function () {
$("#imagesid").mouseover(function () {
$(this).css({width:"300px",height:"900px"});
});

})
</script>
</head>
<body>
<a href="#">
<img src="1.jpg" style="height: 65px; width: 132px;" id="imagesid" /></a>
</body>
</html>
乌镇程序员 2012-06-27
  • 打赏
  • 举报
回复
$(document).ready( function() {
$("#imagesid").mouseover( function() {
$(this).css({'width':'500px', 'height':'900px'});
}).mouseout( function() {
$(this).css({'width': '', 'height': ''});
});
});
a2547709540 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 的回复:]
引用 1 楼 的回复:

ni de 你的css方法写错了 至少应该是css({width:"100px",height:"100px"});这样啊!!

+1
[/Quote]
--------------------
还是实现不了那效果。
鼠标移到图片上去,不会变大的?
三石-gary 2012-06-27
  • 打赏
  • 举报
回复
[Quote=引用 1 楼 的回复:]

ni de 你的css方法写错了 至少应该是css({width:"100px",height:"100px"});这样啊!!
[/Quote]
+1
d945332077 2012-06-27
  • 打赏
  • 举报
回复
ni de 你的css方法写错了 至少应该是css({width:"100px",height:"100px"});这样啊!!

87,901

社区成员

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

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