Js图片浏览器

news/2024/10/17 14:21:49/

<!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 οnclick="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 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://www.codefans.net/jscss/demoimg/wall1.jpg",
  "http://www.codefans.net/jscss/demoimg/wall2.jpg",
  "http://www.codefans.net/jscss/demoimg/wall3.jpg",
  "http://www.codefans.net/jscss/demoimg/wall4.jpg",
  "http://www.codefans.net/jscss/demoimg/wall5.jpg",
  "http://www.codefans.net/jscss/demoimg/wall6.jpg",
  "http://www.codefans.net/jscss/demoimg/wall7.jpg",
  "http://www.codefans.net/jscss/demoimg/wall8.jpg"
 ]);
  //-->
  </script>
 </body>
</html>


http://www.ppmy.cn/news/150207.html

相关文章

照片浏览器

照片浏览器

昨天写了个图片浏览器&#xff0c;很简单&#xff0c;主要就是用一个JFileChooser导入一个文件&#xff0c;然后在文件父目录下导入下一个 或者上一个图像。 东西做好了&#xff0c;但是还有一个问题&#xff0c;就是我界面图片的路径设置有问题&#xff0c;在打成Jar包后就不能…
阅读更多...
浏览器加载本地图片并预览

浏览器加载本地图片并预览

function imgPreview(config) {var width config.width || 200;var height config.height || 200;return {/*** ie9- 预览图片* param {type} input_file ,$(input[typefile]) 或者 $(input[typefile])[0]* param {type} callback 回掉参数为&#xff0c;$(居中的图片)* retu…
阅读更多...
【Android】简单图片浏览器

【Android】简单图片浏览器

开始重新学习Android&#xff0c;还是依照《疯狂Android讲义》。 简单图片浏览器&#xff1a; 功能&#xff1a;图片浏览器&#xff0c;点击图片可以切换。 注意&#xff1a;在res/drawable中添加p1.jpg、p2.jpg、p3.jpg。 Java代码&#xff1a; import android.support.v7.…
阅读更多...
网页图片浏览器

网页图片浏览器

公司有个需求是一个webview页面里的图片点击会放大&#xff0c;支持保存功能&#xff0c;在网上找了很多资料&#xff0c;也没用一个合适的&#xff0c;决定自己写一个&#xff0c;效果如下&#xff1a; 废话不多说&#xff0c;先上代码&#xff1a;实现代码 ####实现思路&…
阅读更多...
图片预览器

图片预览器

此预览器&#xff0c;一次只能翻页十张图片&#xff0c;开发人员可根据自己需要&#xff0c;修改前台代码。 页面代码 <% Page Language"C#" AutoEventWireup"true" CodeBehind"UpFilesAndPreview.aspx.cs" Inherits"WebFramework.Comm…
阅读更多...
chrome浏览器不能显示本地图片办法解决（图片预览）

chrome浏览器不能显示本地图片办法解决（图片预览）

近期开发项目时有个功能是实现图片预览&#xff0c;但是我将图片路径赋值给img标签的src时&#xff0c;预览的显示是这样的。 唉。我就郁闷了&#xff0c;再仔细一看&#xff0c;浏览器给我加了个路径啊。 这是什么鬼东西啊。 试了一下replace替换掉浏览器加给我的路径也不行&…
阅读更多...
图片网页浏览器

图片网页浏览器

图片网页浏览器 首先呢&#xff0c;大家需要在网上找到图片&#xff0c;然后复制图片的网址&#xff0c;记住&#xff0c;是图片网址&#xff0c;而不是当前打开的网页的网址。比如下面这两幅图就分别是我在网页看到的图片&#xff0c;以及用图片浏览器查看时的截图 下面是mai…
阅读更多...
图片浏览

图片浏览

图片的浏览&#xff0c;经常会看见在图片的左边点一下转到上一张图片&#xff0c;点右边一下&#xff0c;转到下一张图片&#xff0c;而且鼠标在左边时鼠标是向左的方向&#xff0c;鼠标在右边时鼠标是向右方向。以下示例是用html做的静态的形式&#xff0c;如果用jsp则可以做成…
阅读更多...
最新文章

Copyright @ 2022~2023