人人、花瓣看图助手的源码

之前做好了花瓣网的看图助手，现在加入了人人网的支持。
讲一下我做这个插件的思路：

花瓣网

通过观察其img的src提供的地址，用户采集的都是以fw192结尾的图片。所以取得所有的图片的地址后slice最后5位数即可知道是否是fw192的图片地址了。而其大图的地址是以fw554结尾的图片。所以将其地址替换即可。再构造一个div用来放置放大的区域即可显示放大后的图片。

人人网

原理基本一样，只是获得地址的方式不一样。人人的小图有一个data-photo的属性，里面的地址就是大图地址了。在取得data-photo属性时，发现data-photo的值是string，需要转换成对象。所以需要eval转换成对象。然后取得其值即可。
[code lang=’js’]
/*=============================================================================
# FileName: zypic.js
# Desc: ZY看图
# Author: SteveZheng
# Email: [email protected]
# Blog: http://www.stevezheng.com
# Version: 0.0.1
# LastChange: 2012-04-12 22:53:01
# History:
=============================================================================*/
(function(){
if(!window.zyhuaban){
window[‘zyhuaban’] = {};
};

zyhuaban[‘mouseOffsetX’] = 0;
zyhuaban[‘mouseOffsetY’] = 0;
zyhuaban[‘imgWidth’] = 0;
zyhuaban[‘imgHeight’] = 0;
div = document.createElement(‘div’);
pic = document.createElement(‘img’);

zyhuaban[‘creatDiv’] = function(){
div[‘id’] = ‘picZoom’;
div[‘style’][‘width’] = ‘554px’;
div[‘style’][‘position’] = ‘absolute’;
div[‘style’][‘z-index’] = ’99’;
pic[‘id’] = ‘picImg’;
div.appendChild(pic);
document.body.appendChild(div);
};

zyhuaban[‘createPic’] = function(imageSrc){
zyhuaban.imgHeight = imageSrc.height;
zyhuaban.imgWidth = imageSrc.width;
var src = imageSrc.src;
var src554 = src.slice(0,-5) + ‘fw554’;
pic[‘src’] = src554;
div[‘style’][‘display’] = “block”;
};

zyhuaban[‘removePic’] = function(){
div[‘style’][‘display’] = “none”;
};

zyhuaban[‘setPic’] = function(){

var event = event || window.event;
var objSrc = event.srcElement,
left = 0,
top = 0;
var width = document.getElementsByClassName(‘wrapper’)[0].style.width.slice(0,4);

while(objSrc.offsetParent){
left += objSrc.offsetLeft;
top += objSrc.offsetTop;
objSrc = objSrc.offsetParent;
}

zyhuaban[‘init’] = function(){
zyhuaban.creatDiv();
zyhuaban.eachIMG();
document.addEventListener(‘mousemove’, zyhuaban.setPic, false);
window.onscroll=document.onscroll=zyhuaban.scroll;
};
})();

(function(){
if(!window.zyrenren){
window[‘zyrenren’] = {};
}

zyrenren[‘imgWidth’] = 0;
zyrenren[‘imgHeight’] = 0;
div = document.createElement(‘div’);
pic = document.createElement(‘img’);

zyrenren[‘creatDiv’] = function(){
div[‘id’] = ‘picZoom’;
div[‘style’][‘width’] = ‘720px’;
div[‘style’][‘position’] = ‘absolute’;
div[‘style’][‘z-index’] = ‘99999’;
pic[‘id’] = ‘picImg’;
div.appendChild(pic);
document.body.appendChild(div);
};

zyrenren[‘createPic’] = function(imageSrc){
zyrenren.imgHeight = imageSrc.height || 600;
zyrenren.imgWidth = imageSrc.width || 720;
var objImageSrc = eval(‘(‘+imageSrc.getAttribute(‘data-photo’)+’)’);
pic[‘src’] = objImageSrc.large;
div[‘style’][‘display’] = “block”;
};

zyrenren[‘removePic’] = function(){
div[‘style’][‘display’] = “none”;
};

zyrenren[‘setPic’] = function(){

var event = event || window.event;
var objSrc = event.srcElement,
left = 0,
top = 0;

while(objSrc.offsetParent){
left += objSrc.offsetLeft;
top += objSrc.offsetTop;
objSrc = objSrc.offsetParent;
}

mouseOffsetX = left + event.offsetX + 50;
mouseOffsetY = top + event.offsetY – (zyrenren.imgHeight/1.2);

div[‘style’][‘left’] = mouseOffsetX + ‘px’;
div[‘style’][‘top’] = mouseOffsetY + ‘px’;
};

zyrenren[‘getEachIMG’] = function(){
var images = document.images;
var photobox = document.getElementsByClassName(‘photo-box’);
for(var i=0, len=images.length; ib){
zyrenren.getEachIMG();
console.log(“a>b”);
}
a = 0;
}
};

zyrenren[‘init’] = function(){
zyrenren.creatDiv();
zyrenren.getEachIMG();
document.addEventListener(‘mousemove’, zyrenren.setPic, false);
window.onscroll=document.onscroll=zyrenren.scroll;
}
})();

var host = location.host;
switch(host){
case “www.renren.com” :
zyrenren.init();
break;
case “huaban.com” :
zyhuaban.init();
}
[/code]

花瓣网

人人网

发送评论 编辑评论

发送评论编辑评论