发布于 2016-12-26 16:55:35 | 55 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片
1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果
 
<div style="height: 2500px;" id="txtScrollTop"> 
</div> 
<div id="galleryList"> 
</div> 

 
var util = { 
$: function (id) { 
return document.getElementById(id); 
}, 
getElementsByClassName: function (oElm, strTagName, strClassName) { 
var arrElements = oElm.getElementsByTagName(strTagName); 
var arrReturnElements = new Array(); 
strClassName = strClassName.replace(/-/g, "\-"); 
var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)"); 
var oElement; 
for (var i = 0; i < arrElements.length; i++) { 
oElement = arrElements[i]; 
if (oRegExp.test(oElement.className)) { 
arrReturnElements.push(oElement); 
} 
} 
return arrReturnElements; 
}, 
getXY: function (obj) { 
var sumTop = 0, sumLeft = 0; 
while (obj != document.body) { 
sumLeft += obj.offsetLeft; 
sumTop += obj.offsetTop; 
obj = obj.offsetParent; 
} 
return { x: sumLeft, y: sumTop } 
} 
}; 

var GalleryViewer = { 
GalleryContainer: {}, 
smallImgs: [], //小图片数组 
orginalImgs: [], //原始图片数组 
init: function (id, imgs, classname, smallImgSrc) { 
this.GalleryContainer = util.$(id); 
this.orginalImgs = imgs; 
for (var i = 0; i < imgs.length; i++) { //追加所有预览小图片 
var img = document.createElement("img"); 
img.src = smallImgSrc; 
img.className = classname; 
this.GalleryContainer.appendChild(img); 
} 
this.smallImgs = util.getElementsByClassName(util.$(id), "img", classname); 
if (util.getXY(GalleryViewer.GalleryContainer).y < window.screen.height) {//如果初始在页面开始部位直接预览加载 
this.preloadImages(); 
} 
var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x 
if (document.attachEvent) //if IE (and Opera depending on user setting) 
document.attachEvent("on" + mousewheelevt, GalleryViewer.orginalImgsAppear); 
else if (document.addEventListener) //WC3 browsers 
document.addEventListener(mousewheelevt, GalleryViewer.orginalImgsAppear, false); 
}, 
preloadImages: function () { 
for (var i = 0; i < GalleryViewer.orginalImgs.length; i++) { 
(function (i) { 
var imagePreload = new Image(); 
imagePreload.src = GalleryViewer.orginalImgs[i]; //预加载大图片 
if (imagePreload.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数 
GalleryViewer.ImgsChange(i, imagePreload); 
return; // 直接返回,不用再处理onload事件 
} 
imagePreload.onload = GalleryViewer.ImgsChange(i, imagePreload); //加载完成替换 
})(i); 
} 
}, 
ImgsChange: function (i, obj) { 
this.smallImgs[i].src = obj.src; 
}, 
orginalImgsAppear: function () { 
//alert(getXY(this.GalleryContainer).y - window.screen.height); 
if (document.documentElement.scrollTop > util.getXY(GalleryViewer.GalleryContainer).y - window.screen.height) { 
GalleryViewer.preloadImages(); 
} 

} 
}; 
(function () { 

var imgs1 = ['../Content/images/gb_tip_layer.png', '../Content/images/gb_tip_layer.png', '../Content/images/gb_tip_layer.png']; 
GalleryViewer.init("Div1", imgs1, "smallImgs1", "../Content/images/preload.gif"); 
//参数函数分别为div.id容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目 
})(); 


相关阅读 :
纯JS实现的批量图片预览加载功能
js实现上传图片预览的方法
上传图片预览JS脚本 Input file图片预览的实现示例
兼容最新firefox、chrome和IE的javascript图片预览实现代码
js实现的简单图片浮动效果完整实例
js实现局部页面打印预览原理及示例代码
纯js实现div内图片自适应大小(已测试,兼容火狐)
纯js实现的论坛常用的运行代码的效果
JS实现的简单图片切换功能示例【测试可用】
JS实现的相册图片左右滚动完整实例
js实现滑动到页面底部自动加载更多功能
js实现纯前端的图片预览
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务