当前位置:编程学习 > C#/ASP.NET >>

web在线查看图片控件

有没有一个网页在线的图片查看器的js代码或者是控件
大概要实现的功能就是点击查看按钮或者链接 可以查看一张图片
求大神们帮忙

p.s 图片是存在服务器上面的,没有采用数据库存图片 web 控件 javascript 控件 javascript 查看图片 --------------------编程问答-------------------- jQuery算不算你说的控件呢? --------------------编程问答-------------------- 你是要怎么查看?窗口?网页?下载下来看?  --------------------编程问答--------------------
        <div class="foucs">
            <div class="img_left fl">
                <ul>
                    <asp:Repeater ID="rp_img_list" runat="server">
                        <ItemTemplate>
                            <li class="<%# Container.ItemIndex==0?"hover":"" %>" imgUrl="<%# Eval("PicThumb") %>">
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="800" height="600" valign="middle">
                                            <img src="<%# Container.ItemIndex==0?Eval("PicThumb").ToString():"/images/T16WJqXaXeXXXXXXXX-32-32.gif" %>" />
                                        </td>
                                    </tr>
                                </table>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
                <div class="lof-previous" style="position: absolute;">
                    <img src="/images/icon_lr.png" alpha="true" />
                </div>
                <div class="lof-next" style="position: absolute;">
                    <img src="/images/icon_lr2.png" alpha="true" />
                </div>
            </div>
            <div class="text_right fr foucs_txt">
                <ul>
                    <asp:Repeater ID="rp_txt_list" runat="server">
                        <ItemTemplate>
                            <li class="<%# Container.ItemIndex==0?"hover":"" %>">
                                <h4>
                                简介:
                                </h4>
                                <%# Eval("content")%>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <div class="clear">
            </div>
            <div class="h10">
            </div>
            <div class="foucs_scroll">
                <div class="srcoll_button p_l fl">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="srcoll_main fl tag">
                    <ul>
                    <asp:Repeater ID="rp_tag_list" runat="server">
                    <ItemTemplate>
                        <li class="<%# Container.ItemIndex==0?"hover":"" %>"><img src="<%# Eval("PicThumb2") %>" /></li>
                    </ItemTemplate>
                    </asp:Repeater>     
                    <div class="clear">
                    </div>                   
                    </ul>
                </div>
                <div class="srcoll_button p_r fr">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="clear">
                </div>
                <div class="scrollLine">
                    <span bosszone="gqBar" class="scrollButton"></span>
                </div>
            </div>
        </div>
        <script>
            function foucs() {
                var _c = jQuery(".foucs");
                var _www;
                var _index = 0;
                var _span = 5000;
                var _n = _c.find(".tag li").length;
                var _srcollIndex = 0;
                var _pagesize = 6;
                var _flang = false;
                _c.find(".lof-previous,.lof-next").fadeTo(0, 0);
                function ss() {
                    _flang = true;
                    _c.find(".img_left .hover").fadeTo(300, 0.3, function () {
                        _c.find(".hover").removeClass("hover");
                        _c.find(".img_left .hover,.foucs_txt .hover").hide();
                        _c.find(".img_left li").eq(_index).addClass("hover");
                        _c.find(".tag li").eq(_index).addClass("hover");
                        var position = _c.find(".tag li.hover").position();
                        if (parseInt(position.left) > 0) {
                            var _l = (parseInt(position.left) + parseInt(_c.find(".tag li.hover").outerWidth())) - _c.find(".tag").width();
                            if (_l > 0) {
                                _c.find(".tag").scrollLeft(parseInt(_c.find(".tag").scrollLeft()) + position.left);
                            }
                        }
                        else if (parseInt(position.left) < 0) {
                            var _l = _c.find(".tag").width() - (parseInt(position.left) + parseInt(_c.find(".tag li.hover").outerWidth()));
                            _c.find(".tag").scrollLeft(parseInt(_c.find(".tag").scrollLeft()) - _l);
                        }
                        if (_index > 0) {
                            var _p = (_c.find(".scrollLine").width() - _c.find(".scrollButton").width()) * ((_index + 1) / _n);
                            _c.find(".scrollButton").css("left", _p);
                        }
                        else {
                            _c.find(".scrollButton").css("left", 0);
                        }
                        _c.find(".foucs_txt li").eq(_index).addClass("hover");
                        _c.find(".img_left .hover").fadeTo(0, 0.3);
                        _c.find(".img_left .hover").fadeTo(600, 1, function () {
                            _c.find(".img_left .hover img").attr("src", _c.find(".img_left .hover").attr("imgUrl"));
                            _flang = false;
                        });
                    });

                }
                _c.find(".img_left").hover(function () {
                    _c.find(".lof-previous,.lof-next").fadeTo(300, .7);
                }, function () {
                    _c.find(".lof-previous,.lof-next").fadeTo(300, 0);
                });
                _c.find(".tag li").click(function () {
                    if (!_flang) {
                        _index = jQuery(".tag li").index(jQuery(this));
                        ss();
                    }
                });
                _c.find(".lof-previous").click(function () {
                    if (_index > 0) {
                        if (!_flang) {
                            _index--;
                            ss();
                        }
                    }
                });
                _c.find(".lof-next").click(function () {
                    if (_index < _n - 1) {
                        if (!_flang) {
                            _index++;
                            ss();
                        }
                    }
                    else {
                        alert("已经是最后一页了!");
                    }
                });

                _c.find(".foucs_scroll .p_r a").click(function () {
                    if (!_flang) {
                        _index = (Math.floor(_index / _pagesize) + 1) * _pagesize;
                        if (_index > _n - 1) {
                            _index = _n - 1;
                        }
                        ss();
                    }
                });
                _c.find(".foucs_scroll .p_l a").click(function () {
                    if (!_flang) {
                        _index = (Math.floor(_index / _pagesize) - 1) * _pagesize + (_pagesize - 1);
                        if (_index < 0) {
                            _index = 0;
                        }
                        ss();
                    }
                });
            }

            jQuery(document).ready(function () {
                foucs();
            });
        </script> --------------------编程问答--------------------
引用 3 楼 liuchaolin 的回复:

        <div class="foucs">
            <div class="img_left fl">
                <ul>
                    <asp:Repeater ID="rp_img_list" runat="server">
                        <ItemTemplate>
                            <li class="<%# Container.ItemIndex==0?"hover":"" %>" imgUrl="<%# Eval("PicThumb") %>">
                                <table border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                        <td width="800" height="600" valign="middle">
                                            <img src="<%# Container.ItemIndex==0?Eval("PicThumb").ToString():"/images/T16WJqXaXeXXXXXXXX-32-32.gif" %>" />
                                        </td>
                                    </tr>
                                </table>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
                <div class="lof-previous" style="position: absolute;">
                    <img src="/images/icon_lr.png" alpha="true" />
                </div>
                <div class="lof-next" style="position: absolute;">
                    <img src="/images/icon_lr2.png" alpha="true" />
                </div>
            </div>
            <div class="text_right fr foucs_txt">
                <ul>
                    <asp:Repeater ID="rp_txt_list" runat="server">
                        <ItemTemplate>
                            <li class="<%# Container.ItemIndex==0?"hover":"" %>">
                                <h4>
                                简介:
                                </h4>
                                <%# Eval("content")%>
                            </li>
                        </ItemTemplate>
                    </asp:Repeater>
                </ul>
            </div>
            <div class="clear">
            </div>
            <div class="h10">
            </div>
            <div class="foucs_scroll">
                <div class="srcoll_button p_l fl">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="srcoll_main fl tag">
                    <ul>
                    <asp:Repeater ID="rp_tag_list" runat="server">
                    <ItemTemplate>
                        <li class="<%# Container.ItemIndex==0?"hover":"" %>"><img src="<%# Eval("PicThumb2") %>" /></li>
                    </ItemTemplate>
                    </asp:Repeater>     
                    <div class="clear">
                    </div>                   
                    </ul>
                </div>
                <div class="srcoll_button p_r fr">
                    <a href="javascript:void(0)"></a>
                </div>
                <div class="clear">
                </div>
                <div class="scrollLine">
                    <span bosszone="gqBar" class="scrollButton"></span>
                </div>
            </div>
        </div>
        <script>
            function foucs() {
                var _c = jQuery(".foucs");
                var _www;
                var _index = 0;
                var _span = 5000;
                var _n = _c.find(".tag li").length;
                var _srcollIndex = 0;
                var _pagesize = 6;
                var _flang = false;
                _c.find(".lof-previous,.lof-next").fadeTo(0, 0);
                function ss() {
                    _flang = true;
                    _c.find(".img_left .hover").fadeTo(300, 0.3, function () {
                        _c.find(".hover").removeClass("hover");
                        _c.find(".img_left .hover,.foucs_txt .hover").hide();
                        _c.find(".img_left li").eq(_index).addClass("hover");
                        _c.find(".tag li").eq(_index).addClass("hover");
                        var position = _c.find(".tag li.hover").position();
                        if (parseInt(position.left) > 0) {
                            var _l = (parseInt(position.left) + parseInt(_c.find(".tag li.hover").outerWidth())) - _c.find(".tag").width();
                            if (_l > 0) {
                                _c.find(".tag").scrollLeft(parseInt(_c.find(".tag").scrollLeft()) + position.left);
                            }
                        }
                        else if (parseInt(position.left) < 0) {
                            var _l = _c.find(".tag").width() - (parseInt(position.left) + parseInt(_c.find(".tag li.hover").outerWidth()));
                            _c.find(".tag").scrollLeft(parseInt(_c.find(".tag").scrollLeft()) - _l);
                        }
                        if (_index > 0) {
                            var _p = (_c.find(".scrollLine").width() - _c.find(".scrollButton").width()) * ((_index + 1) / _n);
                            _c.find(".scrollButton").css("left", _p);
                        }
                        else {
                            _c.find(".scrollButton").css("left", 0);
                        }
                        _c.find(".foucs_txt li").eq(_index).addClass("hover");
                        _c.find(".img_left .hover").fadeTo(0, 0.3);
                        _c.find(".img_left .hover").fadeTo(600, 1, function () {
                            _c.find(".img_left .hover img").attr("src", _c.find(".img_left .hover").attr("imgUrl"));
                            _flang = false;
                        });
                    });

                }
                _c.find(".img_left").hover(function () {
                    _c.find(".lof-previous,.lof-next").fadeTo(300, .7);
                }, function () {
                    _c.find(".lof-previous,.lof-next").fadeTo(300, 0);
                });
                _c.find(".tag li").click(function () {
                    if (!_flang) {
                        _index = jQuery(".tag li").index(jQuery(this));
                        ss();
                    }
                });
                _c.find(".lof-previous").click(function () {
                    if (_index > 0) {
                        if (!_flang) {
                            _index--;
                            ss();
                        }
                    }
                });
                _c.find(".lof-next").click(function () {
                    if (_index < _n - 1) {
                        if (!_flang) {
                            _index++;
                            ss();
                        }
                    }
                    else {
                        alert("已经是最后一页了!");
                    }
                });

                _c.find(".foucs_scroll .p_r a").click(function () {
                    if (!_flang) {
                        _index = (Math.floor(_index / _pagesize) + 1) * _pagesize;
                        if (_index > _n - 1) {
                            _index = _n - 1;
                        }
                        ss();
                    }
                });
                _c.find(".foucs_scroll .p_l a").click(function () {
                    if (!_flang) {
                        _index = (Math.floor(_index / _pagesize) - 1) * _pagesize + (_pagesize - 1);
                        if (_index < 0) {
                            _index = 0;
                        }
                        ss();
                    }
                });
            }

            jQuery(document).ready(function () {
                foucs();
            });
        </script>

我试着用用 谢谢

还有功能稍微简单点的么 --------------------编程问答--------------------
引用 2 楼 z_dota 的回复:
你是要怎么查看?窗口?网页?下载下来看? 

点开按钮后,简单点可以是一个列表,点一个图片的名字出来一个图片。
需要的就是点一个链接后,用新网页查看需要的图片 --------------------编程问答-------------------- 没人了么... --------------------编程问答-------------------- 给你的图片外面加一层a标签,并指定新的页面,应该可以实现你的需求,这种有很多方式可以
补充:.NET技术 ,  ASP.NET
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,