<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo Slideshow - by CNwander - Download by http://www.jb51.net</title>
<style type="text/css">
* {margin:0; padding:0}
ul {list-style:none}
img {border:0}
a {outline:none}
body {margin:50px 0; background:black; text-align:center; font:12px/120% Arial,simsun,sans-serif; color:white}
h2 {font-size:13px}
#player {border:1px solid #333; width:600px; height:450px; margin:0 auto}
#operator {width:800px; margin:10px auto}
#operator .btnLeft,#operator .btnRight {float:left; width:33px; height:86px}
#operator .btnLeft {background:#222 url(images/bg.png) no-repeat 0 -20px}
#operator .btnLeft:hover {background:#222 url(images/bg.png) no-repeat -80px -20px}
#operator .btnRight:hover {background:#222 url(images/bg.png) no-repeat -120px -20px}
#operator .btnRight {float:right; background:#222 url(images/bg.png) no-repeat -40px -20px}
#operator .thumbWrap {height:66px; margin:0 38px; overflow:hidden}
#operator .thumbnails {width:3000px}
#operator .thumbnails li {float:left; height:132px; margin-right:5px}
#operator .thumbnails li:hover {margin-top:0px; cursor:pointer}
#operator .thumbnails .img {width:120px; border:2px solid #222; padding:1px}
#operator .thumbnails .detail {width:110px; height:66px; padding:8px; background:url(images/bg.png) no-repeat -300px -20px; text-align:left}
#operator .thumbnails .num {margin-top:12px; color:black}
#operator .thumbnails .poster span {font-size:11px}
#operator .thumbnails .current .detail {background:url(images/bg.png) no-repeat -440px -20px}
#operator .thumbnails .current .num {margin-left:6px}
#operator .track {height:21px; margin:0 38px; text-align:left}
#operator .slideDragger {width:200px; height:21px; margin-top:5px; background:url(images/bg.png) no-repeat 0 -173px}
#operator .slideDragger .cover {height:21px; margin-left:20px; background:url(images/bg.png) no-repeat right -152px}
</style>
<script type="text/javascript">
//code by CNwander ([email protected])
//glogal
var slideA = 0.25, //滚动条缓冲速度
slideRate = 20; //滚动条刷新频率 n/s
window.onload = function() {
var thumbs = $("#operator li"),
player = $("#player"),
itemMargin = getStyle(thumbs[0],"marginRight"),
itemMargin = itemMargin.substr(0,itemMargin.length-2)*1;
itemW = thumbs[0].offsetWidth + itemMargin,
contentW = itemW * thumbs.length;
loadImg(thumbs[0].getAttribute("url"));
each(thumbs,thumbEvts);
initScrollbar();
function thumbEvts(){
var obj = this,
timer,
toY = $(".img",obj).offsetHeight;
//init items
setStyle(obj,"marginTop",-toY+"px");
//attach events
obj.onmouseover = thumbOver;
obj.onmouseout = thumbOut;
obj.onclick = thumbDown;
function thumbOver(e){
slideTo(obj,"marginTop",0)
}
function thumbOut(e){
e = e || event;
var relatedTarget = e.toElement || e.relatedTarget;
while(relatedTarget && relatedTarget != this){
relatedTarget = relatedTarget.parentNode;
if(!relatedTarget){
slideTo(obj,"marginTop",-toY);
}
}
}
function slideTo(obj,rider,to,endFuc) {
var from = getStyle(obj,rider);
from = from.substr(0,from.length-2)*1;
if(timer) window.clearInterval(timer);
timer = window.setInterval(move,slideRate);
function move() {
from += (to - from)/3;
setStyle(obj,rider,from+"px");
if(Math.round(to-from)==0) {
window.clearInterval(timer);
if(endFuc) endFuc();
return;
}
}
}
function thumbDown() {
each(thumbs,function(){
this.className = "";
});
this.className = "current";
loadImg(this.getAttribute("url"));
return false;
}
}
function initScrollbar() {
var ctrlBar = $("#operator"),
wrap = $(".thumbWrap",ctrlBar),
content = $(".thumbnails",ctrlBar),
track = $(".track",ctrlBar),
dragger = $(".slideDragger",ctrlBar),
leftBtn = $("a.btnLeft",ctrlBar),
rightBtn = $("a.btnRight",ctrlBar);
var wrapW = wrap.offsetWidth,
trackW = track.offsetWidth,
scale = wrapW/contentW,
currentX = 0,
timer;
setStyle(dragger,"width",trackW*scale+"px");
leftBtn.onclick = function(e){
slideTo(currentX - itemW*3);
this.blur();
return false;
}
rightBtn.onclick = function(e){
slideTo(currentX + itemW*3);
this.blur();
return false;
}
attachWheel();
function thumbWheel(e) {
detachWheel();
e = e || event;
var dis = e.detail || -e.wheelDelta/20;
slideTo(currentX + itemW*dis/2,attachWheel);
}
function attachWheel() {
if(document.all) document.onmousewheel = thumbWheel;
else document.addEventListener("DOMMouseScroll", thumbWheel, false);
}
function detachWheel() {
if(document.onmousewheel) document.onmousewheel = "";
else document.removeEventListener("DOMMouseScroll", thumbWheel, false);
}
dragger.onmousedown = function(e) {
e = e || event;
var lastX = e.clientX;
document.onmousemove = move;
document.onmouseup = function(e){
document.onmousemove = "";
document.onmouseup = "";
}
function move(e) {
e = e || event;
var dis = e.clientX - lastX;
dis /= scale;
lastX = e.clientX;
currentX += dis;
currentX = currentX > contentW - wrapW ? contentW - wrapW : currentX;
currentX = currentX < 0 ? 0 : currentX;
scrollTo(currentX);
}
}
function slideTo(x,endFuc) {
x = x > contentW - wrapW ? contentW - wrapW : x;
x = x < 0 ? 0 : x;
timer = window.setInterval(move,20);
function move() {
currentX += (x - currentX)*slideA;
if(Math.round(x - currentX) == 0) {
window.clearInterval(timer);
if(endFuc) endFuc();
return;
}
scrollTo(currentX);
}
}
function scrollTo(x) {
setStyle(dragger,"marginLeft",x*scale+"px");
setStyle(content,"marginLeft",-x+"px");
}
}
function loadImg(url) {
var img = new Image(),
showTimer,
opaStep = [0,0.05,0.1,0.15,0.2,0.25,0.3,0.4,0.5,0.7,1],
bg = ["#888","#fff","#bbb","#888","#444","#222","#000","#000","#000","#000","#000"],
p = 0,
c = 0;
img.src = url;
player.innerHTML = "<img src=\"images/loading.gif\" style=\"margin-top:220px\"/>";
if(img.width > 0) initImg();
else img.onload = initImg;
function initImg() {
var width = img.width,
height = img.height;
setStyle(player,{width:width+"px",height:height+"px"});
setOpacity(img,0);
player.innerHTML = "";
player.appendChild(img);
showTimer = window.setInterval(show,50);
}
function show(){
setStyle(player,"background",bg[p]);
setOpacity(img,opaStep[p++]);
if(p >= opaStep.length) window.clearInterval(showTimer);
}
}
//common funcs
//遍历对象
function each(obj,fuc) {
for(var key in obj) {
obj[key].index = key;
fuc.call(obj[key]);
}
}
//设置样式
function setStyle() {
if(arguments.length == 2 && typeof arguments[1] == "object") {
for(var key in arguments[1]) {
arguments[0].style[key] = arguments[1][key];
}
} else if (arguments.length > 2) {
arguments[0].style[arguments[1]] = arguments[2];
}
}
//获取样式
function getStyle(obj,prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop];
}
else if (window.getComputedStyle) {
prop = prop.replace (/([A-Z])/g, "-$1");
prop = prop.toLowerCase ();
return window.getComputedStyle (obj, "").getPropertyValue(prop);
}
return null;
}
function setOpacity(obj,n) {
obj.style.cssText = "filter:alpha(opacity="+ n*100 +"); -moz-opacity:"+ n +"; opacity:"+ n;
}
//elements finder
function $(s,wrap) {
var eleExpr = /([a-zA-Z0-9]*)([#\.]?)(\w+)[^\s+]*/g,
纯javascript仿做土豆网豆单列表载入图片特效.zip
版权申诉
33 浏览量
2022-11-09
22:11:34
上传
评论
收藏 870KB ZIP 举报
纯javascript仿做土豆网豆单列表载入图片特效.zip （18个子文件） 
132689898937355160 likecs.com_132689898978764843 photo_slider photos 
thumb02.jpg 15KB thumb03.jpg 17KB photo01.jpg 89KB photo05.jpg 67KB photo02.jpg 126KB photo03.jpg 124KB thumb06.jpg 17KB photo04.jpg 119KB thumb05.jpg 13KB thumb07.jpg 16KB photo07.jpg 113KB thumb01.jpg 14KB thumb04.jpg 22KB photo06.jpg 157KB images 
bgback.gif 9KB
bg.png 9KB loading.gif 5KB
index.html 12KB资源评论
