1.footer.html: 页的“使用启航前必读”和“文库协议”并没有添加内容
2._search.html : search form 由 search.php来处理搜索框中内容存到 $word 中
2.1<label> 标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时（实际是单击label中的文本），浏览器就会自动将focus焦点转到和标签相关的表单控件上。<label> 标签的 for 属性应当与相关元素的 id 属性相同。实例带有两个输入字段和相关标记的简单 HTML 表单：<form> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /></form>
3.category.html: 文库分类，登陆注册按钮,文档上传工具条引入js: jquery.js ,login.js,cookie.js
send parameter to the category.php : kid=1
<a href="category.php?kid=1" class="fst"><span>专业资料</span></a><a href="course.php" class="fst"><span>课程</span></a><a href="user.php" class="fst"><span>我的文库</span></a><!--上传文档按钮--><p class="share-number"><a href="upload.php" class="up_files"></a>
<!--动态的数据--><div class="_hd"><b>项目分类</b></div><div class="_cd"><!--List--><?php echo $list;?></div><!--精品文档列表--> <?php echo $re_list;?><!--热门文集--><?php echo $hot_list;?><!--list_img--><?php echo $new_list;?>当行条动态变换样式： <div class = "inner"> <ul><li><a> </a></li></ul></div>
//jquery 识别标签添加css类 $(function($) {$(".inner li:eq(" + location.search.substr(-1, 1) + ")").addClass("current")})js 补充知识：
JS中利用location.search在客户端获取URL参数location.search是从当前URL的?号开始的key=value字符串如:http://www.baidu.com/s?wd=baidu&cl=3它的search就是?wd=baidu&cl=3 location.search.substr(1).split("&")[index]如: location.search.substr(1).split("&")[0]可以返回第一个参数:wd=baidu如: location.search.split('?')[1]可以返回所有参数:wd=baidu&cl=3
stringObject.substr(start,length)| 参数 | 描述 |
|---|---|
| start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数，那么该参数声明从字符串的尾部开始算起的位置。也就是说，-1 指字符串中最后一个字符，-2 指倒数第二个字符，以此类推。 |
| length | 可选。子串中的字符数。必须是数值。如果省略了该参数，那么返回从 stringObject 的开始位置到结尾的字串。 |
用javascript来接收url传过来的参数，js不会像php那样可以通过$_GET很容易的就可以得到，以下是通过用
<script type="text/javascript">
var id;
function getid(){
var url=location.search;
var Request = new Object();
if(url.indexOf("?")!=-1){
var str = url.substr(1) //去掉?号 get the substring from the second one .
strs = str.split("&");
for(var i=0;i<strs.length;i++){
Request[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
}
}
id=Request["id"];
document.getElementById('td_fa').innerHTML=id + "页面信息";
}
</script>
Jquery
eq() 方法将匹配元素集缩减值指定 index 上的一个。
语法
.eq(index)
参数 描述
index
整数，指示元素的位置（最小为 0）。
如果是负数，则从集合中的最后一个元素往回计数。
详细说明
如果给定表示 DOM 元素集合的 jQuery 对象，.eq() 方法会用集合中的一个元素构造一个新的 jQuery 对象。所使用的 index 参数标示集合中元素的位置。
<?php include "../html/_footer.html"?> you'd better use require(" ") method
4.course.html 课程页面
课程页中只有video.php中添加了视频
5.user.php 我的文库
6.forgetchange.html 包涵forget.js
// 获取焦点和失去焦点的样式变化。
blur()
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
//change css style by js css("key","value");
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>
append() 方法在被选元素的结尾（仍然在内部）插入指定内容。
提示：append() 和 appendTo() 方法执行的任务相同。不同之处在于：内容的位置和选择器。
语法
$(selector).append(content)
参数 描述
content 必需。规定要插入的内容（可包含 HTML 标签）。
使用函数来附加内容
使用函数在指定元素的结尾插入内容。
foget.js 很好，是完整的客户端验证逻辑
7.找回密码： 确认账号 （forgetchange.html） —>安全验证（forgetsafe.html） --> 重置密码（forgetchange.html）
一个标签可以有多个类来改变样式。
<li class="mod-sub-list1 list1-active">
确认帐号
</li>
生成验证码图片： <img src="checkcode.php" alt="验证码图片" title = "checkcode Picture" id ="check_code">
画出验证码
//刷新验证码图片，向php文件中传递参数
<a href="javascript:void(0)" οnclick="javascript:document.getElementById('check_code').src='checkcode.php?tm='+Math.random();">看不清？</a>
$code.=$char; //add $char to the $code
checkcode.php // 包涵话验证的文件include_once 'DB/ValidateCode.php' ，new Util_Caption对象
ValidateCode.php // 话验证码图片的php文件
numberabs ( mixed number)
返回参数 number 的绝对值。如果参数 number 是 float，则返回的类型也是float，否则返回 integer（因为 float 通常比integer 有更大的取值范围）。
例子 1. abs()
<?php $abs = abs(-4.2);// $abs = 4.2; (double/float) $abs2 = abs(5);// $abs2 = 5; (integer) $abs3 = abs(-5);// $abs3 = 5; (integer) ?>
arrayimagettfbbox ( int size, int angle, string fontfile, string text)
本函数计算并返回一个包围着 TrueType 文本范围的虚拟方框的像素大小。
text
要度量的字符串。
size
像素单位的字体大小
fontfile
TrueType 字体文件的文件名（可以是 URL）。根据 PHP 所使用的 GD 库版本，可能尝试搜索那些不是以 '/' 开头的文件名并加上 '.ttf' 的后缀并搜索库定义的字体路径。
angle
text 将以角度而度量。
imagettfbbox() 返回一个含有 8 个单元的数组表示了文本外框的四个角：
0 左下角 X 位置
1 坐下角 Y 位置
2 右下角 X 位置
3 右下角 Y 位置
4 右上角 X 位置
5 右上角 Y 位置
6 左上角 X 位置
7 左上角 Y 位置
这些点是相对于文本的而和角度无关，因此“左上角”指的是以水平方向看文字时其左上角。
画验证码用到的函数：
imagecolorallocate -- 为一幅图像分配颜色
int imagecolorallocate ( resource image, int red, int green, int blue)
imagecolorallocate() 返回一个标识符，代表了由给定的RGB 成分组成的颜色。image 参数是imagecreate() 函数的返回值。red，green 和blue 分别是所需要的颜色的红，绿，蓝成分。这些参数是 0 到 255 的整数或者十六进制的 0x00 到 0xFF。imagecolorallocate() 必须被调用以创建每一种用在image 所代表的图像中的颜色。
注: 第一个对 imagecolorallocate() 的调用填充背景色。
<?php // 背景设为红色 $background =imagecolorallocate($im,255, 0, 0); // 设定一些颜色 $white = imagecolorallocate($im,255, 255, 255); $black = imagecolorallocate($im,0, 0,0); // 十六进制方式 $white = imagecolorallocate($im,0xFF, 0xFF, 0xFF); $black = imagecolorallocate($im,0x00, 0x00, 0x00); ?>
intrand ( [int min, int max])
如果没有提供可选参数 min 和 max，rand() 返回 0 到RAND_MAX 之间的伪随机数。例如想要 5 到 15（包括 5 和 15）之间的随机数，用rand(5, 15)。
imagesetpixel -- 画一个单一像素
int imagesetpixel ( resource image, int x, int y, int color)
imagesetpixel() 在 image 图像中用 color 颜色在 x, y 坐标（图像左上角为 0, 0）上画一个点。
hexdec -- 十六进制转换为十进制
明
int hexdec ( string hex_string)
返回与 hex_string 参数所表示的十六进制数等值的的十进制数。hexdec() 将一个十六进制字符串转换为十进制数。所能转换的最大数值为 7fffffff，即十进制的 2147483647。
hexdec() 将遇到的所有非十六进制字符替换成0。这样，所有左边的零都被忽略，但右边的零会计入值中。
例子 1. hexdec() 例子
<?php var_dump(hexdec("See")); var_dump(hexdec("ee")); // both print "int(238)" var_dump(hexdec("that")); var_dump(hexdec("a0")); // both print int(160) ?>
参见 dechex()。
boolimagefilledrectangle ( resource $image ,int $x1 ,int $y1 ,int $x2 ,int $y2 ,int $color )
imagefilledrectangle() 在image 图像中画一个用 color 颜色填充了的矩形，其左上角坐标为x1，y1，右下角坐标为x2，y2。0, 0 是图像的最左上角。int $color
imageFilledRectangle($image, 0, 0, $width, $height, $back); ///填充背景 给相应变量赋值$back is int $color
stringdirname ( string path)
给出一个包含有指向一个文件的全路径的字符串，本函数返回去掉文件名后的目录名。
在 Windows 中，斜线（/）和反斜线（\）都可以用作路径分隔符。在其它环境下是斜线（/）。
foreach ($codes as $v) ///逐个画字符
array imagettftext ( resource$image , float$size , float$angle , int$x , int$y , int$color , string$fontfile , string$text )
用 TrueType 字体向图像写入文本
说明
image
图像资源。见 imagecreatetruecolor()。
size
字体大小。根据 GD 版本不同，应该以像素大小指定（GD1）或点大小（GD2）。
angle
角度制表示的角度，0 度为从左向右读的文本。更高数值表示逆时针旋转。例如 90 度表示从下向上读的文本。
x
由 x，y 所表示的坐标定义了第一个字符的基本点（大概是字符的左下角）。这和imagestring() 不同，其 x，y 定义了第一个字符的左上角。例如 "top left" 为 0, 0。
y
Y 坐标。它设定了字体基线的位置，不是字符的最底端。
color
颜色索引。使用负的颜色索引值具有关闭防锯齿的效果。见 imagecolorallocate()。
fontfile
是想要使用的 TrueType 字体的路径。 根据 PHP 所使用的 GD 库的不同，当fontfile 没有以 / 开头时则 .ttf 将被加到文件名之后并且会在库定义字体路径中尝试搜索该文件名。当使用的 GD 库版本低于 2.0.18 时，一个空格字符 而不是分号将被用来作为不同字体文件的“路径分隔符”。
例子 1.dirname() 例子
<?php $path = "/etc/passwd"; $file = dirname ($path);// $file is set to "/etc" ?>
int count ( mixed var [, int mode])
返回 var 中的单元数目，通常是一个array（任何其它类型都只有一个单元）。
8.home.html
9.login.html Jquery 下的Ajax 技术
Ajax的操作掌握
注册后 到reg.php 页面
html文件还只是表现层，没有实质的逻辑
<a target="_blank" href="../php/forgetpass.php">忘记密码？</a>
<a href="../php/reg.php" target="_blank">立即注册</a>
10.search.html 搜索结果页的布局，内嵌了许多php代码，包括操纵数据库
userModel类是面向对象的编程
userModel->username($row['uid']);
search对象的属性： $search->numItems
$search->numPages
mysql_fetch_array() 函数从结果集中取得一行作为关联数组，或数字数组，或二者兼有
返回根据从结果集取得的行生成的数组，如果没有更多行则返回 false。
语法
mysql_fetch_array(data,array_type)
| 参数 | 描述 |
|---|---|
| data | 可选。规定规定要使用的数据指针。该数据指针是 mysql_query() 函数产生的结果。 |
| array_type | 可选。规定返回哪种结果。可能的值：
|
提示和注释
注释：mysql_fetch_array() 是 mysql_fetch_row() 的扩展版本。除了将数据以数字索引方式储存在数组中之外，还可以将数据作为关联索引储存，用字段名作为键名。
提示：有很重要的一点必须指出，用 mysql_fetch_array() 并不明显比用 mysql_fetch_row() 慢，而且还明显提供了更多的值。
注释：本函数返回的字段名是区分大小写的。
例子
<?php
$con = mysql_connect("localhost", "hello", "321");
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
$db_selected = mysql_select_db("test_db",$con);
$sql = "SELECT * from Person WHERE Lastname='Adams'";
$result = mysql_query($sql,$con);
print_r(mysql_fetch_array($result));
mysql_close($con);
?>
输出类似：
Array ( [0] => Adams [LastName] => Adams [1] => John [FirstName] => John [2] => London [City] => London )
<?php
while($row = mysql_fetch_array($result)){
$row is a array fetch from the database
?>
<li>
<div class="item">
<span class="ico <?php echo $row['style']?>"></span><a class="Title" href="view.php?fid=<?php echo $row["id"] ?>"><?php echo $row['name']?></a><b>2012-1-1</b>
</div>
<p class="label">
<?php echo $row['name_fu']?>
</p>
<div style="color: #666">
<p>
下载:<?php echo $row['downNum']?>次<i>|</i>浏览:<?php echo $row['scanNum']?>次<i>|</i>贡献者:<a><?php
$user=new userModel();
//dynamic data from the mysql database
echo $user->username($row['uid']);
?></a>
</p>
</div>
</li>
<?php
}
?>
</ul>
<div class="pageInner" >
<div class="page-content" style="display: <?php if($search->numPages==1){echo 'none';} ?>">
//$href是 $search (extends Page.class.php ) return value
<?php echo $href;?>
</div>
<span class="nums">找到相关文档约<?php echo $search->numItems;?>篇</span>
search页面中用到的Js代码：高亮搜索内容
<script>
$(function($) {
arry = [];
str = $(".SE").val();
str1 = str.toUpperCase();
str2 = str.toLowerCase();
for (var i = 0; i < str1.length; i++) {
arry.push(str1[i] + ' ');
};
for (var i = 0; i < str2.length; i++) {
arry.push(str2[i] + ' ');
};
$(".Title").textSearch(arry.join(""), {
markColor : '#C00'
});
$(".label").textSearch(arry.join(""), {
markColor : '#C00'
});
//标题更改
document.title = '文库搜索_' + str;
index=location.search.substr(-1,1)-1;
$(":radio:eq("+(+index)+")").attr('checked',true);
});
</script>
jQuery方法：textSearch()
js调用方法：$(“body”).textSearch(“插件”);//红色高亮标注body标签下所有的“插件”关键字
还可以通过class属性，id属性选择，如$(“.content”).textSearch(“插件”);
$(“#content”).textSearch(“插件”);
参数如下表：
| 参数 | 默认值 | 说明 |
|---|---|---|
| divFlag | true | 布尔型，true表示对字符串进行多关键字处理，false表示不处理，整个字符串看成1个关键字 |
| divStr | ” “ | 字符串，表示分割多个关键字的字符，默认为空格，如果divFlag为false，此参数将失效 |
| markClass | “” | 代码高亮的class类，默认为没有样式，如果设置样式，将覆盖默认的红色高亮颜色值 |
| markColor | “red” | 字符串，指高亮文字的颜色值，默认红色。markClass不为空，则此参数失效。 |
| nullReport | true | 布尔型，表示当搜索结果为空时，是否弹出提示信息。默认弹出。 |
| callback | return false; | 回调函数，默认无效果。当存在搜索结果时执行。 |
说明：
1、高亮的文字的jQuery对象可以通过$(“span[rel='mark'])获取。
效果图：
js源码:
01 | (function($){ |
02 | $.fn.textSearch = function(str,options){ |
03 | //jason格式定义变量 var defaults = { |
04 | divFlag: true, |
05 | divStr: " ", |
06 | markClass: "", |
07 | markColor: "red", |
08 | nullReport: true, |
09 | callback: function(){ |
10 | return false; |
11 | } |
12 | }; |
13 | var sets = $.extend({}, defaults, options || {}), clStr; |
14 | if(sets.markClass){ |
15 | clStr = "class='"+sets.markClass+"'"; |
16 | }else{ |
17 | clStr = "style='color:"+sets.markColor+";'"; |
18 | } |
19 |
20 | //对前一次高亮处理的文字还原 |
21 | $("span[rel='mark']").removeAttr("class").removeAttr("style").removeAttr("rel"); |
22 |
23 | //字符串正则表达式关键字转化 |
24 | $.regTrim = function(s){ |
25 | var imp = /[\^\.\\\|\(\)\*\+\-\$\[\]\?]/g; |
26 | var imp_c = {}; |
27 | imp_c["^"] = "\\^"; |
28 | imp_c["."] = "\\."; |
29 | imp_c["\\"] = "\\\\"; |
30 | imp_c["|"] = "\\|"; |
31 | imp_c["("] = "\\("; |
32 | imp_c[")"] = "\\)"; |
33 | imp_c["*"] = "\\*"; |
34 | imp_c["+"] = "\\+"; |
35 | imp_c["-"] = "\\-"; |
36 | imp_c["$"] = "\$"; |
37 | imp_c["["] = "\\["; |
38 | imp_c["]"] = "\\]"; |
39 | imp_c["?"] = "\\?"; |
40 | s = s.replace(imp,function(o){ |
41 | return imp_c[o]; |
42 | }); |
43 | return s; |
44 | }; |
45 | $(this).each(function(){ |
46 | var t = $(this); |
47 | str = $.trim(str); |
48 | if(str === ""){ |
49 | alert("关键字为空"); |
50 | return false; |
51 | }else{ |
52 | //将关键字push到数组之中 |
53 | var arr = []; |
54 | if(sets.divFlag){ |
55 | arr = str.split(sets.divStr); |
56 | }else{ |
57 | arr.push(str); |
58 | } |
59 | } |
60 | var v_html = t.html(); |
61 | //删除注释 |
62 | v_html = v_html.replace(/<!--(?:.*)\-->/g,""); |
63 |
64 | //将HTML代码支离为HTML片段和文字片段，其中文字片段用于正则替换处理，而HTML片段置之不理 |
65 | var tags = /[^<>]+|<(\/?)([A-Za-z]+)([^<>]*)>/g; |
66 | var a = v_html.match(tags), test = 0; |
67 | $.each(a, function(i, c){ |
68 | if(!/<(?:.|\s)*?>/.test(c)){//非标签 |
69 | //开始执行替换 |
70 | $.each(arr,function(index, con){ |
71 | if(con === ""){return;} |
72 | var reg = new RegExp($.regTrim(con), "g"); |
73 | if(reg.test(c)){ |
74 | //正则替换 |
75 | c = c.replace(reg,"♂"+con+"♀"); |
76 | test = 1; |
77 | } |
78 | }); |
79 | c = c.replace(/♂/g,"<span rel='mark' "+clStr+">").replace(/♀/g,"</span>"); |
80 | a[i] = c; |
81 | } |
82 | }); |
83 | //将支离数组重新组成字符串 |
84 | var new_html = a.join(""); |
85 |
86 | $(this).html(new_html); |
87 |
88 | if(test === 0 && sets.nullReport){ |
89 | alert("没有搜索结果"); |
90 | return false; |
91 | } |
92 |
93 | //执行回调函数 |
94 | sets.callback(); |
95 | }); |
96 | }; |
97 | })(jQuery); |
11.uplaod.html
包含了upload.js
显示登陆信息：<?php echo htmlspecialchars($result['user']) ?>
／／显示级别 upload 处理中 使用到了upload.swf flash 写的代码，在html中嵌入flash
<?php echo $result['lv'] ?>级(<?php echo $result['empirical'] ?>)
<div class="flash_container">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" id="WKFlashUploader" width="100%" height="100%" align="left">
<param name="bgcolor" value="#FD9526">
<param name="wmode" value="opaque">
<param name="allowfullscreen" value="false">
<param name="allowscriptaccess" value="always">
<param name="movie" value="upfile.swf">
<param name="flashVars" value="filter=*.doc;*.pdf&session_id=<?php echo session_id(); ?>" />
<embed width="100%" height="100%" ver="10.0.0" flashvars="filter=*.doc;*.pdf&session_id=<?php echo session_id(); ?>" errormessage="Please download the newest flash player." bgcolor="#FD9526" wmode="opaque" align="left" allowfullscreen="false" allowscriptaccess="always" src="upfile.swf" name="WKFlashUploader" type="application/x-shockwave-flash" >
</object>
</div>
<!--上传文档部分使用ｆｌａｓｈ 操作-->
12.user.html
用户信息都是动态的，嵌入php脚本
<!--用户信息-->
<div class="user-card">
<div style="margin-bottom: 5px">
<strong><?php echo $info["user"]?></strong>
</div>
<p>
<?php echo $info["title"]?> <?php echo $info["lv"]?>级
</p>
//等级不同，对应不同的头像图片。
<div style="margin:10px 0;width: 124px;height: 124px;"><img src="../html/image/lv/<?php echo $info["lv"]?>.jpg"/></div>
<p>
经验:<span class="c-orange"><?php echo $info["empirical"]?></span>/<?php echo $limit?>
</p>
<div class="user-exp">
<span style="width: <?php echo $length?>px"> </span>
</div>
</div>
<h3>基本信息</h3>
<span class="title-bg"></span>
</div>
<div class="bd">
<div class="data">
<ul>
<li>
等级
<br/>
<span class="c-orange"><?php echo $info["lv"]?></span>
</li>
<li>
经验
<br/>
<span class="c-orange"><?php echo $info["empirical"]?></span>
</li>
<li>
财富值
<br/>
<span class="c-orange"><?php echo $info["wealth"]?></span>
</li>
<li>
文档数
<br/>
<span class="c-orange"><?php echo $info["doc"]?></span>
</li>
<li style="border: 0">
文档被下载
<br/>
<span class="c-orange"><?php echo $downNum?></span>
</li>
</ul>
Javascript中void是一个操作符，该操作符指定要计算一个表达式但是不返回值。
void 操作符用法格式如下：
1. javascript:void (expression)
2. javascript:void expression
expression 是一个要计算的 Javascript 标准的表达式。表达式外侧的圆括号是选的，但是写上去是一个好习惯。
你以使用 void 操作符指定超级链接。表达式会被计算但是不会当前文档处装入任何内容。
下面的代码创建了一个超级链接，当用户以后不会发生任何事。当用户链接时，void(0) 计算为 0，但 Javascript 上没有任何效果。
<A HREF="javascript:void(0)">单此处什么也不会发生</A>
下面的代码创建了一个超级链接，用户单时会提交表单。
<A HREF="javascript:void(document.form.submit())">
单此处提交表单</A>
a href=#与 a href=javascript:void(0) 的区别
链接的几种办法
#包含了一个位置信息
默认的锚是#top 也就是网页的上端
而javascript:void(0) 仅仅表示一个死链接
这就是为什么有的时候页面很长浏览链接明明是#跳动到了页首，而javascript:void(0) 则不是如此，所以调用脚本的时候最好用void(0)
链接的几种办法
1.window.open(''url'')
2.用自定义函数
<script>
function openWin(tag,obj)
{
obj.target="_blank";
obj.href = "Web/Substation/Substation.aspx?stationno="+tag;
obj.click();
}
</script>
<a href="javascript:void(0)" οnclick="openWin(3,this)">株洲</a>
使用javascript的时候，通常我们会通过类似：<a href=http://www.webyi.com/wschool/program/javascript/20091231/"#" οnclick="javascript:方法">提交 的方式，通过一个伪链接来调用javascript方法。这种方法有一个问题是：虽然点击该链接的时候不会跳转页面，但是滚动条会往上滚，解决的办法是返 回一个false。
如下所示：
<a href= http://www.webyi.com/wschool/program/javascript/20091231/"#" οnclick="javascript:方法;return false;">提交
<a href= http://www.webyi.com/wschool/program/javascript/20091231/"javascript:void(0)" οnclick="javascript:方法;return false;">提交
<a href= http://www.webyi.com/wschool/program/javascript/20091231/"#this" οnclick="javascript:方法">xx
＃包含了一个位置信息默认的锚点是＃top 也就是网页的上端,而javascript:void(0) 仅仅表示一个死链接。 这就是为什么有的时候页面很长浏览链接明明是＃可是跳动到了页首,而javascript:void(0) 则不是如此所以调用脚本的时候最好用void(0)。
所以我们在做页面无刷新时用void(0)比较多，一般是Ajax，看一下Ajax的web页面的话，一般都会看到有很多的void(0)，所以在使用void(0)之前，最好先想一想这个页面是否需要整体刷新。
13.控制video的控件
html页面下播放视频 酷！
<script type='text/javascript'>
jwplayer('player_7333').setup({
file : "../file/video/PHP1.mp4",
width : "925",
height : "500",
image : "../file/video/22.jpg",
});
</script>
一、JW Player是什么？
简单地说，JW Player是一种基于flash的交互式网页媒体播放器。问世于2005年，当时仍名不经传的YouTube首次采用的播放器就是JW Player。官方网址：http://www.longtailvideo.com/。
JW Player含：FLV Player、WMV Player、Image Rotator和Desktop Player四种，除了最后一种实为桌面播放器，其他三种都是网页播放器。
本篇内容仅限FLV Player。
二、JW FLV Media Player简介
JW FLV Media Player可播放Adobe Flash Player所支持的媒体，具体包括：FLV、MP4、MP3、AAC、JPG、PNG和GIF等，还支持RTMP、HTTP、实时视频流、各种播放清单 格式、灵活的设置和广泛的javascript API。此外它还提供多种外观、功能性插件来扩展播放器，以便我们可以分享、推荐、搜索、分析甚至广告投放。
三、安装
JW Player可安装在网络空间，我从未如此运用过，而是上传到我的网盘，因此本篇的介绍也是基于此种情况，而列为看官当然懂得如何触类旁通。另外，我们一定要选择可以直链的网盘上传，何谓“直链”，即外链地址以完整的文件名为结尾（含.后缀名），如http://www.xxx.com/xxx.mp3。
1、首先到官网下载源文件，下载地址：http://www.longtailvideo.com/players/jw-flv-player/。
2、将player.swf和swfobject.js这两个文件上传到网盘（建议在网盘上为它们单独建立一个文件夹，本篇示例文件夹JW Player），安装即告完毕
四、使用设置向导
官网特别提供一个设置页面http://www.longtailvideo.com/support/jw-player-setup-wizard，可以在网页上提交、设置播放器参数，生成嵌入代码，把生成的代码稍作修正后粘贴到博客或空间即可。
设置向导提供两种代码：默认的Swfobject 1.5 Code（即JavaScripting）和Embed Code。我没有机会运用Swfobject 1.5 Code，因此本篇只介绍Embed Code。
前面我提到过生成的代码要稍作修正：为了方便在网页小窗口浏览生成的代码，官网给出 的代码是按各项参数分行了的，如果复制后就直接粘贴，可能会使播放器不能正常工作，我建议先把代码复制到“记事本”后，删除段落标记，注意每项参数之间还 要保留一个空格位，再复制到空间或博客。
Embed 代码的格式一般是这样：<embed 参数1=”参数值” 参数2=”参数值” ……参数n=”参数值”></embed>。
关于Embed Code各项参数的详细介绍，请参阅Adobe官网：http://kb2.adobe.com/cps/127/tn_12701.html。这个话题不小，值得另开一篇介绍文章。
JW Player设置非常灵活，代价就是参数非常多，搞清楚参数的意义很重要，官网也提供相关资料供我们查阅：http://developer.longtailvideo.com/trac。
特别注意：如果你的网址参数值带有“?”、“=”和“&”这三个字符，必须先转换再填写，如下：
“?”转换为“%3F”
“=”转换为“%3D”
“&”转换为“%26”
例如：原网址为：getplaylist.php?id=123&type=flv，转换后为：getplaylist.php%3Fid%3D123%26type%3Dflv。
官网为我们提供了多达21种模板，每选择一种模板，下面的参数值和播放器预览将自动 更新。虽然大部分模板今后我们恐怕几乎用不上，我还是建议新手一定要把每一种模板都点击一下，再好好体会下面的参数值，这既有助于我们领会众多参数所代表 的含义，还可以在播放器预览直接看到参数所体现的效果。
模板其实就是一件半成品，熟悉模板还可以让我们快速而准确地挑选最接近成品的模板，善用模板将大大提高效率。
需要多费口舌的是带播放清单模板“flvplayer with an rss playlist”，这个留待后面谈flie参数时再详细介绍。
3、嵌入参数
嵌入参数有三个内容：
*swf来源：填写我们之前上传到网盘player.swf的直链地址
*播放器高度：填写pix（像素）值或浏览窗口百分比
*播放器宽度：填写pix（像素）值或浏览窗口百分比
如果高度和宽度填写的是百分比，那么播放器的大小是弹性的，它将随浏览器窗口和所在网页留给播放器窗口的大小而变化。
4、媒体文件属性参数
*媒体作者：填写媒体作者名字
*媒体描述：媒体的文字描述
*字幕：XML字幕文件的链接地址（XML字幕文件也是一个大话题，将另文介绍）
*持续时间：媒体播放的持续时间（秒）
*媒体文件：媒体文件或XML播放清单的链接地址
关于JW Player可支持的媒体格式详情，请参阅：http://developer.longtailvideo.com/trac/wiki/FlashFormats。大致分类：单文件媒体（视频：FLV、MP4和AAC音频；音频；MP3；图像：JPG、GIF和PNG），YouTube视频，Livestream.com视频，HTTP流媒体，RTMP流媒体，XML播放清单。
我们要面对的模板其实可以归于两大类：一是播放单文件媒体；二是播放多文件媒体。单 文件媒体好办，直接在参数file告诉播放器媒体文件的所在地址既可。如果要播放多文件媒体，那就要把所有媒体文件按顺序组织起来，并保存为XML文件 （可以用“记事本”打开和编辑） ，这就是XML播放清单，而file参数就填上这个XML文件的链接地址。JW Player支持的播放清单格式有：XSPF、RSS（itunes、media）、ASX、ATOM。
关于XML播放清单见我的另一篇介绍文章《JW Player之XML播放清单简介》。
请注意，JW Player是以文件后缀名来判断媒体类别，如果播放器没有找到合适的后缀名，它将假定载入的是播放清单。
*预览图像：预览图片的链接地址
外部链接地址：当填写此项参数值后，播放器的控制面板将多出一个链接按钮，点击可以打开外部链接网页。请看截图：
*媒体标题：如果你将播放器设置成带播放清单（Playlist），媒体标题将出现在播放清单
// jquery 写目录动画
<script type="text/javascript">
jwplayer.key = "sEmgMZhfwrnchEyTJvgDEQiYBF1kOeT2wYQ8zw==";
</script>
<script type="text/javascript" src="../html/jwplayer/jwplayer.js"></script>
<script type="text/javascript" charset="utf-8">
var open = true;
$(function($) {
$(".mulu").click(function() {
if (open) {
$(".con").animate({
width : "250px"
});
open = false;
} else {
$(".con").animate({
width : "0px"
});
open = true;
}
})
});
</script>
14.view.html 预览文档的界面
15.
16.
扫一扫
783
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
