<!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. Linux上安装Hadoop集群(CentOS7+hadoop-2.8.3)

    https://blog.csdn.net/pucao_cug/article/details/71698903 1下载hadoop 2安装3个虚拟机并实现ssh免密码登录 2.1安装3个机器 2.2 ...

  2. window.open()弹出窗口被拦截

    之前有个需求是输入一些配置,然后点击预览,通过接口保存配置并返回预览页面链接,在新页面中打开链接.后来测试一直说没有新页面打开,我一看,原来是被浏览器拦截了. 原因如下: 浏览器只有在认为click和 ...

  3. RUCM简介

    一.动机 UCM:用例建模,主要用于结构化和文档需求方面. UCSs:用例规格说明书,通常是文本文档,所以描述中不可避免含有歧义. RUCM:限制性用例建模.目标 G1.使UCMs更加可理解并且更精确 ...

  4. (C/C++) Link List - C++ 版本

    利用C++寫一個基本的 Link list 練習,功能包含 pint list.CreatList.Insert.Delete.Reverse.Search.Clear.GetLen. 先建立相關的C ...

  5. Android RecyclerView组件和 Spinner(下拉列表框)

    1.RecyclerView <1>知识点介绍 RecyclerView 比 ListView 更高级且更具灵活性. 它是一个用于显示庞大数据集的容器,可通过保持有限数量的视图进行非常有效 ...

  6. C++_代码重用5-类模板

    如果两种类只是数据类型不同,而其他代码是相同的,与其编写新的类声明,不如编写一种泛型(独立于类型的)栈.然后将具体的类型作为参数传递给这个类.这样就可以使用通用的代码生成存储不同类型值的栈. 可以使用 ...

  7. [转] 【译】让人倾倒的 11 个 npm trick

    [From] https://segmentfault.com/a/1190000006804410 本文转载自:众成翻译译者:文蔺链接:http://www.zcfy.cc/article/1206 ...

  8. [转] 理解SVG transform坐标变换

    http://www.zhangxinxu.com/wordpress/2015/10/understand-svg-transform/

  9. maven-eclipse-plugin downloadSources downloadJavadocs

    <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-eclip ...

  10. css3 渐变色

    Firefox可以使用角度来设定渐变的方向,而webkit只能使用x和y轴的坐标. 渐变可以创建类似于彩虹的效果,低版本的浏览器使用图片来实现,CSS3将会轻松实现网页渐变效果 粘贴代码 <di ...