想实现的功能效果是
在一张图片上 鼠标移上去图片就变大,鼠标移开了 图片变回原样。大虾本请问用jquery 怎么实现。
$("#imagesid").mouseover(function(){
$(this).css{width:'500px;', height:'900px;'};
});
<a href="#"><img src="1.jpg" style="height:65px; width:132px;" id="imagesid"/></a>
我上面写的报错,不行。
------解决方案--------------------
- JScript code
<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>
------解决方案--------------------
- 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></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>
------解决方案--------------------
楼上给的是范例,LZ要学会变通处理。
如果你是循环出来的,每张图片的ID不同,而楼上的范例里只针对一个ID起作用。
根据需要你可以把ID部分改下
例如 1:图片都在一个id为 imgGroup 的DIV中,那么你可以改写成
$("#imgGroup img").mouseover(function(){ ------------- })
2:给每个图片加一个class
$(".class").mouseover(function(){ ------------- })
方式随个人喜欢。