当把鼠标放在一张小图片上时，图片会自动放大，离开时它变小。

我们在静态页面中可以用jQuery来操作。如下为html中的源码。

<!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>

    <title></title>

    <script src="js/jquery-2.0.2.js" type="text/javascript"></script>

    <script type="text/javascript">

        $(function () {

            $("#table1 img").mouseover(function (e) {

            $(this).animate({ "width": "200", "height": 200 }, 1000);

            $("#table1 img").not(this).animate({ "width": "50", "height": "50" });

            });

            $("#table1 img").click(function (e) {

                $("#div img").attr("src", $(this).attr("src"));

                $("#div").css("display", "").css("left", e.pageX).css("top", e.pageY);

            });

        });

    </script>

</head>

<body>

<table id="table1" border="0" cellspacing="0" cellpadding="0"  >

    <tr>

        <td><img src="objsrc/imgs/1.jpg" width="50" height="50" /></td>

        <td><img src="objsrc/imgs/2.jpg" width="50" height="50" /></td>

        <td><img src="objsrc/imgs/3.jpg" width="50" height="50" /></td>

        <td><img src="objsrc/imgs/4.jpg" width="50" height="50" /></td>

        <td><img src="objsrc/imgs/5.jpg" width="50" height="50" /></td>

        <td><img src="objsrc/imgs/6.jpg" width="50" height="50" /></td>

    </tr>

</table>

<div id="div" style="display:none;position:absolute">

       <img src="" />

    </div>

</body>

</html>

截图：

在用repeater显示数据库中的图片时，我们也可以用jquery方法把鼠标移动到图片上放大 。基本的操作方式和上例中的连接数据库是一样的，此处省略操作步骤。这里面有两个Repeater,一个为当鼠标在图片上移动时显示人的名称，另一个为自动放大图片。

它的源码为：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ZoomImgs.aspx.cs" Inherits="Repeater.ZoomImgs" %>

<!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 runat="server">

    <title></title>

    <script src="js/jquery-2.0.2.js" type="text/javascript"></script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <asp:ObjectDataSource ID="ObjectDataSource1" runat="server"

            DeleteMethod="Delete" InsertMethod="Insert"

            OldValuesParameterFormatString="original_{0}" SelectMethod="GetData"

            TypeName="Repeater.objsrc.DAL.DataSetUserTableAdapters.T_UsersTableAdapter"

            UpdateMethod="Update">

            <DeleteParameters>

                <asp:Parameter Name="Original_id" Type="Int32" />

            </DeleteParameters>

            <InsertParameters>

                <asp:Parameter Name="name" Type="String" />

                <asp:Parameter Name="age" Type="Int32" />

                <asp:Parameter Name="imgname" Type="String" />

            </InsertParameters>

            <UpdateParameters>

                <asp:Parameter Name="name" Type="String" />

                <asp:Parameter Name="age" Type="Int32" />

                <asp:Parameter Name="imgname" Type="String" />

                <asp:Parameter Name="Original_id" Type="Int32" />

            </UpdateParameters>

        </asp:ObjectDataSource>

        <asp:Repeater ID="Repeater1" runat="server" DataSourceID="ObjectDataSource1">

          <HeaderTemplate><table id="imgtable"><tr></HeaderTemplate>

          <ItemTemplate>

            <td><img src='objsrc/imgs/<%#Eval("imgname")%>'  a1='<%#Eval("name") %>' a2='<%#Eval("age") %>' /></td>

          </ItemTemplate>

          <FooterTemplate></tr></table></FooterTemplate>

        </asp:Repeater>

        <br />

        <br />

        <asp:Repeater ID="Repeater2" runat="server" DataSourceID="ObjectDataSource1">

        <HeaderTemplate><table id="zoomtable"><tr></HeaderTemplate>

        <ItemTemplate>

        <td><img src='objsrc/imgs/<%#Eval("imgname") %>' width="" height="" /></td>

        </ItemTemplate>

        <FooterTemplate></tr></table></FooterTemplate>

        </asp:Repeater>

    <script type="text/javascript">

        $("#zoomtable img").mouseover(function () {

            /*$(this).attr("width", 200).attr("height", 200);*/

            $(this).animate({ "width": "", "height": "" }, "slow");

            $("#zoomtable img").not(this).animate({"width":"","height":""});

        });

    </script>

    </div>

    <div id="imgdiv" style="position:absolute;display:none;border:1px;background-color:Yellow">

      <p >姓名：<span id="span1"></span></p>

      <p >年龄：<span id="span2"></span></p>

    </div>

    </form>

    <script type="text/javascript">

        $("#imgtable img").mousemove(function (e) {

            $("#span1").text($(this).attr("a1"));

            $("#span2").text($(this).attr("a2"));

            $("#imgdiv").css("top",e.pageY).css("left", e.pageX).show();

        });

    </script>

</body>

</html>

截图：

5. repeater图片放大的更多相关文章

  1. (JS+CSS)实现图片放大效果

    代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...

  2. jQuery Lightbox图片放大预览

    简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...

  3. 网页mp3语音展示，点击图片放大，点击图片跳转链接，调表格

    查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...

  4. jq随手写图片放大

    html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...

  5. 推荐两款简单好用的图片放大jquery插件

    一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...

  6. js图片放大效果

    实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.

  7. magento中如何实现产品图片放大效果

    Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...

  8. 41.Android之图片放大缩小学习

    生活中经常会用到图片放大和缩小,今天简单学习下. 思路:1.添加一个操作图片放大和缩小类;  2. 布局文件中引用这个自定义控件;  3. 主Activity一些修改. 代码如下: 增加图片操作类: ...

  9. 图片放大方法、、菜单栏的位置随滚轮移动固定方法、、<a></a>去外层虚线方法：a:focus { outline:none; -moz-outline:none;}；

    图片放大方法一: <style type="text/css">.xt{ width:230px; height:230px;}.tp{ width:230px; he ...

随机推荐

  1. android 26 设置项目有多个入口Activity。

    第一个activity package com.sxt.day04_11; import android.os.Bundle; import android.app.Activity; import ...

  2. ASP.NET MVC5框架揭秘 学习笔记01

    1.自治视图 在早期(作者也没说明是多早,自己猜吧),我们倾向于将所有与UI相关的操作糅合在一起(现在我身边还有很多人这样做),这些操作包括UI界面的呈现. 用户交互操作的捕捉与响应(UI处理逻辑). ...

  3. HTML5 Media事件

    Media 事件 由媒介(比如视频.图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>.<embed>.<img>.< ...

  4. Android Animation学习 实现 IOS 滤镜退出动画

    IOS的用户体验做的很好,其中一点很重要的地方就是动画效果. 最近在学习Android的Animation,简单实现了一个IOS相机滤镜退出的动画: 布局文件:activity_animation_d ...

  5. Tomcat-java.lang.IllegalArgumentException: Document base F:apps does not exist or is not a readable

    启动Tomcat的时候,报错:java.lang.IllegalArgumentException: Document base F:apps does not exist or is not a r ...

  6. u盘复制提示文件过大

    应该有很多个朋友也遇到过同样的问题,就是我们的u盘的明明可用的空间还有很多,甚至一个空的16g的u盘,但从window等操作系统向u盘拷贝文件的时候,却不能容下诸如iso4g的镜像文件,难道是生产u盘 ...

  7. C# 面向对象编程的继承性-多继承

    多继承 如果要使用多继承,需要使用接口,因为C#中的类只支持单继承,而接口支持多继承,实现多继承时,继承的多个接口中间用逗号(,)隔开. 说明: 实现多继承时,继承的可以是多个接口,也可以是一个类及多 ...

  8. Oracle 10G强大的SQL优化工具：SQL Tuning Advisor

    p { margin-bottom: 0.25cm; direction: ltr; color: rgb(0, 0, 0); line-height: 120%; orphans: 2; widow ...

  9. jQuery慢慢啃之事件（七）

    1.ready(fn)//当DOM载入就绪可以查询及操纵时绑定一个要执行的函数. $(document).ready(function(){ // 在这里写你的代码...}); 使用 $(docume ...

  10. Mobile开发之meta篇

    Mobile开发之meta篇 <meta name="viewport" content="width=device-width, initial-scale=1, ...