jQuery:mouseover and Increase the Size of an Image
<!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的更多相关文章
- jQuery mouseover,mouseout事件多次执行的问题处理
控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...
- jquery mouseover与mouseenter区别
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
- jQuery mouseover与mouseenter的区别
在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...
- jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别
mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...
- jquery中,size()和length()方法有啥区别
jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...
- jquery里面.length和.size()有什么区别
区别: 1.针对标签对象元素,比如数html页面有多少个段落元素<p></p>,那么此时的$("p").size()==$("p").l ...
- 第十七章：jQuery类库
javascript的核心API设计的很简单,但由于浏览器之间的不兼容性,导致客户端的API过于复杂.IE9的到来缓解了这种情况.然而使用javascript的框架或者工具类库,能简化通用操作,处理浏 ...
- jquery笔记（仅供个人参考）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- 解决tomcat启动 startup.bat的时候一闪而过（就是java环境变量的配置）
系统变量配置:(解决tomcat启动 startup.bat的时候一闪而过) JAVA_HOME C:\Program Files (x86)\Java\jdk1.7.0_25 =========== ...
- Python3用sys和time模块实现进度条
import sys import time def view_bar(num, total): rate = float(num) / float(total) rate_num = int(rat ...
- js自定义对象 (转)
原文地址:https://sjolzy.cn/js-custom-object.html 29 March 2010 9:53 Monday by 小屋 javascript进阶之对象篇 一,概述 在 ...
- Python之freshman01
列表与元组.字典 1.列表list:["ele1","ele2","ele3","ele0"] 列表是一组任意类型的值, ...
- tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册
tornado 08 数据库-ORM-SQLAlchemy-表关系和简单登录注册 引言 #在数据库,所谓表关系,只是人为认为的添加上去的表与表之间的关系,只是逻辑上认为的关系,实际上数据库里面的表之间 ...
- LeetCode74.搜索二维矩阵
74.搜索二维矩阵 描述 编写一个高效的算法来判断 m x n 矩阵中,是否存在一个目标值.该矩阵具有如下特性: 每行中的整数从左到右按升序排列. 每行的第一个整数大于前一行的最后一个整数. 示例 示 ...
- UVA - 11029 输出前三位
题意:给定\(a\)和\(n\),输出\(a^n\)的前三位和后三位 后三位快速幂 \(log_{10}(a^n)=n*log_{10}(a)=n*log_{10}(x*y),y<10,x mo ...
- Autofac构建
1.初始化 using System.Reflection; using System.Web; using System.Web.Mvc; using System.Configuration; u ...
- js去掉浏览器右键点击默认事件（+vue项目开启右键行为）
js去掉浏览器右键点击默认事件 1.阻止整个页面所有的右击事件 document.oncontextmenu = function(){ return false;} 2.特定的区域/元素 docum ...
- PIE SDK栅格拉伸控制
1. 功能简介 在我们的实际应用中,对于一般16bit或者更大比特深度的影像,像元值都是大于255的.这种情况下,RGB的显示器是不能够直接使用像元值进行显示的,需要将像元值换算到0~255的区间内以 ...