<!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的更多相关文章

  1. jQuery mouseover,mouseout事件多次执行的问题处理

    控制鼠标移上移下事件,在使用Jquery 的mouseover,mouseout事件时,元素内部含有其它元素,会造成该事件多次的触发的情况. 问题解析 在用到mouseover和mouseout事件来 ...

  2. jquery mouseover与mouseenter区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

  3. jQuery mouseover与mouseenter的区别

    在我们的页面中经常会用到mouseover与mouseout事件来给页面添加更好的渲染效果,但如果触发mouseover事件的元素有子元素的话,会造成闪烁的效果,看着很不舒服,这是因为mouseove ...

  4. jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  5. 曾经跳过的坑----jQuery mouseover与mouseenter,mouseout与mouseleave的区别

    mouseover与mouseenter 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件. 只有在鼠标指针穿过被选元素时,才会触发 mouseenter 事件. mouseou ...

  6. jquery中,size()和length()方法有啥区别

    jquery中,size()和length()方法有啥区别? size()是jQuery提供的函数,而length是属性(不带括号). jQuery提供的源代码是这样的: size: function ...

  7. jquery里面.length和.size()有什么区别

    区别: 1.针对标签对象元素,比如数html页面有多少个段落元素<p></p>,那么此时的$("p").size()==$("p").l ...

  8. 第十七章：jQuery类库

    javascript的核心API设计的很简单,但由于浏览器之间的不兼容性,导致客户端的API过于复杂.IE9的到来缓解了这种情况.然而使用javascript的框架或者工具类库,能简化通用操作,处理浏 ...

  9. jquery笔记（仅供个人参考）

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 八大排序算法的python实现（六）归并排序

    代码: #coding:utf-8 #author:徐卜灵 def merge(left,right): i,j = 0,0 result = [] while i < len(left) an ...

  2. python基础之条件判断

    一.简单的if语句 举例 if money > 10000: print '我们去旅游吧' #左侧一定要有缩进,一般4个空格 print '请输入学生的考试成绩' score = print ( ...

  3. 修改两行代码，让nginx支持phpinfo模式

    Nginx服务器默认不支持pathinfo, 在需要pathinfo支持的程序中(如thinkphp),则无法支持”/index.php/Home/Index/index”这种网址. 网上流传的解决办 ...

  4. docker下ubutun没有ifconfig命令问题

    解决: apt-get update #更新apt-get apt install net-tools       # ifconfig apt install iputils-ping     # ...

  5. Centos7.4 更换国内yum源

    1.进入yum源配置文件夹.(配置之前先看看有没有安装wget命令呢,没的话可以先用当前的yum源安装一下再说.yum -y install wget) 2.转到配置文件目录  cd /etc/yum ...

  6. JS原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...

  7. url 路径的拼接

    url  路径的拼接 刚开始做项目总是被路径所困扰,不知道何时该拼接,何时不拼接,怎么拼接,如何拼接,有像地址栏拼接一样的,又在跳转页面拼接的,还有在 a 标签中 href 中拼接的 ,当时做的时候一 ...

  8. 【转】idea新建项目文件名为红色的解决办法

    idea如果当前project用了版本控制器,其下面新建的所有的项目默认都是加入到版本控制里面,所以项目名称和文件都是红色的. 解决办法: ctrl + alt + s 进入设置界面,–>ver ...

  9. 005 Genymotion模拟器的使用和逍遥模拟器的使用

    1.Genymotion模拟器 (1)Genymotion Device Manager的图标 重启软件Android Studio后,选择菜单栏“View--Toolbar”,让工具栏显示出来,可以 ...

  10. Oracle sql 中的 ALL,ANY,SOME

    [转自] http://www.itpub.net/thread-1355835-1-1.html any和some是等价的,其与all的前面都只能是比较符号,即=, !=, >, <, ...