5. repeater图片放大
当把鼠标放在一张小图片上时,图片会自动放大,离开时它变小。
我们在静态页面中可以用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图片放大的更多相关文章
- (JS+CSS)实现图片放大效果
代码很简单,在这里就不过多阐述,先上示例图: 实现过程: html部分代码很简单 <div id="outer"> <p>点击图片</p> &l ...
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
- 网页mp3语音展示,点击图片放大,点击图片跳转链接,调表格
查看mp3语音 <td class="value"><embed src="${sounds.soundName}" type="a ...
- jq随手写图片放大
html: <img id="img1" src="<?php echo $info->business_licence_img; ?>" ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- js图片放大效果
实现购物网站里的图片放大效果,jqzoom很好用.今天才接触它,很快就上手了.看了一个示例,在放大图像上方貌似有水印,后经排查,原来是图片的标题,然后设置title为false,搞定.
- magento中如何实现产品图片放大效果
Magento列表页用jQuery实现产品图片放大效果今天看到个网站,鼠标移到列表页的产品图片上,旁边会弹出一个大图,感觉不错,就自己在Magento里写了个.先看看效果 这个效果比较好实现,打开li ...
- 41.Android之图片放大缩小学习
生活中经常会用到图片放大和缩小,今天简单学习下. 思路:1.添加一个操作图片放大和缩小类; 2. 布局文件中引用这个自定义控件; 3. 主Activity一些修改. 代码如下: 增加图片操作类: ...
- 图片放大方法、、菜单栏的位置随滚轮移动固定方法、、<a></a>去外层虚线方法:a:focus { outline:none; -moz-outline:none;};
图片放大方法一: <style type="text/css">.xt{ width:230px; height:230px;}.tp{ width:230px; he ...
随机推荐
- C# 二进制替换第一弹 byte 数组替换
在做通讯相关的数据操作时常常须要用到 byte[] byte 数组替换操作.比方协义转换相关的 如今提供了几种替换的方法 /// <summary> /// 二进制数据 操作 /// ...
- Java基础知识强化之集合框架笔记24:ArrayList存储自定义对象并遍历
1. ArrayList存储自定义对象并遍历 2. 代码示例: Student.java,如下: package cn.itcast_01; public class Student { privat ...
- 9.29noip模拟试题
环上的游戏(cycle) 有一个取数的游戏.初始时,给出一个环,环上的每条边上都有一个非负整数.这些整数中至少有一个0.然后,将一枚硬币放在环上的一个节点上.两个玩家就是以这个放硬币的节点为起点开始这 ...
- 使用Java BigDecimal进行精确运算
首先我们先来看如下代码示例: public class Test_1 { public static void main(String[] args) { System.out ...
- Android 安全性和权限
自定义权限 permission <permission android:name="com.android.launcher.permission.INSTALL_SHORTCUT& ...
- maven常见命令总结
1.maven vm配置 -Xms512m -Xmx1024m -XX:PermSize=256m 2.启动tomcat clean package -Dpackage.environment=de ...
- wpf 窗体中显示当前系统时间
先看一下效果: 这其实是我放置了两个TextBlock,上面显示当前的日期,下面显示时间. 接下来展示一下代码: 在XAML中: <StackPanel Width="205" ...
- [转]Delphi执行CMD命令
今天看到有人在问用代码执行CMD命令的问题,就总结一下用法,也算做个备忘. Delphi中,执行命令或者运行一个程序有2个函数,一个是winexec,一个是shellexecute.这两个大家应该都见 ...
- 记一个问题的AC
今天突然做一道LCT的染色问题的时候突然想到一个两个月前一道没有AC的题目. 链接 大意是,给一个长度为10^4的序列,最多有255个不同的数字,有最多10^5次方个询问,对于每个询问 l,r 输出[ ...
- 【POJ2887】【块状链表】Big String
Description You are given a string and supposed to do some string manipulations. Input The first lin ...