图片预览器（类似百度）

最新推荐文章于 2022-04-22 17:55:11 发布

Valyce

最新推荐文章于 2022-04-22 17:55:11 发布

阅读量928

点赞数

分类专栏： .net(Web) 文章标签：百度 function div button object url

本文链接：https://blog.csdn.net/SlientForest/article/details/5892361

版权

.net(Web) 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

此预览器，一次只能翻页十张图片，开发人员可根据自己需要，修改前台代码。

==============================页面代码

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="UpFilesAndPreview.aspx.cs" Inherits="WebFramework.CommonUpFiles.UpFilesAndPreview" %>
<!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=gb2312" />
<title>图片预览器</title>
<base target="_self" />
<style type="text/css">
#show{height:auto;width:700px; text-align:center; margin-bottom:15px;border:1px solid #FFFFFF;display: inline-table}
#show img{ text-align:center; }
#container{ height:auto; width:613px; text-align:center; display: inline-table}
#left{ height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif); margin-top:5px; margin-right:10px;}
#middle{ height:109px; width:545px; float:left; overflow:hidden;}
#thumblist{ width:1090px;}
#thumblist div { width:109px; height:109px; text-align:center; float:left}
.cc{width:109px; height:109px; text-align:center; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011452785.p.gif)}
#thumblist div span { width:95px; height:95px; margin:6px !important;margin:3px; margin-top:6px; border:1px solid #FFFFFF; background-color:#000000; vertical-align:middle; line-height:95px; display:block}
#thumblist div span img { width:100%; height:100%; display:block}
#right{height:97px; width:24px; float:left; background-image:url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif);margin-top:5px; margin-left:10px}
</style>

document.all&&document.execCommand("BackgroundImageCache", false, true);

var isIE = (document.all) ? true : false;

var $ = function (id) {
return document.getElementById(id);
};

var Extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
}

var Bind = function(object, fun,args) {
return function() {
return fun.apply(object,args||[]);
}
}

var BindAsEventListener = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function(event) {
return fun.apply(object, [event || window.event].concat(args));
}
}

var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
}

var Tween = {
    Quart: {
            easeOut: function(t,b,c,d){
                return -c * ((t=t/d-1)*t*t*t - 1) + b;
            }
        }
}

var Class = function(properties){
       var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
       _class.prototype = properties;
       return _class;
};

        this.Onstart(c);
        this.Run();
    },
    Run:function(){
        if(this.t<this.d)
        {
            this.RunTo(Math.round(this.Tween(++this.t,this.b,this.c,this.d)))
            this.timer = setTimeout(Bind(this,this.Run),this.Time)
        }
        else
        {
            this.RunTo(this.b+this.c);
            this.Stop();
        }
    },
    RunTo:function(i){
        this._obj.scrollLeft = i;
    },
    Pre:function(){
        this.c = this.Step*(-1);
        this.Start();
    },
    Next:function(){
        this.c = this.Step;
        this.Start();
    },
    Stop:function(){
        clearTimeout(this.timer);
        this.t = 0;this.Isrun=false;
        this.Onstop()
    }
})

var ss = new Imgroll($('show'),$('middle'),$('thumblist'),5,3,{
        Step:109,   //着里的109是指中间每个包含div图片的宽度,也可以写成$('thumblist').getElementsByTagName('div')[0].offsetWidth;
        Onstart:function(obj){
            if(!obj)return;
            ss._show.getElementsByTagName('img')[0].src = obj.getElementsByTagName('img')[0].src;
            this.o.className=''
            this.o=obj;
            obj.className ='cc';
        },
        Onstop:function(){
        $('left').style.backgroundImage=this._obj.scrollLeft == 0?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453754.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)";
        $('right').style.backgroundImage=this._obj.scrollLeft == 545?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453832.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)";
        }});
    addListener($('right'),'mousedown',function(){ss.Next()});
    addListener($('right'),'mouseover',function(){cbg1(1)});
    addListener($('right'),'mouseout',function(){cbg1(0)});
    addListener($('left'),'mousedown',function(){ss.Pre()});
    addListener($('left'),'mouseover',function(){cbg(1)});
    addListener($('left'),'mouseout',function(){cbg(0)});
function cbg(n){
    if(ss._obj.scrollLeft==0)return;
    $('left').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453941.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453879.p.gif)"
}
function cbg1(n){
    if(ss._obj.scrollLeft==545)return;
    $('right').style.backgroundImage = n?"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453957.p.gif)":"url(http://album.hi.csdn.net/app_uploads/wtcsy/20090622/011453926.p.gif)"
}

function sss(num){
ss.i =num;
}
</script>

===============================后台代码

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.IO;

namespace WebFramework.CommonUpFiles
{
    public partial class UpFilesAndPreview : PageBase
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                BinderRepeater();
            }
        }
        /// <summary>
        /// 类别
        /// </summary>
        public string GetTypeName
        {
            get
            {
                return this.Request["Type"];
            }
        }
        /// <summary>
        /// 单据ID
        /// </summary>
        public string GetOrderID
        {
            get {
                return this.Request["ID"];
            }
        }
        /// <summary>
        ///得到网络路径
        /// </summary>
        public string GetFileHTTPPath
        {
            get
            {
                return this.Request.Url.Scheme + "://" + this.Request.Url.Host + "/" + this.Request.Url.AbsolutePath.Split('/')[1] + "/Doc/CommonUpFiles/" + GetOrderID + "/" + GetTypeName + "/";
            }
        }
        /// <summary>
        /// 得到物理路径
        /// </summary>
        public string GetPhysicsPath
        {
            get
            {
                return this.MapPath("../Doc/CommonUpFiles/" + GetOrderID + "/" + GetTypeName + "/");
            }
        }
        /// <summary>
        /// 绑定显示问题
        /// </summary>
        public void BinderRepeater()
        {
            DataTable dt = new DataTable();
            dt.Columns.Add("FileName", typeof(string));

            DirectoryInfo dir = new DirectoryInfo(GetPhysicsPath);
            if (dir.Exists == false)
                dir.Create();

            foreach (FileInfo NextFile in dir.GetFiles())
            {
                DataRow row = dt.NewRow();
                row["FileName"] = NextFile.Name;
                dt.Rows.Add(row);
            }
            this.Repeater_Images_Item_List.DataSource = dt;
            this.Repeater_Images_Item_List.DataBind();

            if (dt.Rows.Count > 0)
                this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>set_txtSelectFileName('" + dt.Rows[0][0] + "');</script>");
            else
                this.ClientScript.RegisterStartupScript(this.GetType(), "", "<script>set_txtSelectFileName('');</script>");
        }
        /// <summary>
        /// 上传
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void butupFile_ServerClick(object sender, EventArgs e)
        {
            try
            {
                FileUpload1.SaveAs(GetPhysicsPath + FileUpload1.FileName);
                BinderRepeater();
            }
            catch (Exception ex)
            {
                Alert(ex.Message);
            }
        }
        /// <summary>
        /// 删除
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void butDeleteFile_ServerClick(object sender, EventArgs e)
        {
            try
            {
                File.Delete(GetPhysicsPath + this.txtSelectFileName.Text.Trim());
                BinderRepeater();
            }
            catch (Exception ex)
            {
                Alert(ex.Message);
            }
        }
    }
}