兼容ie firfox的图片预览

最新推荐文章于 2024-10-11 17:39:47 发布

dirk_dabing

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量519

点赞数

分类专栏： java 文章标签： javascript 图片

本文链接：https://blog.csdn.net/dirk_dabing/article/details/28859043

版权

java 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

           <!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 runat="server">
    <title>javascript相册</title>

    <style type="text/css">
        body
        {
            background-color: #4F4F4F;
        }
        div, ul, li, dl, dd, dt
        {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #wp
        {
            width: 1000px;
            margin: 0 auto;
        }
        .top
        {
            width: 100%;
            height: 96px;
            background: url(image/top.jpg) no-repeat;
        }
        .preview
        {
            width: 100%;
            text-align: center;
        }
        .out
        {
            width: 100%;
            position: relative;
            height: 110px;
        }
        .move_list
        {
            width: 900px;
            height: 110px;
            overflow: hidden;
            position: absolute;
            left: 52px;
            top: 0;
        }
        .left
        {
            width: 45px;
            height: 110px;
            position: absolute;
            left: 0;
            top: 0;
            background: url(http://www.chhblog.com/upload/1/images/8b6670ac6bb142e2a604721b82348e4f.jpg) no-repeat 20px 25px;
        }
        .right
        {
            width: 45px;
            height: 110px;
            position: absolute;
            right: 0;
            top: 0;
            background: url(http://www.chhblog.com/upload/1/images/006faa02a6024446805f7f736b96d824.jpg) no-repeat 15px 25px;
        }
        .move_list .inner
        {
            height: 110px;
        }
        .move_list .inner li
        {
            margin-top: 5px;
            float: left;
        }
        .move_list .inner li img
        {
            margin: 0 auto;
            display: block;
            border: 1px solid #999;
            padding: 3px;
            width:90%;
            height:90%;
        }
        .out_pool
        {
            width: 900px;
            height: 20px;
            background: url(http://www.chhblog.com/upload/1/images/8e333b8531cd4d359b1af08995b5dbcb.jpg) repeat-x;
            margin: 0px auto;
        }
        .out_pool .inner_pool
        {
            width: 900px;
            height: 20px;
            margin: 0 auto;
            position: relative;
            display: none;
        }
        .out_pool .poolbar
        {
            height: 20px;
            position: absolute;
            left: 0;
            top: 0;
            background: #999;
            border: 1px solid #fff;
        }
        .tool
        {
            width: 100%;
            height: 20px;
            color: #FFFFFF;
            margin-top: 5px;
        }
        .tool .l
        {
            float: left;
            padding-left: 15px;
        }
        .tool .r
        {
            float: right;
            padding-right: 15px;
        }
    </style>
</head>
<body>
    <div id="wp">
        <div class="top">
        </div>
        <div id="preview" class="preview">
        </div>
        <div class="tool" id="tool">
            <div id="l" class="l">
                相册名称：<span id="name"></span>   图片名称：<span id="img_name"></span></div>
            <div id="r" class="r">
                第<span id="page">1</span>张共<span id="all">3</span>张</div>
        </div>
        <div id="out" class="out">
            <div id="left" class="left">
            </div>
            <div id="move_list" class="move_list">
                <ul id="inner" class="inner">
                </ul>
            </div>
            <div id="right" class="right">
            </div>
        </div>
        <div class="out_pool">
            <div class="inner_pool" id="inner_pool">
                <div class="poolbar" id="poolbar" style="left: 0;">
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
//通用工具对象
var gldcw = {
    bind:function(){
        if (!Function.prototype.bind)
        {
            Function.prototype.bind = function(obj)
            {
                var owner = this,
                args = Array.prototype.slice.call(arguments),
                callobj = Array.prototype.shift.call(args);
                return function(e)
                {
                    e = e || top.window.event || window.event;
                    owner.apply(callobj, args.concat([e]));
                };
            };
        }
    }(),
    $: function(objName) {
        if (document.getElementById) {
            return eval('document.getElementById("' + objName + '")')
        } else {
            return eval('document.all.' + objName)
        }
    },
    isIE: navigator.appVersion.indexOf("MSIE") != -1 ? true: false,
    addEvent: function(l, i, I) {
        if (l.attachEvent) {
            l.attachEvent("on" + i, I)
        } else {
            l.addEventListener(i, I, false)
        }
    },
    delEvent: function(l, i, I) {
        if (l.detachEvent) {
            l.detachEvent("on" + i, I)
        } else {
            l.removeEventListener(i, I, false)
        }
    },
    stop: function(e)
    {
        if(e.stopPropagation) e.stopPropagation()
            else e.cancelBubble = true
        if(e.preventDefault) e.preventDefault()
            else e.returnValue = false
    }
}

//图片对象
var ImageObject = function(o)
{
    this.url = o.url;
    this.thumbsUrl = o.thumbsUrl;
    this.title = o.title;
    this.width = 110;
    this.height = 100;
    this.element = null;
}

ImageObject.prototype.createSmall = function()
{
    var li = document.createElement("li");
    li.style.width = this.width +"px";
    li.style.height = this.height +"px";
    var img = new Image();
    img.src = this.thumbsUrl;
    li.appendChild(img)
    this.element = li;
    return li;
}

ImageObject.prototype.setHighlight = function()
{
    this.element.getElementsByTagName("img")[0].style.background='#f30';
}

ImageObject.prototype.removeHighlight = function()
{
    this.element.getElementsByTagName("img")[0].style.background='';
}

ImageObject.prototype.createView = function()
{
    var img = new Image();
    img.src = this.url;
    return img;
}

//主显示对象
var Main = function(list)
{
    this.list = list;
    this.list.addActionObserver(this);
    this.preview = document.getElementById("preview");
}

Main.prototype.update = function(list)
{
    this.preview.innerHTML = "";
    this.preview.appendChild(list.getItem(list.currentIndex).createView());
}

//图片对表对象
var List = function(oList,leftButton,rightButton)
{
    this.leftButton = leftButton;
    this.rightButton = rightButton;
    this.leftButton.register(this);
    this.rightButton.register(this);
    this.inner = document.getElementById("inner");
    this.showObj = this.inner.parentNode;
    this.showWidth = this.showObj.offsetWidth;
    this.objList = oList;
    this.actionObservers = new Array();//于之相关的点击图片的对象列表
    this.needPullbar = this.showWidth < this.getWidth() ? true : false;
    this.currentIndex;
}

List.prototype.addActionObserver = function(observer)
{
    this.actionObservers.push(observer)
}

List.prototype.create = function()
{
    this.inner.style.width = this.getWidth()+"px";
    for(var i = 0 ; i < this.objList.length ; i ++)
    {
        var action = function(i)
        {
            var o = this;
            return function(){
                o.action(i)
                var list_offset = o.getOffset();//列表所要移动的长度
                var pullbar = o.pullbar;//滚动条对象
                var list_width = o.getWidth();//列表总长充
                var bar_width = pullbar.wp.offsetWidth;//滚动条父元素长度
                var scale = list_width / bar_width;
                var pullbar_offset = pullbar.getPullbarLeft();
                var offset = list_offset - pullbar_offset;
                var bar_offset = Math.abs(offset) / scale;
                var type = offset > 0 ? "right" : "left";
                o.move(type,(Math.abs(offset)+bar_offset)/2)
             }
        }

        var obj = this.objList[i]
        var small = obj.createSmall();
        gldcw.addEvent(small,"click",action.call(this,i));
        this.inner.appendChild(small)
    }
}

List.prototype.getOffset = function()
{
     var len = this.objList.length ;
     var index = this.currentIndex;
     var scrollLeft = this.showObj.scrollLeft;
     var singleWidth = this.objList[0].width;
     var offset = index*singleWidth-scrollLeft;
     return offset;
}

List.prototype.setCurrentIndex = function(i)
{
    this.currentIndex = i ;
}

List.prototype.action = function(i)
{
    this.setCurrentIndex(i);//设置列表当前索引
    this.setCurrentElement(i);//当前元素显示高亮
    for(var i = 0 ; i < this.actionObservers.length ; i ++)
    {
        this.actionObservers[i].update(this)
    }
}

List.prototype.setCurrentElement = function(index)
{
    for(var i = 0 ; i < this.objList.length ; i ++)
    {
       this.objList[i].removeHighlight()
    }

    this.getItem(index).setHighlight();
}

List.prototype.getWidth = function()
{
    var width = 0;
    for(var i = 0 ; i < this.objList.length ; i ++)
        width += this.objList[i].width;
    return width;
}

List.prototype.getScale = function()
{
     return this.getWidth()/this.showWidth;
}

List.prototype.getScrollLeft = function()
{
    return this.showObj.scrollLeft;
}

List.prototype.getItem = function(i)
{
    return this.objList[i]
}

List.prototype.move = function(type,d,stopType)
{
    var dis = d;
    var count = 0;
    var timer ;
    var move = function()
    {
        if( count > dis){
            window.clearInterval(timer)
            return;
        }
        count += 10
        if(type == "left") this.showObj.scrollLeft -= 10;
            else this.showObj.scrollLeft += 10;
        this.pullbar.update(this)
    }
    timer = window.setInterval(move.bind(this),10);
}

List.prototype.update = function(obj)
{
    this.showObj.scrollLeft = obj.getPullbarLeft() * obj.getScale();
}

//拖动条对象
var Poolbar = function(list)
{
    this.list = list;
    this.list.pullbar = this;
    this.wp = gldcw.$("inner_pool");
    this.bar = gldcw.$("poolbar");
    this.wp.style.display="block";
    this.bar.style.width = this.getBarWidth()+"px"
    this.initDrag();
}

Poolbar.prototype.getPullbarLeft = function()
{
     return parseFloat(this.bar.style.left);
}

Poolbar.prototype.getBarWidth = function()
{
    var inner_pool_width = this.wp.offsetWidth;
    return this.list.getScale() < 1 ? inner_pool_width : inner_pool_width / this.list.getScale();
}

Poolbar.prototype.update = function(list)
{
   this.bar.style.left = list.getScrollLeft()/this.getScale() + "px";
}

Poolbar.prototype.getScale = function()
{
    return this.list.getWidth()/this.wp.offsetWidth;
}

Poolbar.prototype.initDrag = function()
{
    var objX,clientX;
    var pullbar = this;

    var down = function(e)
    {
        e = e || window.event;
        objX = parseFloat(pullbar.bar.style.left);
        clientX = e.clientX;
        gldcw.addEvent(document.documentElement,"mousemove",move);
        pullbar.bar.style.cursor="move"
        gldcw.stop(e)
    }

    var move = function(e)
    {
        var left;
        e = e || window.event;
        moveX = e.clientX - clientX
        left = objX + moveX;

        if(left < 0)
        {
             pullbar.bar.style.left = "0px"
             gldcw.delEvent(document.documentElement,"mousemove",move);
             return;
        }

        if(left > (pullbar.wp.offsetWidth - pullbar.getBarWidth()))
        {
            pullbar.bar.style.left = pullbar.wp.offsetWidth - pullbar.getBarWidth()+"px";
            gldcw.delEvent(document.documentElement,"mousemove",move);
            return;
        }


        pullbar.bar.style.left = left + "px";
        pullbar.list.update(pullbar);

        gldcw.stop(e)
    }

    var up = function(e)
    {
        e = e || window.event;
        gldcw.delEvent(document.documentElement,"mousemove",move);
        pullbar.bar.style.cursor="";
        gldcw.stop(e)
    }

    gldcw.addEvent(this.bar,"mousedown",down);
    gldcw.addEvent(document.documentElement,"mouseup",up);
}

var Tool = function(list,name)
{
    this.list = list;
    this.name = name;
    this.oname = document.getElementById("name")
    this.imgName = document.getElementById("img_name");
    this.page = document.getElementById("page")
    this.all = document.getElementById("all")
    this.list.addActionObserver(this)
}

Tool.prototype.update = function(list)
{
    var currentIndex = list.currentIndex;
    var currentImageObj = list.getItem(currentIndex);
    this.oname.innerHTML = this.name;
    this.imgName.innerHTML = currentImageObj.title;
    this.page.innerHTML = currentIndex+1;
    this.all.innerHTML = list.objList.length;
}

var Button = function()
{
    this.button;
    this.type;
    this.obServers = new Array();
}

Button.prototype.register = function(obServer)
{
    this.obServers.push(obServer)
}

Button.prototype.init = function()
{
    gldcw.addEvent(this.button,"click",this.action.bind(this));
}

Button.prototype.action = function()
{
    for(var i = 0 ; i < this.obServers.length ; i ++) this.obServers[i].move(this.type,180);
}

var LeftButton = function()
{
    this.button = document.getElementById("left");
    this.type = "left"
    this.init();
}

LeftButton.prototype = new Button()

var ReightButton = function()
{
    this.button = document.getElementById("right")
    this.type = "right";
    this.init();
}

ReightButton.prototype = new Button();

//相册对象
var Preview = function(oList,name)
{
    this.resource = oList;
    this.leftButton = new LeftButton();
    this.rightButton = new ReightButton();
    this.rightButton.init();
    this.list = new List(this.resource,this.leftButton,this.rightButton);
    this.main = new Main(this.list);
    this.tool = new Tool(this.list,name);
    this.pullbar = null;
}

Preview.prototype.init = function()
{
    if(this.resource.length == 0) return;
    this.list.create();
    this.list.action(0)
    if(this.list.needPullbar) this.pullbar = new Poolbar(this.list);
}

var objList = new Array();

objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/22e8b28dd4f74d37b6133bb9786c2632.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/22e8b28dd4f74d37b6133bb9786c2632.jpg',title:'1'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/bb8805651b504f0c9a1784f0c9b083c1.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/bb8805651b504f0c9a1784f0c9b083c1.jpg',title:'2'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/c89406c9881349bfa82e8754662ca199.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/c89406c9881349bfa82e8754662ca199.jpg',title:'3'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/f9e39bcae6194a0db924f86befd1670b.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/f9e39bcae6194a0db924f86befd1670b.jpg',title:'4'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/37492cdec5b54a39aea731064783d901.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/37492cdec5b54a39aea731064783d901.jpg',title:'5'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/83cfcb87220a4b4c93b77e49b217cf3e.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/83cfcb87220a4b4c93b77e49b217cf3e.jpg',title:'6'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/a339ad9361fe4692933da4b9ef390931.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/a339ad9361fe4692933da4b9ef390931.jpg',title:'7'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/b3114d73b5f24a85b2ae413c79857ec3.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/b3114d73b5f24a85b2ae413c79857ec3.jpg',title:'8'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/cfb8b281dc6248abb28d85b53df5c22a.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/cfb8b281dc6248abb28d85b53df5c22a.jpg',title:'9'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/0cc5112753164f959d0597b5d9908480.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/0cc5112753164f959d0597b5d9908480.jpg',title:'1'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/22e8b28dd4f74d37b6133bb9786c2632.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/22e8b28dd4f74d37b6133bb9786c2632.jpg',title:'1'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/bb8805651b504f0c9a1784f0c9b083c1.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/bb8805651b504f0c9a1784f0c9b083c1.jpg',title:'2'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/c89406c9881349bfa82e8754662ca199.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/c89406c9881349bfa82e8754662ca199.jpg',title:'3'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/f9e39bcae6194a0db924f86befd1670b.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/f9e39bcae6194a0db924f86befd1670b.jpg',title:'4'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/37492cdec5b54a39aea731064783d901.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/37492cdec5b54a39aea731064783d901.jpg',title:'5'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/83cfcb87220a4b4c93b77e49b217cf3e.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/83cfcb87220a4b4c93b77e49b217cf3e.jpg',title:'6'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/a339ad9361fe4692933da4b9ef390931.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/a339ad9361fe4692933da4b9ef390931.jpg',title:'7'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/b3114d73b5f24a85b2ae413c79857ec3.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/b3114d73b5f24a85b2ae413c79857ec3.jpg',title:'8'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/cfb8b281dc6248abb28d85b53df5c22a.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/cfb8b281dc6248abb28d85b53df5c22a.jpg',title:'9'}))
objList.push(new ImageObject({url:'http://www.chhblog.com/upload/1/images/0cc5112753164f959d0597b5d9908480.jpg',thumbsUrl:'http://www.chhblog.com/upload/1/_thumbs/images/0cc5112753164f959d0597b5d9908480.jpg',title:'1'}))
var preview = new Preview(objList,"相册");

preview.init();

    </script>

</body>
</html>