<!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 content="text/html; charset=utf-8" http-equiv="Content-Type" />
<meta name="author" content="geovindu,塗聚文"/>
<title>jQuery:mouseover and Increase the Size of an Image</title>
<style type="text/css">
.imgdiv img
{
height:100px;
width:100px;
}
.imgdiv
{
background-color:White;
margin-left:auto;
margin-right:auto;
padding:10px;
border:solid 0px #c6cfe1;
height:500px;
width:450px;
}
</style>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
//塗聚文 2013 07 23 修改
//鼠標移動到層中的圖片自動放大
$(function() {
$("#imgdiv img").mouseover(function(e) {
var newImg = '<img src='
+ $(this).attr("src") + '></img>';
$('#ladiv')
.html($(newImg)
.animate({ height: '300', width: '450' }, 1500));
});
$("#imgdiv img").mouseout(function(e) {
var newImg = '<img src='
+ $(this).attr("src") + '></img>';
$('#ladiv')
.html($(newImg)
.animate({ height: '0', width: '0' }, 10));
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="imgdiv" id="imgdiv">
<h2>mouseover on the thumbnail to view a large image</h2>
<br />
<img src="pictures/1.jpg" alt="" />
<img src="pictures/2.jpg" alt="" />
<img src="pictures/3.jpg" alt="" />
<img src="pictures/4.jpg" alt="" />
<hr /><br />
<div id="ladiv"></div>
</div>
</form></body>
</html>
jQuery:mouseover and Increase the Size of an Image
2013-07-23
951
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
<!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>
目录
相关文章
|
JavaScript
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
47
0
0
|
JavaScript
前端开发
js显示隐藏 display visibility以及jquery里的show hide的区别
js显示隐藏 display visibility以及jquery里的show hide的区别
167
0
0
|
JavaScript
jquery获取,赋值img的src值..
1016
0
0
|
Web App开发
前端开发
JavaScript
|
JavaScript
drag & resize元素的jQuery实现
1304
0
0
|
JavaScript
前端开发
|
JavaScript
jquery给input标签添加data-options属性
//原生JS实现document.getElementById('startPrice').setAttribute("data-options", "required:false,validType:'number',validType:'length[1,12]'");
//jquery实现$('#startPrice').
2191
0
0
|
JavaScript
前端开发
jquery hide和show方法
html 元素的显示和隐藏hide() 如果被选的元素已被显示，则隐藏该元素。
show() 如果被选的元素已被隐藏，则显示该元素。
$(document).ready(function(){
$(".
899
0
0
|
JavaScript
前端开发
jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
jquery中innerWidth()，outerWidth()，outerWidth(true)和width()的区别
var a = 元素本身的宽度；
width() = a；
innerWidth() = a+padding;
outerWidth() = a+padding+border;...
975
0
0
|
JavaScript
Java
UED
jquery事件-resize()方法
2602
0
0