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

我们在静态页面中可以用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. Marquee滚动字幕设置(转)

    <marquee >滚动文字 </marquee> 方向 <direction=#> #=left, right,up,down 方式<bihavior=#& ...

  2. [转] Python特殊语法：filter、map、reduce、lambda

    Python内置了一些非常有趣但非常有用的函数,充分体现了Python的语言魅力! filter(function, sequence):对sequence中的item依次执行function(ite ...

  3. iOS UIKit：Auto Layout

    @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css); @import url(/ ...

  4. memcached并发处理

    memcached(十八)并发原语CAS与GETS操作 Memcached 并发控制 CAS 协议 memcache控制高并发问题 使用memcached进行并发控制 memcached的最佳实践方案

  5. HTML 5 Audio/Video DOM buffered 属性

    1.实例1获取视频第一段缓冲范围部分,以秒计: myVid=document.getElementById("video1"); alert("Start: " ...

  6. C#生成验证码实例

    常用生成验证码实例封装: /// <summary> /// 生成内存位图 /// </summary> /// <param name="Code" ...

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

  8. 在eclipse下面搭建Clojure开发运行环境

    打开eclipse,点击菜单栏“help->Install New Software...", 然后,点击”add“, 在Location处输入 http://ccw.cgrand.n ...

  9. 【转】 iOS-Core-Animation-Advanced-Techniques(七)

    高效绘图.图像IO以及图层性能 高效绘图 原文:http://www.cocoachina.com/ios/20150106/10840.html 不必要的效率考虑往往是性能问题的万恶之源. ——Wi ...

  10. jQuery实现的向下推送图文信息滚动效果

    HTML 我们以新浪微博信息滚动为背景,html中包含了多条微博图文信息,结构如下: <div id="con"> <ul> <li> < ...