web前端项目-影视网站开发
影视网站
本项目主要使用到了 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"){ // 如果提交方式为POST
this.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++;//变量值加1
if(pos == len.length) pos=0;//变量值重新定义为0
len[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.本篇仅包含前端页面
另外：由于博客字数限制，本篇文章所展示代码并不全面，仅可供参考之用
本项目的完整代码及其素材已上传至资源，大家自行去下载就好
上一篇： 跨境电商购物网站开发
下一篇： 网站程序开发中的移动