<p><iframe class="video_iframe" style="z-index:1;"" width=100% src="http://v.qq.com/iframe/player.html?vid=t01662frswa&width=500&height=375&auto=0" allowfullscreen="" frameborder="0" height="375" width="500"></iframe></p>
找到一段腾讯视频,比如地址:
最终效果为:
<p ><iframe class="video_iframe" style="z-index:1;"" width=100% src="http://v.qq.com/iframe/player.html?vid=d0163kxz8di&width=500&height=375&auto=0" allowfullscreen="" frameborder="0" height="375" width="500"></iframe></p>
下面是腾讯视频嵌入网页的效果:
注意了这个视频放进去我们必须在源码方式下使用了,如我们使用dw编辑器的话必须在源码形式直接放到指定的div,如下所示。
function qqcao(){
var type = undefined;
var param = "";
var sid = 2;
var rawuin = 'qq号码';
var qsig = "undefined";
var QQApi = {
openURL: function(url){
var i = document.createElement('iframe');
i.style.display = 'none';
i.onload = function() { i.parentNode.removeChild(i); };
i.src = url;
document.body.appendChild(i);
var returnValue = QQApi.__RETURN_VALUE;
QQApi.__RETURN_VALUE = undefined;
return returnValue;
},
isAppInstalled: function(scheme) {
var parameters = {'scheme':scheme};
var r = QQApi.openURL('jsbridge://app/isInstalled_?p=' + encodeURIComponent(JSON.stringify(parameters)));
return r ? r.result : null;
},
isQQWebView: function(){
return QQApi.isAppInstalled('mqq') == true;
},
__RETURN_VALUE: undefined
};
var usa=navigator.userAgent;
var p;
var mobile_q_jump = {
android:"https://play.google.com/store/apps/details?id=com.tencent.mobileqq",
ios:"itms-apps://itunes.apple.com/cn/app/qq-2011/id444934666?mt=8",
winphone:"http://www.windowsphone.com/zh-cn/store/app/qq/b45f0a5f-13d8-422b-9be5-c750af531762",
pc:"http://mobile.qq.com/index.html"
};
var isMQ = 0;
if(typeof type == "undefined") type = 1;
if(usa.indexOf("Android")>-1){
p = "android";
}
else if(usa.indexOf("iPhone")>-1 || usa.indexOf("iPad")>-1 || usa.indexOf("iPod")>-1){
p = "ios";
}
else if(usa.indexOf("Windows Phone") > -1 || usa.indexOf("WPDesktop") > -1){
p = "winphone";
}
else {
p = "pc";
}
if(p == "ios"){
//防止循环
if(history.pushState)
history.pushState({},"t","#");
isMQ = QQApi.isQQWebView();
if (!isMQ){
var sc = document.createElement("script");
sc.src = "http://__.qq.com/api/qqapi.js";
sc.onload = function(){
if(window['iOSQQApi']){
isMQ =iOSQQApi.device.isMobileQQ();
}
};
document.body.appendChild(sc);
}
}
else if(p == "pc" && qsig != "undefined"){
window.open(qsig,"_self");
}
if(type == 1){//手Q
var isSuccess = true;
var f = document.createElement("iframe");
f.style.display = "none";
document.body.appendChild(f);
f.onload = function(){
isSuccess = false;
};
if(p == "ios" && sid == 1){
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
if(p == "ios" && sid == 2){//ios并且为群名片
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
else if(p != "pc"){
var url = window.location.href.split("&");
f.src = "mqqopensdkapi://bizAgent/qm/qr?url=" + encodeURIComponent(url[0]);
}
if(p == "android" && sid == 1){
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
if(p == "android" && sid == 2){//ios并且为群名片
f.src = "mqqapi://card/show_pslcard?src_type=internal&version=1&uin="+ rawuin +"&card_type=person&source=qrcode";
}
var now = Date.now();
setTimeout( function(){
if((p == "ios" && !isMQ && Date.now() - now < 2000) || (p == "android" && !isSuccess) || ((p == "winphone" && Date.now() - now < 2000))){
var jumpUrl = mobile_q_jump[p];
if(jumpUrl) window.open(jumpUrl,"_self");
}
} , 1500);
}
}
//pc
tencent://Message/?Uin=QQ号码&websiteName=www.cn-mcn.com&Menu=yes
//带图片 pc
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=QQ号码&site=qq&menu=yes"><img border="0"" width=100% src="http://wpa.qq.com/pa?p=2:QQ号码:41" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>
使用node架设服务器的时候,当我们关闭服务窗口,node就会中断,,那么,怎么让服务一直存在呢,node有一个很好的模块可以完成这个工作,forever。
下面记录一些关于forever模块的一些用法:
使用forever运行nodejs应用
何为forever
forever可以看做是一个nodejs的守护进程,能够启动,停止,重启我们的app应用。
官方的说明是说:
A simple CLI tool for ensuring that a given script runs continuously (i.e. forever).
// 一个用来持续(或者说永远)运行一个给定脚本的简单的命令行工具
Github地址:https://github.com/nodejitsu/forever
用途
forever的用途就是帮我们更好的管理我们node App服务,本质上就是在forever进程之下,创建一个node app的子进程。
比如,你有一个基于express的或者其他的一些个应用那么,它将会很方便你更新和操作你的服务,并且保证你服务能持续运行。
更好的一点就是每次更改文件,它都可以帮你自动重启服务而不需要手动重启。
安装forever
// 记得加-g,forever要求安装到全局环境下
sudo npm install forever -g
forever使用说明
启动相关
// 1. 简单的启动
forever start app.js
// 2. 指定forever信息输出文件,当然,默认它会放到~/.forever/forever.log
forever start -l forever.log app.js
// 3. 指定app.js中的日志信息和错误日志输出文件,
// -o 就是console.log输出的信息,-e 就是console.error输出的信息
forever start -o out.log -e err.log app.js
// 4. 追加日志,forever默认是不能覆盖上次的启动日志,
// 所以如果第二次启动不加-a,则会不让运行
forever start -l forever.log -a app.js
// 5. 监听当前文件夹下的所有文件改动
forever start -w app.js
文件改动监听并自动重启
// 1. 监听当前文件夹下的所有文件改动(不太建议这样)
forever start -w app.js
显示所有运行的服务
forever list
停止操作
// 1. 停止所有运行的node App
forever stopall
// 2. 停止其中一个node App
forever stop app.js
// 当然还可以这样
// forever list 找到对应的id,然后:
forever stop [id]
重启操作
重启操作跟停止操作保持一致。
// 1. 启动所有
forever restartall
更多一些
上面的一些解释足够平常使用,还有待之后继续补充。
开发和线上建议配置
// 开发环境下
NODE_ENV=development forever start -l forever.log -e err.log -a app.js
// 线上环境下
NODE_ENV=production forever start -l ~/.forever/forever.log -e ~/.forever/err.log -w -a app.js
上面加上NODE_ENV为了让app.js辨认当前是什么环境用的。不加它可能就不知道哦?
一些注意点
有可能你需要使用unix下的crontab(定时任务)
这个时候需要注意配置好环境变量。
SHELL=/bin/sh
PATH=/usr/local/sbin:/usr/local/bin:/sbin:/bin:/usr/sbin:/usr/bin
初拟这个题目的时候,感觉太过简单,没有什么值得讲的。会一点HTML语言的人应该都知道相对路径和绝对路径的区别。不过后来想了想,觉得还是有必要写出来的。因为,毕竟还是有部分HTML的初学者和一些特定的环境下,会因为文件路径设置不当导致网站内容加载不全。比如说,当我们在本地写好了一个网站后,当把这个网站搬到其他地方上线后发现有些图片,模块加载不出来。几经检查代码逻辑性,都没有发现问题,但最后经过旁人的小小的指点,哦,原来是代码中文件的路径设置成了本地的了,而非新环境下的路径。
通常情况下,建议大家在引用文件路径的时候优先使用相对路径,这样就不会因为使用绝对路径,在每次网站搬迁的时候修改代码。使用相对路径可以带来很多便利。
好了,我们接下来就讲讲HTML的相对路径和绝对路径。
相对路径(Relative Path)
同目录
引用同目录下的文件,可直接引用文件名,而不需指明路径。
比如,
文件index.html的路径是: D:\hostingspace\aipsme\wwwroot\test\index.html.
文件test.html的路径是:D:\hostingspace\aipsme\wwwroot\test\test.html.
现在要在文件index.html中引用文件test.html,则只需要这样写:
<a href = “test.html”> test.html</a>
不同目录
情况一
文件list.html的路径是: D:\hostingspace\aipsme\wwwroot\abc\list.html.
文件buter.html的路径是:D:\hostingspace\aipsme\wwwroot\def\buter.html.
现在要在文件list.html中引用文件buter.html,则只需要这样写:
<a href = “../def/buter.html”> buter.html</a>
情况二
文件list.html的路径是: D:\hostingspace\aipsme\wwwroot\abc\list.html.
文件buter.html的路径是:D:\hostingspace\aipsme\wwwroot\buter.html.
现在要在文件list.html中引用文件buter.html,则只需要这样写:
<a href = “../buter.html”> buter.html</a>
情况三
文件list.html的路径是: D:\hostingspace\aipsme\wwwroot\abc\def\list.html.
文件buter.html的路径是:D:\hostingspace\aipsme\wwwroot\buter.html.
现在要在文件list.html中引用文件buter.html,则只需要这样写:
<a href = “../../buter.html”> buter.html</a>
情况四
文件list.html的路径是: D:\hostingspace\aipsme\wwwroot\abc\list.html.
文件buter.html的路径是:D:\hostingspace\aipsme\wwwroot\abc\def\buter.html.
现在要在文件list.html中引用文件buter.html,则只需要这样写:
<a href = “def/buter.html”> buter.html</a>
绝对路径(Absolute Path)
比方现在有一个网站www.test.com放在一个虚拟主机商的服务器上。您的网站文件通常是放在根目录wwwroot或者public_html下面,这样的话,比如你现在有一个文件index.php的路径是wwwroot\test\index.php
那么这个文件的绝对路径应该是:http://www.test.com/test/index.php
本文我们分享20个国外优秀网页设计师设计圆形导航菜单效果图,此设计相对国内来说比较个性大胆,但是又不失圆滑细腻,我们的设计师可以在这找到不少灵感。1701 Franciacorta
点击中间的圆角导航出现不同的色彩,除了这个,左上角的加点导航也很有特色,原来网页还能这样排版,但这样他也只能考虑宽屏了。
查看网站 http://www.1701franciacorta.it/
brancottestate
第一次浏览此站需要输入出生年份,18岁或以上才能浏览。JS效果很强大。
查看网站 http://wineexplorer.brancottestate.com/attribute/varietal
hipstersound
查看网站 http://hipstersound.com/
austria
配合背景视频,看上去很有动感。
查看网站 http://my.austria.info/uk/en/experiences/bregenzerwald
theedgedubai
网页上的建筑效果图很不错,有白天与昼夜的渐变转换,点击圆形导航弹出来的窗体也使用了圆形。
查看网站 http://theedgedubai.com/
wellstoried
查看网站 https://wellstoried.com/feed
nadezhda
圆形导航与背景相当融合,整体都是一种淡雅色调。
查看网站 http://www.nadezhda.bg/
sonance-audition
查看网站 http://sonance-audition.fr/
Game of purpose
这是一个用于演示游戏被解锁的导航,它们巧妙地链接在一起,有一个良好的说明性状态指示。
查看网站 http://gameofpurpose.com/
Edilteco
查看网站 http://www.edilteco.it/it/
Keeping New York On Track
查看网站 http://keepnyontrack.org/
Luxury Resorts
一个渡假村网站,这类网站使用手绘风格图标确实少见,
查看网站 http://www.gili-lankanfushi.com/
Interaction with Artificial Physics
查看网站 http://2d-phy.kenji-special.info/
my7up
查看网站 http://www.my7up.com/
Volvo
这个圆形装饰用来介绍汽车,很有新和力,不过不能点击:)
查看网站 http://thispage.amsterdam/volvo/
Little Black Classics
鼠标左键按住企鹅旋转将会有不同内容出来。
查看网站 http://www.littleblackclassics.com/
Freeblackfin
查看网站 http://freeblackfin.com/
奥迪TT
交互情景很有意思,从太空掉到地球,让用记不由自主的继续玩下去。
查看网站 http://microsites.audi.com/tt/index.html?locale=de_DE#/intro
Hedkandi