aspx页面代码
<script language="javascript" type="text/javascript">
//图片预览效果
function ShowPic(url)
{
document.getElementById("picture").style.display="";
document.getElementById("picture").style.left=event.clientX+5;
document.getElementById("picture").style.top=event.clientY+5;
document.getElementById("picture").innerHTML= "<img src='"+url+"' width='200' height='200'/>";
}
function ShowVideo(url)
{
document.getElementById("video").style.display="";
document.getElementById("video").style.left=event.clientX+5;
document.getElementById("video").style.top=event.clientY+5;
document.getElementById("video").innerHTML= "<object id='MediaPlayer' width=300 height=250 classid='CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6'> <param name='URL' value='"+url+"'><param name='rate' value='1'> <param name='balance' value='0'> <param name='currentPosition' value='0'> <param name='defaultFrame' value> <param name='playCount' value='100'> <param name='autoStart' value='1'> <param name='currentMarker' value='0'> <param name='invokeURLs' value='1'> <param name='baseURL' value> <param name='volume' value='100'> <param name='mute' value='0'> <param name='uiMode' value='full'> <param name='stretchToFit' value='0'> <param name='windowlessVideo' value='0'> <param name='enabled' value='1'> <param name='enableContextMenu' value='1'> <param name='fullScreen' value='0'> <param name='SAMIStyle' value> <param name='SAMILang' value> <param name='SAMIFilename' value> <param name='captioningID' value> <param name='enableErrorDialogs' value='0'> <param name='_cx' value='7779'> <param name='_cy' value='1693'> </object>";
}
function ShowDivMusic(url)
{
document.getElementById("divMusic").style.display="";
document.getElementById("divMusic").style.left=event.clientX+5;
document.getElementById("divMusic").style.top=event.clientY+5;
document.getElementById("divMusic").innerHTML="<embed id='music' type='video/x-ms-wmv' align='middle' autostart='true' height='45' width='300' loop='true' src='"+url+"'></embed>";
}
function PriveiwTxt(content)
{
document.getElementById("PreTxt").style.display="";
document.getElementById("PreTxt").style.left=event.clientX+5;
document.getElementById("PreTxt").style.top=event.clientY+5;
document.getElementById("PreTxt").style.backgroundColor="white";
document.getElementById("PreTxt").innerHTML=content;
}
function DisappearDivMusic()
{
document.getElementById("divMusic").style.display="none";
document.getElementById("music").controls.pause();
document.clear();
}
function DisappearDivVideo()
{
document.getElementById("video").style.display="none";
document.getElementById("MediaPlayer").controls.stop();
document.clear();
}
function DisappearDivPic()
{
document.getElementById("picture").style.display="none";
}
function DisppearTxt()
{
document.getElementById("PreTxt").style.display="none";
}
function Disppear()
{
var existPreTxt = document.getElementById("PreTxt");
var existPicture = document.getElementById("picture");
var existvideo = document.getElementById("video");
var existMediaPlayer = document.getElementById("MediaPlayer");
var existmusic = document.getElementById("divMusic");
var existtestmusic = document.getElementById("music");
if(existPreTxt!=null)
DisppearTxt();
if(existPicture!=null)
DisappearDivPic();
if(existMediaPlayer!=null && existvideo!=null)
DisappearDivVideo();
if(existtestmusic!=null && existtestmusic!=null)
DisappearDivMusic();
}
</script>
</head>
<body onclick="Disppear()">
<div id="picture" style="display:none; width:200px; height:200px; border-bottom:1px solid #FF0000; border-left:1px solid #FF0000;border-top:1px solid #FF0000;border-right:1px solid #FF0000;position:absolute;">
</div>
<div id="video" style="display:none; width:300px; height:45px; border-bottom:1px solid #FF0000; border-left:1px solid #FF0000;border-top:1px solid #FF0000;border-right:1px solid #FF0000;position:absolute;">
</div>
<div id="divMusic" style="display:none; width:300px; height:45px; border-bottom:1px solid #FF0000; border-left:1px solid #FF0000;border-top:1px solid #FF0000;border-right:1px solid #FF0000;position:absolute;">
</div>
<div id="PreTxt" style="display:none; width:600px; height:200px; border-bottom:1px solid #FF0000; border-left:1px solid #FF0000;border-top:1px solid #FF0000;border-right:1px solid #FF0000;position:absolute;">
</div>
cs页面代码
bool legalPic = false;
bool legalVideo = false;
bool legalAudio = false;
string[] picArray = { "jpg","gif","bmp","pcx","jpeg","png"};
string[] videoArray = { "rmvb", "flv", "rm", "wmv", "mp4", "avi" };
string[] audioArray = { "mp3", "wma" };
foreach (string pic in picArray)
{
if (itemKind.Equals(pic))
legalPic = true;
}
foreach (string video in videoArray)
{
if (itemKind.Equals(video))
legalVideo = true;
}
foreach (string audio in audioArray)
{
if (itemKind.Equals(audio))
legalAudio = true;
}
//图片预览特效
if (legalPic)
TitleLB.Attributes.Add("onmouseover", "ShowPic('"+ URL +"')");
else if (legalVideo)
TitleLB.Attributes.Add("onmouseover", "ShowVideo('" + URL + "')");
else if (legalAudio)
TitleLB.Attributes.Add("onmouseover", "ShowDivMusic('" + URL + "')");
else if (itemKind.Equals("txt"))
{
//创建预览对象
Preview preivew = new Preview();
//通过url地址来返回txt文本前五十行内容
string previewTxt = preivew.txtToText(URL);
TitleLB.Attributes.Add("onmouseover", "PriveiwTxt('" +previewTxt + "')");
// TitleLB.Attributes.Add("onmouseout", "return DisppearTxt()");
}
客户端脚本调用服务器端动态内容,移动到链接显示预览
最新推荐文章于 2022-01-06 13:39:31 发布
本文介绍了一个ASPX页面中实现图片、视频和音频文件预览功能的方法,并提供了详细的JavaScript和C#代码示例。该解决方案包括文件类型的判断及如何在鼠标悬停时显示相应的多媒体内容。
6998

被折叠的 条评论
为什么被折叠?



