您的位置：首页 > 其它

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

2008-05-16 11:19 435 查看

<%...@ 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;

}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航