<!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
959
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
<!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>
目录
相关文章
|
8月前
|
JavaScript
索引
容器
|
6月前
|
JavaScript
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
jQuery 坐标值操作 offset()、position()、scrollTop()、scrollLeft()
56
0
0
|
JavaScript
前端开发
js显示隐藏 display visibility以及jquery里的show hide的区别
js显示隐藏 display visibility以及jquery里的show hide的区别
178
0
0
|
Web App开发
前端开发
容器
|
Web App开发
前端开发
JavaScript
|
JavaScript
drag & resize元素的jQuery实现
1309
0
0
|
JavaScript
搜索推荐
jQuery的attr方法处理checkbox的问题
现象
使用了 jQuery 1.10 的版本，想实现 checkbox 的全部选中和全部取消选中，使用了 attr 的方法，如下：
$(elem).attr(“checked”)
测试过程中发现，第一次从未选中状态变为选中，再从选中变为未选中，是可以的。
1084
0
0
|
JavaScript
前端开发
jquery hide和show方法
html 元素的显示和隐藏hide() 如果被选的元素已被显示，则隐藏该元素。
show() 如果被选的元素已被隐藏，则显示该元素。
$(document).ready(function(){
$(".
909
0
0
|
前端开发
容器
CSS中float和Clear的使用
CSS中float和Clear的使用
本文和大家重点讨论一下CSS中Float和Clear属性的使用，一个float对象可以居左或居右，一个设置为float的对象，将根据设置的方向，左移或右移到其父容器的边界，或其前面的float对象的边界，而紧随其后的非float对象或内容，则包围在其相反的方向。
1140
0
0
热门文章
最新文章
1
【实战】锐捷AC+AP配置WLAN基本服务系列
2
丰富、连接、待集成—MaxCompute 生态再出发
3
Tomcat 7.0 64位免安装解压版 安装及配置
4
securecrt克隆会话与sshd 的 MaxSessions
5
安卓支持RISC-V架构的技术剖析
6
生成文件的另一种思路——共享文件同步
7
高阶自定义View --- 粒子变幻、隧道散列、组合文字
8
奇虎团队不到1分钟攻破谷歌Pixel 斩获12万美元奖金
9
npm使用指南
10
Visual Studio 2010快捷键大全
1
Smolagents：三行代码就能开发 AI 智能体，Hugging Face 开源轻量级 Agent 构建库
120
2
Cognita：小白也能搭建 RAG 系统，提供交互界面的开源模块化 RAG 框架，支持多种文档检索技术
28
3
SocraticLM：通过 AI 提问引导学生主动思考，中科大与科大讯飞联合推出苏格拉底式教育大模型
26
4
SoulChat2.0：低成本构建 AI 心理咨询师，华南理工开源心理咨询师数字孪生大语言模型
26
5
TryOffAnyone：快速将模特服装图还原为平铺商品图，生成标准化的服装展示效果
28
6
VITRON：开源像素级视觉大模型，同时满足图像与视频理解、生成、分割和编辑等视觉任务
30
7
Memory Layers：如何在不增加算力成本的情况下扩大模型的参数容量？Meta 开源解决方法
25
8
ImBD：复旦联合华南理工推出 AI 内容检测模型，快速辨别文本内容是否为 AI 生成
23
9
《量子硬件制造：降低退相干率与错误率的策略》
22
10
《量子计算硬件：关键指标对人工智能应用性能的影响》
89