点击图片弹出缩略图

js代码：

function ImgShow(evt){
           var imgTag = (window.event) ? event.srcElement : evt.target;
           var imgPath = imgTag.src.replace(/\_\d\./, "_4.");//取得弹出的大图url
           var tagTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
           var tag = document.createElement("div");
           tag.style.cssText = "width:100%;height:" + Math.max(document.body.clientHeight, document.body.offsetHeight, document.documentElement.clientHeight) + "px;position:absolute;background:black;top:0;filter: Alpha(Opacity=80);Opacity:0.8;";
           tag.ondblclick = closes;
           var tagImg = document.createElement("div");
           tagImg.style.cssText = "font:12px /18px verdana;overflow:auto;text-align:center;position:absolute;width:200px;border:5px solid white;background:white;color:white;left:" + (parseInt(document.body.offsetWidth) / 2 - 100) + "px;top:" + (document.documentElement.clientHeight / 3 + tagTop) + "px;"
           tagImg.innerHTML = "<div style=‘padding:10px;background:#cccccc;border:1px solid white‘><img src=‘http://www.newxing.com/img/loading.gif‘ /><br /><br /><b style=‘color:#999999;font-weight:normal‘>Image loading...</b><br /></div>";
           tagImg.oncontextmenu = function(){
               var clsOK = confirm("确定要取消图片显示吗?点击确定将关闭图片。\n如果您是想缩放图片请在图片上双击。");
               if (clsOK) {
                   closes();
               };
               return false
           };
           var closeTag = document.createElement("div");
           closeTag.style.cssText = "display:block;position:absolute;left:82%;top:0px;color:black;font-size:18px;";
           var closesHtml = "<b style=‘background:red;border:1px solid white;filter:Alpha(Opacity=50);Opacity:0.5;cursor:pointer;‘>关闭</b>";
           closeTag.innerHTML = closesHtml + " 提示:双击图片缩放";
           closeTag.onclick = closes;
           document.body.appendChild(tag);
           document.body.appendChild(tagImg);
           var img = new Image();
           img.src = imgPath;
           img.style.cssText = "border:1px solid #cccccc;filter: Alpha(Opacity=0);Opacity:0;cursor:pointer";
           var barShow, imgTime;
           img.complete ? ImgOK() : img.onload = ImgOK;
           function ImgOK(){
               var Stop1 = false, Stop2 = false, temp = 0;
               var tx = tagImg.offsetWidth, ty = tagImg.offsetHeight;
               var ix = img.width, iy = img.height;
               var sx = document.documentElement.clientWidth, sy = window.innerHeight || document.documentElement.clientHeight;
               if (iy > sy || ix > sx) {
                   var yy = sy - 100;
                   var xx = (ix / iy) * yy;
               }
               else {
                   var xx = ix + 100;
                   var yy = iy + 100;
               }
               img.style.width = xx - 4 + ‘px‘;
               img.style.height = yy - 3 + ‘px‘;
               if (ix < sx && iy < sy) {
                   tagImg.alt = "";
                   closeTag.innerHTML = closesHtml;
               };
               //closeTag.innerHTML=closesHtml;
               var maxTime = setInterval(function(){
                   temp += 35;
                   if ((tx + temp) < xx) {
                       tagImg.style.width = (tx + temp) + "px";
                       tagImg.style.left = (sx - (tx + temp)) / 2 + "px";
                   }
                   else {
                       Stop1 = true;
                       tagImg.style.width = xx + "px";
                       tagImg.style.left = (sx - xx) / 2 + "px";
                   }
                   if ((ty + temp) < yy) {
                       tagImg.style.height = (ty + temp) + "px";
                       tagImg.style.top = (tagTop + ((sy - (ty + temp)) / 2)) + "px";
                   }
                   else {
                       Stop2 = true;
                       tagImg.style.height = yy + "px";
                       tagImg.style.top = (tagTop + ((sy - yy) / 2)) + "px";
                   }
                   if (Stop1 && Stop2) {
                       clearInterval(maxTime);
                       tagImg.appendChild(img);
                       temp = 0;
                       imgOPacity();
                   }
               }, 1);
               function imgOPacity(){
                   temp += 10;
                   img.style.filter = "alpha(opacity=" + temp + ")";
                   img.style.opacity = temp / 100;
                   imgTime = setTimeout(imgOPacity, 1)
                   if (temp > 100)
                       clearTimeout(imgTime);
               }
               tagImg.innerHTML = "";
               tagImg.appendChild(closeTag);
              
               if (ix > xx || iy > yy) {
                   img.alt = "左键拖动,双击放大缩小";
                   img.ondblclick = function(){
                       if (tagImg.offsetWidth < img.offsetWidth || tagImg.offsetHeight < img.offsetHeight) {
                           img.style.width = "auto";
                           img.style.height = "100%";
                           img.alt = "双击可以放大";
                           img.onmousedown = null;
                           closeTag.style.top = "10px";
                           closeTag.style.left = "10px";
                           tagImg.style.overflow = "visible";
                           tagImg.style.width = img.offsetWidth + "px";
                           tagImg.style.left = ((sx - img.offsetWidth) / 2) + "px";
                       }
                       else {
                           img.style.width = ix + "px";
                           img.style.height = iy + "px";
                           img.alt = "双击可以缩小";
                           img.onmousedown = dragDown;
                           tagImg.style.overflow = "auto";
                           tagImg.style.width = (ix < sx - 100 ? ix + 20 : sx - 100) + "px";
                           tagImg.style.left = ((sx - (ix < sx - 100 ? ix + 20 : sx - 100)) / 2) + "px";
                       }
                   }
                   img.onmousedown = dragDown;
                   tagImg.onmousemove = barHidden;
                   tagImg.onmouseout = moveStop;
                   document.onmouseup = moveStop;
               }
               else {
                   tagImg.style.overflow = "visible";
                   //tagImg.onmousemove = barHidden;
               }
           }
           function dragDown(a){
               img.style.cursor = "move";
               var evts = a || window.event;
               var onx = evts.clientX, ony = evts.clientY;
               var sox = tagImg.scrollLeft, soy = tagImg.scrollTop;
               var sow = img.width + 2 - tagImg.clientWidth, soh = img.height + 2 - tagImg.clientHeight;
               var xxleft, yytop;
               document.onmousemove = function(e){
                   var evt = e || window.event;
                   xxleft = sox - (evt.clientX - onx) < 0 ? "0" : sox - (evt.clientX - onx) > sow ? sow : sox - (evt.clientX - onx);
                   yytop = soy - (evt.clientY - ony) < 0 ? "0" : soy - (evt.clientY - ony) > soh ? soh : soy - (evt.clientY - ony);
                   tagImg.scrollTop = yytop;
                   tagImg.scrollLeft = xxleft;
                   closeTag.style.top = (yytop + 10) + "px";
                   closeTag.style.left = (xxleft + 10) + "px";
                   return false;
               }
               return false;
           }
           function barHidden(){
               clearTimeout(barShow);
               closeTag.style.top = (tagImg.scrollTop + 10) + "px";
               closeTag.style.left = (tagImg.scrollLeft + 10) + "px";
               if (closeTag.style.display == "none")
                   closeTag.style.display = "block";
               barShow = setTimeout(function(){
                   closeTag.style.display = "block";
               }, 1000);
           }
           function closes(){
               document.body.removeChild(tag);
               document.body.removeChild(tagImg);
               clearTimeout(barShow);
               clearTimeout(imgTime);
               document.onmouseup = null;
               tag = img = tagImg = closeTag = null;
           }
           function moveStop(){
               document.onmousemove = null;
               tagImg.onmousemove = barHidden;
               img.style.cursor = "pointer";
           }
       }
      
       //事件绑定部分
       if (document.getElementById("mydiv")) {
           var workTag = document.getElementById("mydiv");
          
           var workImg = workTag.getElementsByTagName("img"); //注册此处会把 workDemo下的所有img选中，包括子集下的子集。
           var worka = workTag.getElementsByTagName("a");
           for (var i = 0; i < workImg.length; i++) {
               workImg[i].onclick = ImgShow;
               worka[i].href = "##"
           }
       }
前台代码：

<div class="color1" id="mydiv"><b class="b1"></b><b class="b2"></b><b class="b3"></b><b class="b4"></b><div class="content">
         <asp:DataList ID="dlContent" runat="server" OnItemCommand="dlContent_ItemCommand"
            Font-Bold="False" Font-Italic="False"
            Font-Overline="False" Font-Strikeout="False" Font-Underline="False"
            HorizontalAlign="Center" Font-Size="Small"
            ShowHeader="False" Width="100%" RepeatColumns="3" RepeatDirection="Horizontal" BackColor="#BBEDD0" BorderColor="#3366CC" BorderWidth="1px" CellPadding="0" BorderStyle="None" CellSpacing="2" ForeColor="#34599D">
            <FooterStyle BackColor="#F7DFB5" ForeColor="#8C4510" />
            <HeaderStyle BackColor="#A55129" Font-Bold="True" ForeColor="White" />
            <ItemStyle VerticalAlign="Middle" BackColor="#BBEDD0" Font-Bold="False" Font-Italic="False" Font-Overline="False" Font-Strikeout="False" Font-Underline="False" ForeColor="#6079AE" />
            <ItemTemplate>
           
            <a href="#" runat="server">
            <asp:Image ID="userphoto" ImageUrl=‘<%# Eval("photourl") %>‘ runat="server" CssClass="image"/><br /></a>
            <asp:Label ID="username" runat="server" Text=‘<%# Eval("agentname") %>‘ CssClass="odd"></asp:Label>
                <asp:Label ID="vnum" runat="server" Text=‘<%# Eval("votenum") %>‘></asp:Label>票
            <br /><asp:ImageButton runat="server" ID="ImageVote" ImageUrl="~/images/zan_btn.png"  CommandName="vote" CssClass="imgbtn"/>
            
            </ItemTemplate>
            <SelectedItemStyle BackColor="#738A9C" ForeColor="White" Font-Bold="True" />
        </asp:DataList>
        <div class="style_msg">
        <asp:Label ID="alert" runat="server" Text="" CssClass="alert"></asp:Label>
        |<asp:Button ID="lnkbtnUp" text="上一页" runat="server" OnClick="lnkbtnUp_Click"/>|<asp:Button ID="lnkbtnNext" runat="server" Text="下一页" OnClick="lnkbtnNext_Click"/>|<asp:Button ID="lnkbtnFst" runat="server" Text="首页" OnClick="lnkbtnFst_Click"/>|<asp:Button ID="lnkbtnLast" runat="server" Text="末页" OnClick="lnkbtnLast_Click"/>|<br />
                    第<asp:Label ID="labPage" runat="server" Text="1"></asp:Label>页,共<asp:Label ID="labLstPage" runat="server"></asp:Label>页</div>
      </div><b class="b5"></b><b class="b6"></b><b class="b7"></b><b class="b8"></b></div>
            </div>

时间： 2024-08-03 20:28:06

点击图片弹出缩略图的相关文章

前端jquery实现点击图片弹出大图层(且滚动鼠标滑轮图片缩放)

<img src="{$vo.photo}" height="50px" onclick="showdiv({$i});"> <div id="bg"></div> <div id="show{$i}" class="show" style="display:none;"> <img src="{$vo.

jQuery点击图片弹出大图遮罩层

使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产品展示功能过程中,因为要把产品图片的大图显示给用户看,就使用jQuery制作了一个插件:HoverTreeShow ,使用该插件可以很方便的弹出图片的大图,已经运用在项目中了,除了上面链接的示例外,HoverTreeTop项目的产品展示也是一个实例,请访问链接:http://hovertree.co

点击图片弹出大图

//css * {margin:0;padding:0;} #imglist {list-style:none; width:500px; margin:50px auto;} #imglist li {float:left; margin-top:10px;} html代码 <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:1

点击图片弹出浮层显示大图

HTML <!-- 承载大图片的div --> <div id="outerdiv" style="position:fixed;top:0;left:0;background:rgba(0,0,0,0.7);z-index:2;width:100%;height:100%;display:none;"> <div id="innerdiv" style="position:absolute;"&

jQuery点击图片弹出放大特效下载

效果体验:http://hovertree.com/texiao/jqimg/1/ 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美女图片浏览特效 - 何问起</title> <link href=&q

HTML+js+css实现点击图片弹出上传文件窗口的两种思路

第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfile.png);        position:relative;        width: 256px;    }    .fileInput{        height:256px;        overflow: hidden;        font-size: 300px;        po

设置点击文本框或图片弹出日历控件

<input id="startDate" value="" readonly="true" type="text" style="cursor: pointer" class="user_datepicker "><input class="canlderImg" data-tag="start" type="imag

jQuery插件之文章图片弹出放大效果

首先先搭写一个基本的格式: $.fn.popImg = function() { //your code goes here } 然后用自调用匿名函数包裹你的代码,将系统变量以变量形式传递到插件内部,如下: ;(function($,window,document,undefined){ $.fn.popImg = function() { //your code goes here } })(jQuery,window,document); 那么接下来我们就在里面实现点击文章图片弹出该图片并放

改善用户体验之wordpress添加图片弹出层效果 (插件 FancyBox）

下面说说在改善用户体验之wordpress添加图片弹出层效果.效果图如下: 像这篇文章如何在百度搜索结果中显示网站站点logo? 文章内有添加图片,没加插件之前用户点击图片时,是直接_black打开新窗口到 图片地址,非常不友好,很不和谐!添加wordpress添加图片弹出层效果之后如上所示效果.逼格瞬间提高! 打造这个效果的这款插件名称是FancyBox for WordPress