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

我们在静态页面中可以用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 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应

    版权声明:本文为博主原创文章,未经博主允许不得转载.  Android 仿PhotoShop调色板应用(四) 不同区域颜色选择的颜色生成响应  上一篇讲过了主体界面的绘制,这里讲解调色板应用中的另外一 ...

  2. WCF - 绑定

    从整个基础架构来看 WCF可分为服务模型层和信道层 模型层提供了一个统一的可扩展的编程模型 而信道层提供了对请求信息的接收和处理 而作为WCF通信的三要素之一的绑定 是它实现了组成整个信道层的信道栈 ...

  3. 【转载】ASP.NET支持多语言

    ASP.NET 2.0中实现:1.使用工具自动生成本地化资源(LocalResources) 首先建立一个WEB工程,如图所示:双击Default.aspx,切换到[设计]视图,从工具箱里拖一个But ...

  4. eclipse下将普通的java工程转换成web工程

    开发过程中需要对普通的java工程转换成动态的web工程,网络上查询了资料很简单的几步操作就可以搞定,操作步骤如下: 编辑.project 修改以下配置 <nature>org.eclip ...

  5. CakePHP之Model

    模型 模型在应用程序中是作为业务层而存在的(怎么感觉是数据层......).这就意味着,模型应当负责管理几乎所有涉及数据的事情,其合法性,以及你的业务领域中数据在工作流程中的演化和互动 . 通常模型类 ...

  6. 用GitHub Pages免费空间搭建Blog

    前言   其实之前就知道可以用GitHub Pages搭建静态博客,不过之前一直忙着爬手册撸代码==,昨天终于把前端各种手册里的入门教程撸的差不多了(CSS布局撸的我要吐了好嘛),于是把代码什么的放一 ...

  7. angularjs hover

    <ul class="pdl-15"><li ng-repeat="order in vm.selectOrders" ng-class=&q ...

  8. 使用EMMET中的小坑

    使用EMMET写HTML的时候,是一个非常爽的事情.但是今天我使用时,发现一个小坑.以前倒也没有注意,不过需要非常的小心. form[action="/process" metho ...

  9. oracle 中查看一张表是否有主键，主键在哪个字段上的语句怎么查如要查aa表，

    select a.constraint_name, a.column_name from user_cons_columns a, user_constraints b where a.constra ...

  10. 初识sass框架

    编写过页面的开发者都知道css这个东西,究其原意,也就是层叠样式表,我们页面的三大结构,html css javascript,其中html负责主要的页面结构,css就负责主要的页面样式,而我们的js ...