客户端脚本调用服务器端动态内容，移动到链接显示预览

最新推荐文章于 2022-01-06 13:39:31 发布

GoodShot

最新推荐文章于 2022-01-06 13:39:31 发布

阅读量1.1k

点赞数

分类专栏： ASP.NET 文章标签：服务器脚本 function video string url

ASP.NET 专栏收录该内容

326 篇文章

订阅专栏

本文介绍了一个ASPX页面中实现图片、视频和音频文件预览功能的方法，并提供了详细的JavaScript和C#代码示例。该解决方案包括文件类型的判断及如何在鼠标悬停时显示相应的多媒体内容。

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

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 οnclick="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()");
            }