• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >ASP.NET > asp.net下用js实现鼠标移至小图,自动显示相应大图

asp.net下用js实现鼠标移至小图,自动显示相应大图

作者: 字体:[增加 减小] 来源:互联网 时间:2017-05-11

通过本文主要向大家介绍了js获取asp.net控件,js asp.net,node.js asp.net,js调用asp.net方法,asp.net等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图 

.Net精简版本 

<script language="JavaScript">     
   function GetShowImg(imgfile)  
   { 
    document.all("ShowImage").src = "/semir/images/"+ imgfile; 

   }       
  </script>  
 //DataList绑定 
 <asp:datalist id="DlSides" runat="server" OnItemCommand="DlSides_ItemCommand" RepeatDirection="Horizontal" 
      RepeatColumns="3" DataKeyField="SideID" CssClass="semirText">       
      <ItemTemplate> 
       <a onmouseover="GetShowImg('<%# DataBinder.Eval(Container.DataItem, "sidePath")%>')"><IMG style="WIDTH: 45px; HEIGHT: 56px" alt="" src='/semir/images/small<%# DataBinder.Eval(Container.DataItem, "sidePath")%>' border=0 ></a> 
                </ItemTemplate> 
     </asp:datalist> 


// 显示相应大图 
<img name="ShowImage">  

ASP完整版 

<script language="JavaScript"> 
    function ImagePreload()  
    {  
    var args = ImagePreload.arguments; 
    document.ImgPreArray = new Array(args.length); 
    for(var i=0; i<args.length; i++)  
    { 
    document.ImgPreArray[i] = new Image; 
    document.ImgPreArray[i].src = "admin/upfile/newbook/"+ args[i]; 
    } 
    } 
     function fitSize() { 
      var a, b; 
      var imgobj = document.all("ShowImage"); 
      var oldimg = new Image(); 
      oldimg.src = imgobj.src; 
      var dw = oldimg.width; 
      var dh = oldimg.height; 
      if(imgobj == null) { 
       setTimeout("fitSize()", 50); 
       return; 
      } 
      if(imgobj.offsetWidth == 0) { 
       setTimeout("fitSize()", 50); 
       return; 
      } 
      var maxW = 300; 
      var maxH = 270; 
      if(dw>maxW || dh>maxH) { 
       a = dw/maxW; 
       b = dh/maxW;  
       if(b>a) a=b; 
       dw = dw/a; 
       dh = dh/a; 
      } 
      if(dw > 0 && dh > 0) { 
       imgobj.width = dw; 
       imgobj.height = dh; 
      } 
     } 
     function GetShowImg(imgtext, imgfile) { 
      document.all("ShowImgText").innerHTML = imgtext; 
      document.all("ShowImage").src = "admin/upfile/newbook/"+ imgfile; 
      document.all("ShowImage").width = 267; 
      document.all("ShowImage").height = 267; 
      //fitSize();'show picture size 
     } 
     function ShowTextDetail(n) { 
      for (i=1; i<5; i++) { 
       document.all("TextDetail"+i).style.display = "none"; 
      } 
      document.all("TextDetail"+n).style.display = ""; 
      for (i=1; i<4; i++) { 
       document.all("TitleDetail"+i).className = "shopTabOff"; 
      } 
      if (n < 4) { 
       document.all("TitleDetail"+n).className = "shopTabOn"; 
      } 
     } 
      </script> 
      <script language="JavaScript" for="window" event="onload"> 
     ImagePreload('<%=rs("picture")%>'); 
      </script> 
'---------调用-显示------- 
 <%if rs("picture")<>"" then %> 
                        <a style="cursor:hand">  
                        <img name="ShowImage" src="admin/upfile/newbook/<%=rs("picture")%>" border="0" width="267" height="267">  
      <!--  <img name="ShowImage" src="../upimages/F_060524_000613_46398.jpg" border=0 onload="fitSize();"> --> 
                        </a>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • ASP.NET数据绑定控件详解
  • Asp.net中获取DataTable选择第一行某一列值
  • asp.net分页控件使用详解【附实例下载】
  • asp.net 获取数据库连接字符串
  • 解析asp.net的分页控件
  • ASP.NET中控件的EnableViewState属性及彻底禁用
  • ASP.NET的广告控件AdRotator用法分析
  • asp.net控件DataList分页用法
  • 在ASP.NET 2.0中操作数据之三十二:数据控件的嵌套
  • 在ASP.NET 2.0中操作数据之十九:给编辑和新增界面增加验证控件

相关文章

  • 2017-05-11ASP.NET打开新页面而不关闭原来的页面 实例代码
  • 2017-05-11asp.net Linq把数据导出到Excel的代码
  • 2017-05-11在ASP.NET 2.0中操作数据之十一:基于数据的自定义格式化
  • 2017-05-11asp.net利用母版制作页脚效果
  • 2017-05-11一步一步学asp.net Ajax登录设计实现解析
  • 2017-05-11asp.net实现数据从DataTable导入到Excel文件并创建表的方法
  • 2017-05-11CommunityServer又称CS论坛的相关学习资料
  • 2017-05-11.net微信服务号发送红包
  • 2017-05-11asp.net checkbox 动态绑定id GridView删除提示
  • 2017-05-11详述ASP.Net中页面之间传参方法

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • asp.net XMLHttpRequest实现用户注册前的验证
    • win7系统下 vs2010 调式就关闭要重启处理方法
    • Asp.net中通过Button打开另一个的frm
    • ASP.NET设置404页面返回302HTTP状态码的解决方法
    • C#中的Equals、RefrenceEquals和==的区别与联系
    • asp.net下url传递中文的解决方案
    • 在ASP.NET 2.0中操作数据之十:使用 GridView和DetailView实现的主/从报表
    • 在ASP.NET 2.0中操作数据之七十:配置数据库连接和命令等级设置
    • Asp.net+jquery+.ashx文件实现分页思路
    • 十分钟搞定多图片/文件服务器

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有