标签归档:jquery

你真用对了PJAX?

这两天开始全面钻入制作佳佳空间的新版啦~

然后博主依然用着爱用的Pjax,于是经过我的仔细观察,我擦咧!

我发现我原来的pjax代码和没写一样!Pjax其实根本就没有起作用啊!
页面加载还是正常的加载,全文档载入一遍。

产生这种情况的原因我在这一次查找pjax使用方法的时候发现了,是因为你百度或谷歌pjax会出现很多种使用方法不一样的教程,这些教程没有写清楚对应的版本,所以当你去pjax老大哥的github那里下载一份pjax插件再百度上随便找一份参考,运气不好的话绝对搞死你。我就这么被玩了一晚上。。。。。

到白天我醒过来接着搞才发现中国也有个神码农改了个传说中的改进版出来,所以当你用原版插件配改进版的教程那你就悲剧了。

这里是中国帅哥welefen的介绍地址和github(插件似乎已经一年没有更新了。。),他在博客里也写道修改了一些参数,所以酿成了教程不兼容的杯具。

所以我要提醒大家,查询pjax一定要看清插件来源,没有标明的教程还是不要看了,免得浪费时间。而且插件作者那里都是有说明和下载的,对应就好。

视频手动载入js

俺花了好长时间,用我这不熟练的技术好不容易做了个带满缺点的js
那么这货的用处就是屏蔽掉flash这样的东西【当然如果修改一下js可以屏蔽掉body里的任何标签
先来个示例【有视频有真相
embed标签的例子(无视频源)video标签的例子(同上)

其实屏蔽了以后看起来都是一样的。。

这货的功能:点击以后再载入,防止意外流量损失或带宽?占用
这就是个鲜明的例子181
里面装满了视频,这样就可以解决打开这个网页一下载入很多视频的问题了

原理:让div插队再干掉背后的原标签并给这个div添加可以给自己内部写入被杀掉标签的事件↓

objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);//插队到原标签前面
objarray[i].parentNode.removeChild(objarray[i]);//干掉原标签

特点:插队的div使用源元素的宽高和定位【本来想把z-index也算进去的,时间不够就不做了↓

//一堆if用来判断是否有这些属性
if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);}
if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);}
if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);}
if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);}
if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);}

全代码↓

var changevideos=function(){
var target=new Object;
function findtag(tag) {
return document.getElementsByTagName(tag);
}
function getwidth(obj){
if(obj.width){return obj.width;}else if(obj.style.width){return obj.style.width;}else{return false;}
}
function getheight(obj){
if(obj.height){return obj.height;}else if(obj.style.height){return obj.style.height;}else{return false;}
}
function getposition(obj){
return obj.style.position?obj.style.position:false;
}
function getright(obj){
return obj.style.right?obj.style.right: false;
}
function getleft(obj){
return obj.style.left?obj.style.left:false;
}
function changeinner(html){
target=event.srcElement?event.srcElement:event.target;
target.innerHTML=html;
}
function run(objarray){
for (var i = 0; i < objarray.length; i++) { var aimhtml = objarray[i].outerHTML; var tmpdiv=document.createElement("div"); if(getwidth(objarray[i])){tmpdiv.style.width=getwidth(objarray[i]);} if(getheight(objarray[i])){tmpdiv.style.height=getheight(objarray[i]);} if(getposition(objarray[i])){tmpdiv.style.position=getposition(objarray[i]);} if(getright(objarray[i])){tmpdiv.style.right=getright(objarray[i]);} if(getleft(objarray[i])){tmpdiv.style.left=getleft(objarray[i]);} tmpdiv.innerHTML='<div class="hideitemzhanwei" style="width:'+getwidth(objarray[i])+'px;height:'+getheight(objarray[i])+'px;"><center><h2 style=\'color:#fff;\'>为了防止流量计费用户的流量损失<br>此处已被自动屏蔽</h2><span style="position:absolute;bottom:2px;right:2px;">点击恢复</span></center></div>';//填上填充显示的内容
//tmpdiv.style.overflow="hidden";
tmpdiv.setAttribute('onClick','changevideos.changeinner(\''+aimhtml+'\')');
tmpdiv.style.display="inline-block";
objarray[i].parentNode.insertBefore(tmpdiv,objarray[i]);
objarray[i].parentNode.removeChild(objarray[i]);
}
}
function changehideneededtag() {
var tmpstyle=document.createElement("style");
tmpstyle.innerHTML=".hideitemzhanwei{position:relative;background-color:#66ccff;color:#fff;cursor:pointer;}";
document.getElementsByTagName("head")[0].appendChild(tmpstyle);
var a;
if(a=findtag("embed")){
run(a);}
if(a=findtag("object")){
run(a);}
if(a=findtag("video")){
run(a);}
}
changehideneededtag();
}
changevideos.changeinner=function(html){
target=event.srcElement?event.srcElement:event.target;
target.innerHTML=html;
}

没时间了所以还有些可能出错的地方没做错误处理,以后来补上

做了个元素拖动实验

iframe框引用demo:

原始demo地址:demo.luojia.me/moveelement/

代码:

<style>
body{ margin:0px; }
</style>
<script src="jquery.js">
</script>
<div id="1" style="position:fixed; border:1px solid #000;height:200px;width:400px; text-align:center; line-height:200px;background-color:#69F;cursor:move">
点着拖我
</div>
<script>
clickpointx  =  0;
clickpointy  =  0;
divx  =   (window.innerWidth  -  400)  /  2;
divy  =   (window.innerHeight  -  200)  /  2;
$("#1").css("left",  divx);
$("#1").css("top",  divy);
$("#1").mousedown(function(event)  {
	$(document).unbind("mouseup");
	$(document).unbind("mousemove");
	$("#1").unbind("animate");
	event.preventDefault();
	var clickpointx  =  event.pageX;
	var clickpointy  =  event.pageY;
	$(document).mouseup(function(event)  {
		$(document).unbind("mouseup");
		$(document).unbind("mousemove");
		$("#1").animate({
			top:  divy
		},
		500);
		$("#1").animate({
			left:  divx
		},
		500);
	});
	$(document).mousemove(function(event)  {
		event.preventDefault();
		var pointx  =  event.pageX  -  clickpointx;
		var pointy  =  event.pageY  -  clickpointy;
		$("#1").css("left",  pointx  +  divx);
		$("#1").css("top",  pointy  +  divy);
	});
});
</script>