图片的局部放大的效果实现

最新推荐文章于 2016-03-29 13:41:30 发布

zengxie

最新推荐文章于 2016-03-29 13:41:30 发布

阅读量1.4k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/zengxie/article/details/2450933

本文介绍了一个基于ASP.NET的产品展示系统，该系统通过C#后端逻辑实现了产品数据的加载，并运用JavaScript实现了图片预览功能，包括缩略图点击放大及拖动预览效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ProductShow.aspx.cs" Inherits="ProductShow" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>产品展示厅</title>

*{padding:0;margin:0}

.smallpic{display:block;border:green dotted;float:left}

#bigbox{border:green solid;width:400px;height:284px;overflow:hidden;font-size:0px;}

#view{border:silver solid;width:0;height:0;font-size:0px;display:none;position:absolute;}

#loading{position:absolute;z-index:-1;font-size:20px;font-weight:bold;color:white;}

#loading img{vertical-align:middle}

</style>

var smallX = 150; //缩略图宽度

var bigX = 400; //预览窗大小,可以任意设置

var bigY = 284;

var srcX = 1600; //原图大小,可以任意设置. 如有一个为-1将使用图片原始大小

var srcY = 1200;

var border = 1; //边框

var smallY,viewX,viewY,bl,isIE,vX,vY,imgo;

window.onload=function()

{//debugger

smallY=srcY*smallX/srcX; //按比例计算出缩略图的高

viewX=bigX/srcX*smallX; //计算缩略图的预览窗口大小

viewY=bigY/srcY*smallY;

bl=srcX/smallX; //得到缩放比例

document.getElementById("bigbox").style.borderWidth=border; //初始化预览窗

document.getElementById("bigbox").style.width=bigX+border*2;

document.getElementById("bigbox").style.height=bigY+border*2;

document.getElementById("view").style.borderWidth=border; //初始化小预览窗

document.getElementById("view").style.width=viewX;

document.getElementById("view").style.height=viewY;

}

function getSrc(obj)

{//debugger

if(obj.tagName=="IMG")

{

var src=obj.src;

var LowerSrc=obj.lowsrc;

var SmallImage=document.createElement("img");

SmallImage.src=src;

SmallImage.setAttribute("class","smallpic");

SmallImage.onmousemove=function(){move(event,this)};

SmallImage.onmouseout=function(){nodisplay()};

var BigPic=document.createElement("img");

BigPic.setAttribute("id","bigpic");

BigPic.src=LowerSrc;

document.getElementById("divSmall").innerHTML="";

document.getElementById("bigbox").innerHTML="";

document.getElementById("bigbox").style.display="block";

document.getElementById("divSmall").style.display="block";

document.getElementById("divSmall").appendChild(SmallImage);

document.getElementById("bigbox").appendChild(BigPic);

}

function nodisplay()

{

document.getElementById("view").style.display="none";

}

function move(e,o)

{//debugger

var e = window.event; //得到IE或FF的event

vX=e.offsetX;

vY=e.offsetY //分别在FF与IE下获得相对坐标

vX+=-viewX/2; vY+=-viewY/2; //得到缩略图的预览窗位置

if (vX < 0) vX = 0; //边界判断,不能超出缩略图的范围

if (vY < 0) vY = 0;

if (vX > smallX - viewX) vX = smallX - viewX;

if (vY > smallY - viewY) vY = smallY - viewY;

document.getElementById("bigpic").style.marginLeft = - vX * bl; //刷新预览窗口

document.getElementById("bigpic").style.marginTop = - vY * bl;

document.getElementById("view").style.display = 'block'; //刷新缩略图中预览窗口

document.getElementById("view").style.left = vX + o.offsetLeft + border;

document.getElementById("view").style.top = vY + o.offsetTop + border+120;

}

</script>

</head>

<body>

<tbody>

<tr>

<asp:DataList ID="dlProduct" runat="server" RepeatColumns="5" RepeatDirection="Horizontal">

<div>

<img border="1" height="120" src='<%# Eval("ProductPic") %>' title='<%#Eval("ProductName") %>' width="150" onclick="getSrc(this)" lowsrc='<%# Eval("ProductLowPic") %>'/>

</div>

<div>

</div>

</ItemTemplate>

</asp:DataList>

</td>

</td>

</tr>

</tbody>

</table>

</div>

</div>

</div>

</div>

</div>

</form>

</body>

</html>

// JScript 文件

var speed3=25//速度数值越大速度越慢

demo2.innerHTML=demo1.innerHTML

function Marquee(){

if(demo2.offsetWidth-demo.scrollLeft<=0)

demo.scrollLeft-=demo1.offsetWidth

else{

demo.scrollLeft++

}

var MyMar=setInterval(Marquee,speed3)

demo.onmouseover=function() {clearInterval(MyMar)}

demo.onmouseout=function() {MyMar=setInterval(Marquee,speed3)}

using System;

using System.Data;

using System.Configuration;

using System.Collections;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class ProductShow : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

DataCon dc = new DataCon();

this.dlProduct.DataSource = dc.getProductMsg();

this.dlProduct.DataBind();

}

public SqlDataReader getProductMsg()

{

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["con"].ToString());

SqlCommand cmd = new SqlCommand();

cmd.Connection = con;

cmd.CommandText = "select * from ProductShow";

con.Open();

SqlDataReader sdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);

return sdr;

}