asp.net下用js实现鼠标移至小图,自动显示相应大图_asp.net教程-查字典教程网
asp.net下用js实现鼠标移至小图,自动显示相应大图
asp.net下用js实现鼠标移至小图,自动显示相应大图
发布时间:2016-12-29 来源:查字典编辑
摘要:实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图.Net精简版本functionGetShowImg(imgfile){documen...

实现根据后台绑定小图片,鼠标移至小图,自动显示相应大图

.Net精简版本

<scriptlanguage="JavaScript">

functionGetShowImg(imgfile)

{

document.all("ShowImage").src="/semir/images/"+imgfile;

}

</script>

//DataList绑定

<asp:datalistid="DlSides"runat="server"OnItemCommand="DlSides_ItemCommand"RepeatDirection="Horizontal"

RepeatColumns="3"DataKeyField="SideID"CssClass="semirText">

<ItemTemplate>

<aonmouseover="GetShowImg('<%#DataBinder.Eval(Container.DataItem,"sidePath")%>')"><IMGstyle="WIDTH:45px;HEIGHT:56px"alt=""src='/semir/images/small<%#DataBinder.Eval(Container.DataItem,"sidePath")%>'border=0></a>

</ItemTemplate>

</asp:datalist>

//显示相应大图

<imgname="ShowImage">

ASP完整版

<scriptlanguage="JavaScript">

functionImagePreload()

{

varargs=ImagePreload.arguments;

document.ImgPreArray=newArray(args.length);

for(vari=0;i<args.length;i++)

{

document.ImgPreArray[i]=newImage;

document.ImgPreArray[i].src="admin/upfile/newbook/"+args[i];

}

}

functionfitSize(){

vara,b;

varimgobj=document.all("ShowImage");

varoldimg=newImage();

oldimg.src=imgobj.src;

vardw=oldimg.width;

vardh=oldimg.height;

if(imgobj==null){

setTimeout("fitSize()",50);

return;

}

if(imgobj.offsetWidth==0){

setTimeout("fitSize()",50);

return;

}

varmaxW=300;

varmaxH=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;

}

}

functionGetShowImg(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();'showpicturesize

}

functionShowTextDetail(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>

<scriptlanguage="JavaScript"for="window"event="onload">

ImagePreload('<%=rs("picture")%>');

</script>

'---------调用-显示-------

<%ifrs("picture")<>""then%>

<astyle="cursor:hand">

<imgname="ShowImage"src="admin/upfile/newbook/<%=rs("picture")%>"border="0"width="267"height="267">

<>

</a><spanid="ShowImgText"style="font-weight:bold;"></span>

<%endif%>

‘--------------鼠标移过的图片------

<%ifrs("picture")<>""then%>

<aonmouseover="GetShowImg('','<%=rs("picture")%>');">

<imgname="Image71"src="admin/upfile/newbook/<%=rs("picture")%>"alt="dogo"width="40"height="30"border="0"></a>

<%endif%>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新asp.net教程学习
    热门asp.net教程学习
    编程开发子分类