影视网站
本项目主要使用到了 HTML；CSS；JavaScript脚本技术；AJAX无刷新技术；jQuery等技术实现了动态影视网页
运行效果：
一：index.html
<!DOCTYPE>
<html lang="en">
<head><meta charset="UTF-8">
<title>蓝网影视</title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/AjaxRequest.js"></script>
<script type="text/javascript">
/******************错误处理的函数*******************************/
function onerror(){alert("您的操作有误！");
}
/******************实例化Ajax对象的函数*******************************/
function getInfo(){var loader=new net.AjaxRequest("check.php?nocache="+new Date().getTime(),deal_getInfo,onerror,"GET");
}
/************************回调函数**************************************/
function deal_getInfo(){document.getElementById("showInfo").innerHTML=this.req.responseText;
}
window.onload=function(){getInfo(); //调用getInfo()函数获取最新消息window.setInterval("getInfo()", 600000); //每隔10分钟调用一次getInfo()函数
}
</script>
<script type="text/javascript">
$(document).ready(function(){$(".scroll").hover(function(){//鼠标指向滚动区域clearTimeout(timeID);//中止超时，即停止滚动},function(){//鼠标离开滚动区域timeID=setInterval('autoScroll()',3000); //设置超时函数，每过3秒执行一次函数});
});
function autoScroll(){ $(".scroll").find(".list").animate({ //自定义动画效果marginTop : "-25px" },500,function(){ $(this).css({"margin-top" : "0px"}).find("li:first").appendTo(this); //把列表第一行内容移动到列表最后})
}
var timeID=setInterval('autoScroll()',3000); //设置超时函数，每过3秒执行一次函数$(document).ready(function() { $(".tab_content").hide(); //将class值为tab_content的div隐藏$("ul.tabs li a:first").addClass("active"); //为第一个选项卡添加样式$(".tab_content:first").show(); //将第一个class值为tab_content的div显示$("ul.tabs li a").hover(function() { //将鼠标移到某选项卡上$("ul.tabs li a").removeClass("active"); //移除样式$(this).addClass("active"); //为当前的选项卡添加样式$(".tab_content").hide(); //将所有class值为tab_content的div隐藏var activeTab = $(this).attr("name"); //获取当前选项卡的name属性值$(activeTab).show(); //将相同id值的div显示});
});
</script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<table class="top_box" width="1206" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"><tr><td width="860" height="98" style="cursor: pointer" onClick="javascript:location='index.html'"><img src="images/ball.jpg" width="200" height="50"></td> </tr><tr><td colspan="6" height="1" bgcolor="#e5e5e5"></td></tr><tr><td colspan="6" align="center" valign="top"><!--导航栏-->
<div>
<script type="text/javascript">
function showadv(par,par2){document.getElementById("a0").style.display = "none";//隐藏id为a0的元素document.getElementById("a0bg").style.backgroundImage=""; //设置id为a0bg的元素的背景图片为空document.getElementById("a1").style.display = "none";//隐藏id为a1的元素document.getElementById("a1bg").style.backgroundImage="";//设置id为a1bg的元素的背景图片为空document.getElementById("a2").style.display = "none";//隐藏id为a2的元素document.getElementById("a2bg").style.backgroundImage="";//设置id为a2bg的元素的背景图片为空document.getElementById("a3").style.display = "none";//隐藏id为a3的元素document.getElementById("a3bg").style.backgroundImage="";//设置id为a3bg的元素的背景图片为空document.getElementById("a4").style.display = "none";//隐藏id为a4的元素document.getElementById("a4bg").style.backgroundImage="";//设置id为a4bg的元素的背景图片为空document.getElementById("a5").style.display = "none";//隐藏id为a5的元素document.getElementById("a5bg").style.backgroundImage="";//设置id为a5bg的元素的背景图片为空document.getElementById("a6").style.display = "none";//隐藏id为a6的元素document.getElementById("a6bg").style.backgroundImage="";//设置id为a6bg的元素的背景图片为空document.getElementById(par).style.display = ""; //显示指定的元素document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)"; //设置指定元素的背景图片
}
</script><table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td><div class="i01w"><table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td width="166" height="42" align="center" id="a0bg"><span id="a0color" onMouseOver="showadv('a0','a0bg')"><a href="index.html">首页</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a1bg" align="center" width="166"><span id="a1color" onMouseOver="showadv('a1','a1bg')"><a href="love.html">爱情片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a2bg" align="center" width="166"><span id="a2color" onMouseOver="showadv('a2','a2bg')"><a href="action.html">动作片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a3bg" align="center" width="166"><span id="a3color" onMouseOver="showadv('a3','a3bg')"><a href="scienceFiction.html">科幻片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a4bg" align="center" width="166"><span id="a4color" onMouseOver="showadv('a4','a4bg')"><a href="horror.html">恐怖片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a5bg" align="center" width="166"><span id="a5color" onMouseOver="showadv('a5','a5bg')"><a href="art.html">文艺片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a6bg" align="center" width="166"><span id="a6color" onMouseOver="showadv('a6','a6bg')"><a href="cartoon.html">动漫</a></span></td></tr></table></div></td></tr><tr><td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0"><tr><td align="left" style="padding-left:12px">欢迎来到蓝网影视</td></tr></table><table id="a1" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:97px" align="left"><ul class="i02w"><li>爱情喜剧</li><li>古典爱情</li><li>现代爱情</li></ul></td></tr></table><table id="a2" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:292px" align="left"><ul class="i02w"><li><a href="#">枪战片</a></li><li><a href="#">武侠片</a></li><li><a href="#">魔幻片</a></li></ul></td></tr></table><table id="a3" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:456px"><ul class="i02w"><li><a href="#">外星人</a></li><li><a href="#">自然灾难</a></li><li><a href="#">生物变异</a></li></ul></td></tr></table><table id="a4" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:636px"><ul class="i02w"><li><a href="#">惊悚片</a></li><li><a href="#">恐怖片</a></li><li><a href="#">悬疑片</a></li></ul></td></tr></table><table id="a5" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-right:160px"><ul class="i03w"><li>音乐片</li><li>歌舞片</li><li>纪录片</li></ul></td></tr></table><table id="a6" style="display: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-right:2px"><ul class="i03w"><li>历史动漫</li><li>搞笑动漫</li><li>英雄动漫</li></ul></td></tr></table></td></tr></table></div><!-- ----------------------------------- --></td></tr><tr><td colspan="6" bgcolor="#e5e5e5" valign="top"><div class="banner" style="width: 100%"><div id='tabs'><a name="i" href="#"><img src="video/13.png" width="100%" height="320" /></a><a name="i" href="#"><img src="video/14.png" width="100%" height="320" /></a> </div></div></td></tr>
</table><div class="top_box"><div id="kind"><ul class="kind"><li onMouseOver="showadv('a1')">按地区</li><li onMouseOver="showadv('a2')">按语言</li><li onMouseOver="showadv('a3')">按明星</li></ul><div class="sibkind"><div id="a1"><ul class="adv"><li>内地</li><li>香港</li><li>美国</li><li>韩国</li><li>欧洲</li><li>泰国</li><li>其他</li></ul></div><div id="a2"><ul class="adv"><li>中文</li><li>英文</li></ul></div><div id="a3"><ul class="adv"><li>杰森.斯坦森</li><li>阿兰.德龙</li><li>阿诺德.施瓦辛格</li><li>亚当.桑德勒</li><li>汤姆.克鲁斯</li><li>基努.里维斯</li></ul></div></div></div><span class="hot">热门专题</span><div id="showInfo"></div>
</div><table class="top_box" width="1206" border="0" cellpadding="0" cellspacing="0" bgcolor="#ffffff"><tr><td> </td><td width="920" valign="top">
<!--最新影视--><table width="100%" height="50" border="0" style="margin-left:0;"><tr><td align="left" valign="bottom" style="font-size:22px;">电影</td></tr></table><table width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-left:0;"><tr><td width="40%"><table width="98%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF"><tr><td><a target="_blank"><img src="video/1.jpg" width="400" height="420" border="0" /></a></td></tr><tr><td height="40" valign="bottom" style="padding-left:20px; font-size:20px; color: #333333"><a target="_blank">终结者5</a></td></tr><tr><td height="40" valign="middle" style="padding-left:20px; font-size:14px; color: #7a7a7a">未来战争终结者</td></tr></table></td><td width="54%" align="center"><table width="100%" border="0"><tr><td width="49%" align="center"><!--显示影视资料 --><table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;"><tr><td align="center"><a target="_blank"><img name="news" src="video/2.jpg" width="100%" height="172" alt="" border="0" /></a></td></tr><tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">午夜邂逅</a></td></tr><tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">克里斯.埃文斯导演处女作</td></tr></table></td><td width="49%" align="center"><!--显示影视资料 --><table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;"><tr><td align="center"><a target="_blank"><img name="news" src="video/3.jpg" width="100%" height="172" alt="" border="0" /></a></td></tr><tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">我是传奇</a></td></tr><tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">末世科幻动作电影</td></tr></table></td></tr><tr><td width="49%" align="center"><!--显示影视资料 --><table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;"><tr><td align="center"><a target="_blank"><img name="news" src="video/4.jpg" width="100%" height="172" alt="" border="0" /></a></td></tr><tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">史密斯夫妇</a></td></tr><tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">完美间谍夫妻档</td></tr></table></td><td width="49%" align="center"><!--显示影视资料 --><table width="97%" border="0" cellspacing="0" cellpadding="0" bgcolor="#FFFFFF" style="margin:0px 0px 8px 0px;"><tr><td align="center"><a target="_blank"><img name="news" src="video/5.jpg" width="100%" height="172" alt="" border="0" /></a></td></tr><tr><td height="32" align="left" valign="bottom" style="padding-left:10px; font-size:18px; color: #333333"><a target="_blank">一线声机</a></td></tr><tr><td height="32" align="left" valign="middle" style="padding-left:10px; font-size:14px; color: #7a7a7a">一线声机保持通话</td></tr></table></td></tr></table></td></tr></table></td><td width="270" valign="top"><!--影视排行 -->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:0px;margin-left:5%;"><tr><td align="left" height="50" style="font-size:22px;" valign="bottom">电影排行</td><td align="center" valign="bottom"><ul class="tabs"><li><a name="#tab1">热播</a></li><li><a name="#tab2">经典</a></li></ul></td></tr>
</table>
<div id="tab1" class="tab_content">
<table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top: 2px;margin-left:5%;">
<script>var num = 1;//定义影片排名变量//定义影片名称数组var nameArr = new Array("终结者5","飓风营救","我是传奇","一线声机","罗马假日","史密斯夫妇","午夜邂逅");//定义影片主演数组var dnumArr = new Array("阿诺德.施瓦辛格","连姆.尼森","威尔.史密斯","杰森.斯坦森","格里高利.派克","布拉德.皮特","克里斯.埃文斯");for(var i=0; i<nameArr.length; i++){document.write('<tr height="43">');document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');//输出影片排名document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');//输出影片名称document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');//输出影片主演}
</script>
</table>
</div>
<div id="tab2" class="tab_content">
<table width="95%" border="0" cellpadding="0" cellspacing="0" style="position:relative; margin-top: 2px;margin-left:5%;">
<script>var num = 1;//定义影片排名变量//定义影片名称数组var nameArr = new Array("机械师2：复活","变形金刚","暮光之城","怦然心动","电话情缘","超凡蜘蛛侠","雷神");//定义影片主演数组var dnumArr = new Array("杰森.斯坦森","希亚.拉博夫","克里斯汀.斯图尔特","玛德琳.卡罗尔","杰西.麦特卡尔菲","安德鲁.加菲尔德","克里斯.海姆斯沃斯");for(var i=0; i<nameArr.length; i++){document.write('<tr height="43">');document.write('<td width="26" align="center" class="f_td">'+(num++)+'</td>');//输出影片排名document.write('<td width="75" align="left" class="f_td"><a href="#">'+nameArr[i]+'</td>');//输出影片名称document.write('<td width="90" align="right" class="f_td">'+dnumArr[i]+'</td></tr>');//输出影片主演}
</script>
</table>
</div>
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="margin-top:0px;margin-left:5%;"><tr><td align="left" height="50" style="font-size:22px;" valign="bottom">即将上线</td></tr>
</table>
<div class="scroll"> <ul class="list"> <li><a href="#">《荒野大镖客》重磅来袭</a></li> <li><a href="#">《星球大战外传》科幻迷不容错过</a></li> <li><a href="#">《野鹅敢死队》重现战场</a></li> <li><a href="#">《九死一生》原始丛林探险</a></li> <li><a href="#">《荒野猎人》莱昂纳多复仇与熊搏斗</a></li> </ul>
</div></td><td> </td></tr>
</table><div id="demo" class="top_box" style="overflow: hidden; width: 1206px; height: 264px"><table width="100%" cellpadding="0" cellspacing="0"><tr><td id="demo1"><table cellpadding="0" cellspacing="0"><tr><td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="video/6.jpg" width="191" height="200" border="0" /></a><div class="title"><a target="_blank">机械师2：复活</a></div><div class="content">冷面杀手铁汉柔情</div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="video/7.jpg" width="191" height="200" border="0" /></a><div class="title"><a target="_blank">变形金刚</a></div><div class="content">以动画为基础的创新作品</div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="video/8.jpg" width="191" height="200" border="0" /></a><div class="title"><a target="_blank">暮光之城</a></div><div class="content">吸血鬼的爱情故事</div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="video/9.jpg" width="191" height="200" border="0" /></a><div class="title"><a target="_blank">怦然心动</a></div><div class="content">男孩女孩间的有趣战争</div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="video/10.jpg" width="191" height="200" border="0" /></a><div class="title"><a target="_blank">飓风营救</a></div><div class="content">老特工重新出山</div></td><td width="191" height="200" style="padding-right:10px"><a target="_blank"><img src="video/11.jpg" width="191" height="200" border="0" /></a><div class="title"><a target="_blank">罗马假日</a></div><div class="content">好莱坞黑白电影经典之作</div></td></tr></table></td><td id="demo2"></td></tr></table>
</div>
<script type="text/javascript">
var speed=30;//设置超时时间
demo2.innerHTML=demo1.innerHTML;//设置id为demo2的元素的HTML内容
//设置图片向左滚动
function Marquee(){if(demo2.offsetWidth-demo.scrollLeft<=0){demo.scrollLeft-=demo1.offsetWidth;}else{demo.scrollLeft++;}
}
var MyMar=setInterval(Marquee,speed);//实现图片滚动
//鼠标移入图片时停止滚动
demo.onmouseover=function(){clearInterval(MyMar);
}
//鼠标移出图片时继续滚动
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed);
}
</script><div align="center">
<!-- <img src="images/call.png" border="0" usemap="#Map" /> -->
<map name="Map" id="Map"><area shape="rect" coords="5,7,60,26" href="call.html" target="_blank" />
</map>
</div>
<table id="float" width="81" cellspacing="0"><!-- <tr><td><img src="images/ra_01.png" width="81" height="12" /></td></tr> --><tr><td align="center" background="images/ra_03.gif"><table width="100%" border="0"><!-- <tr><td height="65" align="center" valign="top"><a href="#"><img src="images/365App.png" width="59" height="63" border="0"/></a></td></tr> --><!-- <tr><td height="15" align="center" valign="top"></td></tr> --><!-- <tr><td height="85" align="center" valign="top"><img src="images/erweima.png" width="59" height="81" border="0"/></td></tr> --></table></td></tr><!-- <tr><td><img src="images/ra_02.png" width="81" height="11" /></td></tr> -->
</table>
<script type="text/javascript" src="js/float.js"></script>
</body>
二：scienceFiction.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<link rel="stylesheet" href="css/style.css" />
<body><table class="top_box" width="1212" border="0" cellspacing="0" cellpadding="0" bgcolor="#ffffff"><tr><td width="860" height="98" style="cursor: pointer" onClick="javascript:location='index.html'"><img src="images/ball.png"></td> </tr><tr><td colspan="6" height="1" bgcolor="#e5e5e5"></td></tr><tr><td colspan="6" align="center" valign="top"><!--导航栏--><div><script language="JavaScript" type="text/javascript">
function showadv(par,par2)
{
document.getElementById("a0").style.display = "none";
document.getElementById("a0bg").style.backgroundImage="";
document.getElementById("a1").style.display = "none";
document.getElementById("a1bg").style.backgroundImage="";
document.getElementById("a2").style.display = "none";
document.getElementById("a2bg").style.backgroundImage="";
document.getElementById("a3").style.display = "none";
document.getElementById("a3bg").style.backgroundImage="";
document.getElementById("a4").style.display = "none";
document.getElementById("a4bg").style.backgroundImage="";
document.getElementById("a5").style.display = "none";
document.getElementById("a5bg").style.backgroundImage="";
document.getElementById("a6").style.display = "none";
document.getElementById("a6bg").style.backgroundImage="";
document.getElementById(par).style.display = "";
document.getElementById(par2).style.backgroundImage = "url(images/i13.gif)";
}</script><table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td><div class="i01w"><table cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td width="166" height="42" align="center" id="a0bg"><span id="a0color" onMouseOver="showadv('a0','a0bg')"><a href="index.html">首页</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a1bg" align="center" width="166"><span id="a1color" onMouseOver="showadv('a1','a1bg')"><a href="love.html">爱情片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a2bg" align="center" width="166"><span id="a2color" onMouseOver="showadv('a2','a2bg')"><a href="action.html">动作片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a3bg" align="center" width="166"><span id="a3color" onMouseOver="showadv('a3','a3bg')"><a href="scienceFiction.html">科幻片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a4bg" align="center" width="166"><span id="a4color" onMouseOver="showadv('a4','a4bg')"><a href="horror.html">恐怖片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a5bg" align="center" width="166"><span id="a5color" onMouseOver="showadv('a5','a5bg')"><a href="art.html">文艺片</a></span></td><td width="1"><img src="images/i14.gif" width="1" height="25" /></td><td id="a6bg" align="center" width="166"><span id="a6color" onMouseOver="showadv('a6','a6bg')"><a href="cartoon.html">动漫</a></span></td></tr></table></div></td></tr><tr><td><table width="100%" height="41" cellpadding="0" cellspacing="0" id="a0" border="0"><tr><td align="left" style="padding-left:12px">欢迎来到365影视网</td></tr></table><table id="a1" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:97px" align="left"><ul class="i02w"><li>爱情喜剧</li><li>古典爱情</li><li>现代爱情</li></ul></td></tr></table><table id="a2" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:292px" align="left"><ul class="i02w"><li><a href="#">枪战片</a></li><li><a href="#">武侠片</a></li><li><a href="#">魔幻片</a></li></ul></td></tr></table><table id="a3" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:456px"><ul class="i02w"><li><a href="#">外星人</a></li><li><a href="#">自然灾难</a></li><li><a href="#">生物变异</a></li></ul></td></tr></table><table id="a4" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-left:636px"><ul class="i02w"><li><a href="#">惊悚片</a></li><li><a href="#">恐怖片</a></li><li><a href="#">悬疑片</a></li></ul></td></tr></table><table id="a5" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-right:160px"><ul class="i03w"><li>音乐片</li><li>歌舞片</li><li>纪录片</li></ul></td></tr></table><table id="a6" style="DISPLAY: none" height="41" cellspacing="0" cellpadding="0" width="100%" border="0"><tr><td style="padding-right:2px"><ul class="i03w"><li>历史动漫</li><li>搞笑动漫</li><li>英雄动漫</li></ul></td></tr></table></td></tr></table></div><!-- ----------------------------------- --></td></tr><tr><td colspan="6" bgcolor="#e5e5e5" valign="top"><!-- <div class="banner" style="width: 100%"><div width="100%" style="height: 154px; background: url('images/login_bg.jpg') no-repeat center"></div></div> --></td></tr>
</table><div class="w_1200" style="height:1px; background-color: #CCCCCC"></div>
<!-- 列表--><table class="w_1200 right_table" width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td align="left" style="font-size:22px; padding-left:0px;">热门推荐</td></tr>
</table><div class="w_1200" style=""><!--显示影视资料 -->
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px"><tr><td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/1.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td><td align="left" valign="top"><table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px"><tr><td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">终结者5</a></td></tr><tr><td height="35" align="left" valign="middle">导演：</td><td>艾伦.泰勒</td></tr><tr><td width="50" height="35" align="left" valign="middle" style="">主演：</td><td >阿诺德.施瓦辛格</td></tr><tr><td height="35" align="left" valign="middle">类型：</td><td>科幻片</td></tr><tr><td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;"><a target="_blank"><img src="images/online_icon.png" border="0" alt="在线观看" /></a> <img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro1.html','new','height=640,width=690,top=100,left=400');"/></td></tr></table></td></tr>
</table>
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px"><tr><td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/7.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td><td align="left" valign="top"><table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px"><tr><td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">变形金刚</a></td></tr><tr><td height="35" align="left" valign="middle">导演：</td><td>迈克尔.贝</td></tr><tr><td width="50" height="35" align="left" valign="middle" style="">主演：</td><td >希亚.拉博夫</td></tr><tr><td height="35" align="left" valign="middle">类型：</td><td>科幻片</td></tr><tr><td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;"><a target="_blank"><img src="images/online_icon.png" border="0" alt="在线观看" /></a> <img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro7.html','new','height=640,width=690,top=100,left=400');"/></td></tr></table></td></tr>
</table>
<table width="32%" border="0" cellspacing="0" cellpadding="0" style="float:left; border: 1px solid #dadada; margin-right: 8px;margin-bottom: 8px"><tr><td width="52%" align="center" valign="middle"><a target="_blank"><img name="news" src="video/14.jpg" width="100%" height="260" alt="" border="0" style=" border-color:#CCCCCC; margin-top:0px; margin-left:0px; margin-bottom:0px; margin-right:0px;" /></a></td><td align="left" valign="top"><table width="95%" border="0" cellspacing="0" cellpadding="0" style="margin-left: 14px"><tr><td align="left" height="68" colspan="2" style="font-size:20px; padding-left: 0px;"><a target="_blank">超凡蜘蛛侠</a></td></tr><tr><td height="35" align="left" valign="middle">导演：</td><td>马克.韦布</td></tr><tr><td width="50" height="35" align="left" valign="middle" style="">主演：</td><td >安德鲁.加菲尔德</td></tr><tr><td height="35" align="left" valign="middle">类型：</td><td>科幻片</td></tr><tr><td height="35" colspan="2" align="left" valign="middle" style="padding-left:2%;"><a target="_blank"><img src="images/online_icon.png" border="0" alt="在线观看" /></a> <img src="images/show_icon.png" alt="介绍" border="0" style="cursor:pointer;" onClick="javascript:window.open('intro/intro14.html','new','height=640,width=690,top=100,left=400');"/></td></tr></table></td></tr>
</table>
</div>
<div align="center">
<img src="images/call.png" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="5,7,60,26" href="call.html" target="_blank" />
</map>
</div>
</body>
三：check.php
<?php
header("Content-type:text/html;charset=utf-8");
?>
<div><ul><li>《愤怒的小鸟》小鸟飞起来</li><li>《极度惊悚》胆小者勿入</li><li>《黑海夺金》裘德.洛成摸金校尉</li><li>《潜伏者》毒师卧底贩毒集团</li></ul>
</div>
四：CSS文件
（1）intro.css
*{
margin:0px;
padding:0px;
}
.moviedetail{font-size: 20px;color: #2bb673; border-bottom: 4px solid #2bb673; line-height: 54px; margin: 0 0 6px 0px; padding-bottom: 10px
}
.pic{
margin:15px 0px;
border:1px #CCCCCC solid;
}
body{
font-size:18px;}
.moviename{
font-size:24px;
font-weight:bolder;
}.movieintro{
font-size:14px;
line-height:30px;
}
五：JS文件
（1）AjaxRequest.js
var net=new Object(); //创建一个自定义对象
//编写构造函数
net.AjaxRequest=function(url,onload,onerror,method,params){this.req=null;this.onload=onload;this.onerror=(onerror) ? onerror : this.defaultError;this.loadDate(url,method,params);
}
//编写用于初始化XMLHttpRequest对象并指定处理函数，最后发送HTTP请求的方法
net.AjaxRequest.prototype.loadDate=function(url,method,params){if (!method){method="GET"; //设置默认的请求方式为GET}if (window.XMLHttpRequest){ //非IE浏览器this.req=new XMLHttpRequest(); //创建XMLHttpRequest对象} else if (window.ActiveXObject){//IE浏览器try {this.req=new ActiveXObject("Microsoft.XMLHTTP"); //创建XMLHttpRequest对象} catch (e) {try {this.req=new ActiveXObject("Msxml2.XMLHTTP"); //创建XMLHttpRequest对象} catch (e) {}}}if (this.req){try{var loader=this;this.req.onreadystatechange=function(){net.AjaxRequest.onReadyState.call(loader);}this.req.open(method,url,true); // 建立对服务器的调用if(method=="POST"){ // 如果提交方式为POSTthis.req.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); // 设置请求的内容类型this.req.setRequestHeader("x-requested-with", "ajax"); //设置请求的发出者}this.req.send(params); // 发送请求}catch (err){this.onerror.call(this); //调用错误处理函数}}
}//重构回调函数
net.AjaxRequest.onReadyState=function(){var req=this.req;var ready=req.readyState; //获取请求状态if (ready==4){ //请求完成if (req.status==200 ){ //请求成功this.onload.call(this);}else{this.onerror.call(this); //调用错误处理函数}}
}
//重构默认的错误处理函籹
net.AjaxRequest.prototype.defaultError=function(){alert("错误数据\n\n回调状态:" + this.req.readyState + "\n状态: " + this.req.status);
}
（2）float.js
var ImgW=parseInt(float.width); //获取浮动窗口的宽度
function permute(tfloor,Top,left){//获取纵向滚动条滚动的距离var scrollTop=document.documentElement.scrollTop || document.body.scrollTop;buyTop=Top+scrollTop; //获取图片在垂直方向的绝对位置document.all[tfloor].style.top=buyTop+"px"; //设置图片在垂直方向的绝对位置//获取横向滚动条滚动的距离var scrollLeft=document.documentElement.scrollLeft || document.body.scrollLeft;var buyLeft=scrollLeft+document.body.clientWidth-ImgW; //获取图片在水平方向的绝对位置document.all[tfloor].style.left=buyLeft-left+"px"; //设置图片在水平方向的绝对位置
}
setInterval('permute("float",300,50)',1); //每隔1毫秒就执行一次permute()函数
（3）script.js
// JavaScript Document
var len = document.getElementsByName("i");//获取name属性值为i的元素
var pos = 0;//定义变量值为0
function changeimage(){len[pos].style.display = "none";//隐藏元素pos++;//变量值加1if(pos == len.length) pos=0;//变量值重新定义为0len[pos].style.display = "block";//显示元素
}
setInterval("changeimage()",3000);//每隔3秒钟执行一次changeimage()函数
function addclass(id){document.getElementById(id).className = 'nav_cur';
}
function removeclass(id){document.getElementById(id).className = 'd';
}
六：intro电影详情文件包
1.intro1.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<script src="js/chk.js" language="javascript"></script>
<link rel="stylesheet" href="../css/intro.css" />
<body>
<table width="660"><tr><td width="34"> </td><td colspan="3"><span class="moviedetail">电影详情</span></td></tr><tr><td width="34"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr><tr><td></td><td align="left" valign="top" style="padding-top:30px;"><table width="98%"><tr><td width="20%" align="left" valign="middle"><img src="../video/1.jpg" width="280" height="362" class="pic"/></td><td width="80%" align="left" valign="top"><table style="margin-top:10px; padding-left:20px;"><tr><td height="60" class="moviename">终结者5</td></tr><tr><td width="280" height="50">导演：艾伦.泰勒</td></tr><tr><td height="50">主演：阿诺德.施瓦辛格</div></td></tr><tr><td height="50">类型：科幻片</td></tr><tr><td height="50">语言：英文</td></tr><tr><td height="50">发行时间：2007-04-01</td></tr></table></td></tr><tr><td height="48" colspan="2"> 影片详情:</td></tr><tr><td colspan="2" class="movieintro"> 影片讲述了未来战争如火如荼，凯尔发现眼前的世界与预计中完全不同，一场关乎人类未来的“人机”大战正式上演。</td></tr></table></td></tr>
</table>
2.intro2.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8">
</head>
<script src="js/chk.js" language="javascript"></script>
<link rel="stylesheet" href="../css/intro.css" />
<body>
<table width="660"><tr><td width="34"> </td><td colspan="3"><span class="moviedetail">电影详情</span></td></tr><tr><td width="34"></td><td colspan="2" height="1" bgcolor="#e5e5e5"></td></tr><tr><td></td><td align="left" valign="top" style="padding-top:30px;"><table width="98%"><tr><td width="20%" align="left" valign="middle"><img src="../video/2.jpg" width="280" height="362" class="pic"/></td><td width="80%" align="left" valign="top"><table style="margin-top:10px; padding-left:20px;"><tr><td height="60" class="moviename">午夜邂逅</td></tr><tr><td width="280" height="50">导演：克里斯.埃文斯</td></tr><tr><td height="50">主演：克里斯.埃文斯</div></td></tr><tr><td height="50">类型：爱情片</td></tr><tr><td height="50">语言：英文</td></tr><tr><td height="50">发行时间：2014-09-12</td></tr></table></td></tr><tr><td height="48" colspan="2"> 影片详情:</td></tr><tr><td colspan="2" class="movieintro"> 故事发生在纽约，一名年轻女子艾比急着去赶1:30开往波士顿的火车却错过。因为在酒吧时手包被盗，所以身无分文打算在中央车站门口等到早晨坐车回家。这时，一名同样感到夜晚难熬的小号手主动提供帮助。两人从陌生，到一起经历了一些轶事到敞开心扉，共度了奇妙的一晚。</td></tr></table></td></tr>
</table>
注意：
1.所有的电脑详情页面都照着这两个例子这么写就好
2.本篇仅包含前端页面
另外：由于博客字数限制，本篇文章所展示代码并不全面，仅可供参考之用
本项目的完整代码及其素材已上传至资源，大家自行去下载就好
