这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
国外的 Js 图片浏览效果,在国外的一些网站见到的比较多,国内人都喜允左右箭头控制,用缩略图控制其它更合理呢,因此本代码重新优化一下还是很适合使用的呢。
效果图:
测试代码:
- <!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>
- <title>Js图片浏览器</title>
- </head>
- <body>
- <button onclick="Slider.next()">play</button>
- <script type="text/javascript">
- <!--
- Slider = {
- isIE : true,
- m_imageSource : [],
- m_selIdx : 0,
- m_direction : 1,
- m_mainviewer : null,
- m_delayTimer : null,
- m_delayTimer1 : null,
- m_curObj : null,
- m_tarObj : null,
- m_inited : false,
- init : function(id, w, h, w1, h1, p, t, s, source){
- this.isIE = document.all ? true : false;
- this.canvasWidth = w;
- this.canvasHeight = h;
- this.imageWidth = w1;
- this.imageHeight = h1;
- this.m_percent = p;
- this.m_top = t;
- this.m_spaceWidth = s;
- this.writeCanvas(id);
- for(var i=0;i<source.length;i++)
- {
- this.container.innerHTML += '<img class="img-responsive" src="'+source[i]+'" border="0" style="'+(this.isIE?'filter:alpha(opacity=50)':'opacity:0.5')+';width:'+w1+'px;height:'+h1+'px;position:absolute;left:'+(i*w1+i*this.m_spaceWidth)+'px;top:'+this.m_top+'px;" index="'+i+'"/>';
- }
- this.m_mainviewer = this.container.firstChild.cloneNode(true);
- this.bind();
- this.start();
- },
- writeCanvas : function(id)
- {
- document.write('<div id="'+id+'" style="width:'+this.canvasWidth+'px;height:'+this.canvasHeight+'px;position:relative;overflow:hidden;background-color:black"></div>');
- this.container = document.getElementById(id);
- },
- bind : function(obj, evt, fun){
- var obj = this.container;
- for(var i=0;i<obj.childNodes.length;i++)
- {
- this.attachEvent(this.container.childNodes[i], "mouseover", this.mouseover);
- this.attachEvent(this.container.childNodes[i], "mouseout" , this.mouseout);
- this.attachEvent(this.container.childNodes[i], "click" , this.click);
- }
- },
- attachEvent : function(obj, evt, fun){
- if (Slider.isIE)
- {
- obj.attachEvent("on"+evt, fun)
- }else
- {
- obj.addEventListener(evt, fun, false);
- }
- },
- mouseover : function(e)
- {
- if(!e)e=window.event;
- var obj = e.srcElement || e.target;
- if (Slider.isIE)
- {
- obj.style.filter = "alpha(opacity=80)";
- }else{
- obj.style.opacity = "0.8";
- }
- },
- mouseout : function(e)
- {
- if(!e)e=window.event;
- var obj = e.srcElement || e.target;
- if (Slider.isIE)
- {
- obj.style.filter = "alpha(opacity=50)";
- }else{
- obj.style.opacity = "0.5";
- }
- },
- click : function(e)
- {
- if(!e)e=window.event;
- var obj = e.srcElement || e.target;
- var mobj = Slider.m_mainviewer;
- Slider.m_selIdx = obj.getAttribute("index");
- Slider.m_curObj = Slider.m_mainviewer;
- Slider.m_tarObj = obj;
- Slider.m_delayTimer = Slider.fadeIn(200,5);
- },
- start : function(){
- var obj = this.m_mainviewer;
- if (Slider.isIE)
- {
- obj.style.filter = "alpha(opacity=100)";
- }else{
- obj.style.opacity = "1";
- }
- this.container.appendChild(this.m_mainviewer);
- this.m_mainviewer.style.width = parseInt(this.m_mainviewer.style.width)*(1+this.m_percent)+"px";
- this.m_mainviewer.style.height = parseInt(this.m_mainviewer.style.height)*(1+this.m_percent)+"px";
- this.m_curObj = this.container.childNodes[this.m_selIdx];
- this.m_tarObj = this.m_mainviewer;
- if(this.m_delayTimer)clearInterval(Slider.m_delayTimer);
- this.m_delayTimer = this.fadeIn(200,5);
- },
- next : function(){
- var obj = this.container;
- var mobj = this.m_mainviewer;
- if(this.m_selIdx == obj.childNodes.length-2)
- {
- this.m_direction = -1;
- }
- if(this.m_selIdx == 0)
- {
- this.m_direction = 1;
- }
- Slider.m_curObj = mobj;
- Slider.m_tarObj = obj.childNodes[this.m_selIdx];
- this.m_delayTimer = this.fadeIn(200,5);
- mobj.src = obj.childNodes[this.m_selIdx].src;
- if(this.m_direction==-1){
- this.m_selIdx --;
- }else{
- this.m_selIdx ++;
- }
- },
- fadeIn : function(aa, ab){
- var obj = this.container;
- with(this.m_curObj.style){var t1 = parseInt(left);var t3 = parseInt(width);var t4 = parseInt(height);var t5 = parseInt(top);}
- if (Slider.m_inited)
- {
- var k1 = (t1 - (this.canvasWidth- parseInt(this.m_curObj.style.width))/2)/ab;
- var k3 = (t3-parseInt(this.m_tarObj.style.width))/ab;
- var k4 = (t4-parseInt(this.m_tarObj.style.height))/ab;
- var k5 = (t5 - parseInt(this.m_tarObj.style.top))/ab;
- }else{
- var k1 = (t1 - (this.canvasWidth- this.imageWidth*(1+this.m_percent))/2)/ab;
- var k3 = (t3- this.imageWidth*(1+this.m_percent))/ab;
- var k4 = (t4 - this.imageHeight*(1+this.m_percent))/ab;
- var k5 = (this.imageHeight * this.m_percent/2)/ab;
- }
- var mobj = this.m_mainviewer;
- return setInterval(function(){if(ab<1){
- clearInterval(Slider.m_delayTimer);
- if(Slider.m_inited){
- if (!Slider.m_fadein)
- {
- Slider.m_curObj = obj.childNodes[Slider.m_selIdx];
- Slider.m_tarObj = mobj;
- mobj.src = obj.childNodes[Slider.m_selIdx].src;
- Slider.m_fadein = true;
- Slider.m_inited = false;
- Slider.m_delayTimer = Slider.fadeIn(200,10);
- }else{
- Slider.m_fadein = false;
- Slider.m_inited = true;
- }
- }
- Slider.m_inited = true;
- return;
- }
- ab--;t1-=k1;t3-=k3;t4-=k4;t5-=k5;
- if (Slider.m_fadein)
- {
- for(var i=0;i<obj.childNodes.length-1;i++)
- {
- obj.childNodes[i].style.left = (parseInt(t1) + (Slider.imageWidth + Slider.m_spaceWidth)*(i-Slider.m_selIdx))+"px";
- }
- }
- with(mobj.style){left = t1 + "px";top = t5 + "px";width = t3 + "px";height = t4 + "px";}
- }
- ,aa/ab)
- }
- }
- Slider.init('aaa',400,600,180,100, 0.5, 200, 20, [
- "http://files.jb51.net/demoimg/201005/r_s1.jpg",
- "http://files.jb51.net/demoimg/201005/r_s2.jpg",
- "http://files.jb51.net/demoimg/201005/r_s3.jpg",
- "http://files.jb51.net/demoimg/201005/r_s4.jpg",
- "http://files.jb51.net/demoimg/201005/r_s1.jpg",
- "http://files.jb51.net/demoimg/201005/r_s2.jpg",
- "http://files.jb51.net/demoimg/201005/r_s3.jpg",
- "http://files.jb51.net/demoimg/201005/r_s4.jpg"
- ]);
- //-->
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0629/284602.html