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

最新推荐文章于 2021-06-04 11:57:47 发布

zengxie

最新推荐文章于 2021-06-04 11:57:47 发布

阅读量1.4k

点赞数 1

本文链接：https://blog.csdn.net/zengxie/article/details/2450933

版权

<% @ 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" >

< html xmlns ="http://www.w3.org/1999/xhtml" >

< head runat ="server" >

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

< style type ="text/css" >

*{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 >

< script type ="text/javascript" >

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 >

< form id ="form1" runat ="server" >

< div style ="width: 900px; height: 600px; background-color: #f8fafc; border-right: #6666ff 1px solid; border-top: #6666ff 1px solid; border-left: #6666ff 1px solid; border-bottom: #6666ff 1px solid;" >

< div style ="width: 100%; border-bottom: #cc99ff 1px solid;" >

< div id ="demo" style ="overflow: hidden; width: 600px;height:120px; border-bottom: #cc99ff 1px solid; border-right: #cc99ff 1px solid; border-left: #cc66ff 1px solid;" >

< table align ="left" border ="0" cellpadding ="0" cellspacing ="0" >

< tbody >

< tr >

< td id ="demo1" valign ="top" >

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

< ItemTemplate >

< div >

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

</ div >

< div >

</ div >

</ ItemTemplate >

</ asp:DataList >

</ td >

< td id ="demo2" valign ="top" style ="width: 5px" >

</ td >

</ tr >

</ tbody >

</ table >

< script language ="JavaScript" src ="js/scrollpic.js" ></ script >

</ div >

< div style ="width: 100%" >

< div id =divSmall style ="width: 150px; height: 112px;float:left; border-right: #9966ff 1px solid; border-top: #9966ff 1px solid; border-left: #9966ff 1px solid; border-bottom: #9966ff 1px solid; display:none" >

</ div >

< div id ="bigbox" style ="display:none" >

</ div >

< div id ="view" >

</ div >

</ div >

</ form >

</ body >

</ html >

// JScript 文件

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

demo2.innerHTML = demo1.innerHTML