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

我们在静态页面中可以用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. The BINARY and VARBINARY Types

    mysql> CREATE TABLE t (c BINARY()); Query OK, rows affected (0.21 sec) mysql> INSERT INTO t SE ...

  2. Android 布局

    转自:http://www.cnblogs.com/chiao/archive/2011/08/24/2152435.html Android布局是应用界面开发的重要一环,在Android中,共有五种 ...

  3. iOS UIKit：App

    1.App生命周期 IOS架构是由许多设计模式实现,如model-view-controller 和 delegation模式. 1.1 main函数 与其它框架类似,IOS框架的入口也是从main函 ...

  4. mac 终端常见指令

    基本命令 1.列出文件 ls 参数 目录名        例: 看看驱动目录下有什么:ls /System/Library/Extensions参数 -w 显示中文,-l 详细信息, -a 包括隐藏文 ...

  5. isAssignableFrom与instanceof的区别

    1.isAssignableFrom针对的是class对象: 2.instanceof是实例. isAssignableFrom是用来判断一个类Class1和另一个类Class2是否相同或是另一个类的 ...

  6. MD5 密码破解 碰撞 网站

    MD5反向查询网站 http://www.cmd5.com/ 文件MD5值查询网站 http://www.atool.org/file_hash.php 个人对密码破解的理解 1.使用MD5对密码加密 ...

  7. hadoop集群环境搭建之安装配置hadoop集群

    在安装hadoop集群之前,需要先进行zookeeper的安装,请参照hadoop集群环境搭建之zookeeper集群的安装部署 1 将hadoop安装包解压到 /itcast/  (如果没有这个目录 ...

  8. HTML5移动开发中的input输入框类型

    HTML5规范引入了许多新的input输入框类型 在HTML5移动开发中,通过这些新的输入框类型来显示定制后的键盘布局,用户体验更好,更容易填写各种表单 本文中,实测手机为肾4S与米4 数字类型num ...

  9. 传统的log4j实战

    /** * */ package log4j; import org.apache.log4j.Logger; import org.apache.log4j.PropertyConfigurator ...

  10. Linux下JDK环境变量配置

    JDK官方下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 我的下载路 ...