仿土豆豆单Photo Slideshow效果

发布时间：2018-09-09 03:31 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程测试：IE7、FF3.014 ，注：背景图片来自土豆，版权归土豆所有 TIPs: 1、绑定滚轮事件 IE: document.onmousewheel = fuc; FF: document.addEventListener(DOMMouseScroll, fuc, false); 2、图片加载当图片已经在缓存中时，图片的

烈火网(LieHuo.Net)教程测试：IE7、FF3.014 ，注：背景图片来自土豆，版权归土豆所有
TIPs:
1、绑定滚轮事件
IE: document.onmousewheel = fuc;
FF: document.addEventListener(”DOMMouseScroll”, fuc, false);
2、图片加载
当图片已经在缓存中时，图片的onload事件在IE中无效
所以我作了如下处理
if(img.width > 0) fuc();
else img.onload = fuc;
3、设置元素透明度
function setOpacity(obj,n) {
obj.style.cssText = “filter:alpha(opacity=”+ n*100 +”); -moz-opacity:”+ n +”; opacity:”+ n;
}
4、Elements finder元素查找器
允许的格式：
$(”#id tag”)
$(”#id tag.classname”)
$(”#id .classname tag”)
$(”.classname .classname tag”)
$(”.classname tag”,domElement)
有兴趣的可以去看看DEMO这个函数 function $(s,wrap) {}
5、IE中的onmouseleave在FF中的解决办法
obj.onmouseout = thumbOut;
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);
}
}
}

<!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=GBK" /> <title>烈火网 liehuo.net - Photo Slideshow - by CNwander</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(http://www.veryhuo.com/uploads/userup/1/0910/bg.png) no-repeat 0 -20px} #operator .btnLeft:hover {background:#222 url(http://www.veryhuo.com/uploads/userup/1/0910/bg.png) no-repeat -80px -20px} #operator .btnRight:hover {background:#222 url(http://www.veryhuo.com/uploads/userup/1/0910/bg.png) no-repeat -120px -20px} #operator .btnRight {float:right; background:#222 url(http://www.veryhuo.com/uploads/userup/1/0910/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(http://www.veryhuo.com/uploads/userup/1/0910/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(http://www.veryhuo.com/uploads/userup/1/0910/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(http://www.veryhuo.com/uploads/userup/1/0910/bg.png) no-repeat 0 -173px} #operator .slideDragger .cover {height:21px; margin-left:20px; background:url(http://www.veryhuo.com/uploads/userup/1/0910/bg.png) no-repeat right -152px} </style> <script type="text/javascript"> //code by CNwander (cnwander@163.com) //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.firstChild.onmousedown = function(){return false;}; dragger.onmousedown = function(e) { e = e || event; var lastX = e.clientX; document.onmousemove = move; document.onmouseup = function(e){ document.onmousemove = null; document.onmouseup = null; } 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 alt="仿土豆豆单Photo Slideshow效果" src=http://www.veryhuo.com/a/view/\"http:/www.veryhuo.com/uploads/userup/1/0910/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, result = [wrap || document]; while(eleExpr.test(s)) { var tag = RegExp.$1, type = RegExp.$2, content = RegExp.$3, elems = []; for(var i=0; i<result.length; i++) { var temp; switch(type) { case "#": temp = [result[i].getElementById(content)]; break; case ".": temp = getElemsByClassName(content,result[i],tag); break; default: temp = result[i].getElementsByTagName(tag+content); } for(var key in temp) { if(temp[key].nodeType == 1) elems.push(temp[key]); } } result = []; for(var key in elems) { if(elems[key].nodeType == 1) result.push(elems[key]); } } return result.length == 1 ? result[0] : result; function getElemsByClassName(classname,elem,tag) { var result = [], tag = tag || "*", allElems = elem.getElementsByTagName(tag) || elem.all; for(var i=0; i </head> <body> <div id="player"><img src="http://www.veryhuo.com/uploads/userup/1/0910/loading.gif" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/loading.gif" style="margin-top:220px"/></div> <div id="operator"> <a href="#" _fcksavedurl="#" class="btnLeft"></a> <a href="#" _fcksavedurl="#" class="btnRight"></a> <div class="thumbWrap"> <ul class="thumbnails"> <li class="current" url="http://www.veryhuo.com/uploads/userup/1/0910/photo01.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb01.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb01.jpg" alt=""/></div><div class="detail"><h2>Great Wall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">01</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo02.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb02.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb02.jpg" alt=""/></div><div class="detail"><h2>冰糖葫芦</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">02</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo03.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb03.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb03.jpg" alt=""/></div><div class="detail"><h2>酒吧</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">03</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo04.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb04.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb04.jpg" alt=""/></div><div class="detail"><h2>欲望都市</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">04</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo05.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb05.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb05.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">05</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo06.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb06.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb06.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">06</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo07.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb07.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb07.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">07</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo02.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb02.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb02.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">08</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo03.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb03.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb03.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">09</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo04.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb04.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb04.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">10</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo05.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb05.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb05.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">11</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo06.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb06.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb06.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">12</div></div></li> <li url="http://www.veryhuo.com/uploads/userup/1/0910/photo07.jpg"><div class="img"><img src="http://www.veryhuo.com/uploads/userup/1/0910/thumb07.jpg" _fcksavedurl="http://www.veryhuo.com/uploads/userup/1/0910/thumb07.jpg" alt=""/></div><div class="detail"><h2>Greatwall</h2><div class="poster"><span>Photo by</span> CNwander</div> <div class="num">13</div></div></li> </ul> </div> <div class="track"> <div class="slideDragger"><div class="cover"></div></div> </div> <div id="test" style="margin-top:5px;color:white"></div> </div> </body> </html> <br /><center>烈火网更多教程，请访问：<a href=http://www.veryhuo.com/ target=_blank _fcksavedurl="http://www.veryhuo.com/ target=_blank">http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

出处：cnwander.com

（编辑：ASP站长网）