Chrome插件-花瓣助手

/ 0评 / 0

现在瀑布流模式非常的火呀。
为了增强其功能就自己写了个插件。
现在这个版本还没有最优化,打算再用css3进行优化。
争取再进一步缩小代码量。
[code lang="js"]
/*=============================================================================
# FileName: zyhuaban.js
# Desc: 花瓣阅图助手
# Author: SteveZheng
# Email: [email protected]
# Blog: http://www.stevezheng.com
# Version: 0.0.2
# LastChange: 2012-04-12 22:53:01
# History: 0.0.1 2012-04-12 15:27:33 (主要完成框架的搭建)
=============================================================================*/
(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;
}

var displayOnRight = ((left + event.offsetX) < (width / 1.4));
if(displayOnRight){
mouseOffsetX = left + event.offsetX + 50;
} else {
mouseOffsetX = left + event.offsetX - zyhuaban.imgWidth - 400;
}

mouseOffsetY = top + event.offsetY - (zyhuaban.imgHeight/1.2);

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

zyhuaban['eachIMG'] = function(){
var images = document.images;
var imageSrc = new Array();
for(var i=0, len=images.length; i<len; i++){
imageSrc[i] = images[i].src;
var imageSrcFoot = imageSrc[i].slice(-5);
var imageSrcHead = imageSrc[i].slice(0,-5);
if(imageSrcFoot == "fw192"){
images[i].addEventListener('mouseover', function(){zyhuaban.createPic(this);}, false);
images[i].addEventListener('mouseout', zyhuaban.removePic, false);
}
};
};

var a,b;
zyhuaban['scroll'] = function(){
if(a == 0 || undefined){
a = document.body.scrollTop;
} else {
b = document.body.scrollTop;
console.log("a:"+a+";b:"+b);
if(a>b){
zyhuaban.eachIMG();
console.log("a>b");
}
a = 0;
}
};

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

/*
* ToDo: 1.当大图显示的时候,制作一个遮罩层,让鼠标滚轮滚动变成大图的展示滚动;
* 2.新加载的无法实现功能【已完成】【需要想办法再提高效率】
* 3.左右图片显示的判断【已完成】
*/
[/code]

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注