點選連結後,彈出另一個浮動視窗,全屏變暗遮罩效果,適用於下載站
阿新 • • 發佈：2019-01-28
效果圖
首先,要引入jquery及jquery.imagePreview.1.0.js外掛
jquery.js 自己下載
而jquery.imagePreview.1.0.js外掛內容為
// JavaScript Document //copyright c by zhangxinxu 2009-10-17 //http://www.zhangxinxu.com /*由於大圖繫結在href屬性中，故一般而言，需使用a標籤的href指向大圖。僅支援png,gif,jpg,bmp四種格式的圖片。用法是：目標.preview(); 例如：<a href="xx.jpg">圖片</a> $("a").preview();就可以了 */ (function($){ $.fn.preview = function(){ var xOffset = 10; var yOffset = 20; var w = $(window).width(); $(this).each(function(){ $(this).hover(function(e){ if(/.png$|.gif$|.jpg$|.bmp$/.test($(this).attr("data"))){ //$("body").append("<div id='preview'><div><img src='"+$(this).attr('data')+"' /><p>"+$(this).attr('title')+"</p></div></div>"); $("body").append("<div id='preview'><div><img height='455' width='277' src='"+$(this).attr('data')+"' /></div></div>"); }else{ $("body").append("<div id='preview'><div><p>"+$(this).attr('title')+"</p></div></div>"); } $("#preview").css({ position:"absolute", padding:"4px", border:"1px solid #f3f3f3", backgroundColor:"#eeeeee", top:(e.pageY - yOffset) + "px", zIndex:1000 }); $("#preview > div").css({ padding:"5px", backgroundColor:"white", border:"1px solid #cccccc" }); $("#preview > div > p").css({ textAlign:"center", fontSize:"12px", padding:"8px 0 3px", margin:"0" }); if(e.pageX < w/2){ $("#preview").css({ left: e.pageX + xOffset + "px", right: "auto" }).fadeIn("fast"); }else{ $("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left", "auto").fadeIn("fast"); } },function(){ $("#preview").remove(); }).mousemove(function(e){ $("#preview").css("top",(e.pageY - xOffset) + "px") if(e.pageX < w/2){ $("#preview").css("left",(e.pageX + yOffset) + "px").css("right","auto"); }else{ $("#preview").css("right",(w - e.pageX + yOffset) + "px").css("left","auto"); } }); }); }; })(jQuery);
然後,模板內容為
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>安卓</title> <script language="javascript" type="text/javascript" src="jquery.js" ></script> <script language="javascript" type="text/javascript" src="jquery.imagePreview.1.0.js" ></script> <script language="javascript" type="text/javascript"> $(function(){ $("a.preview").preview(); $('.aaa').click(function () { $(".boxout").css({"display":"block"}); event.stopPropagation(); //停止事件冒泡 $(".bgbox").toggle(); //$('body,html').animate({scrollTop:0},550); }); $(".closes").click(function(event){ event.stopPropagation(); //停止事件冒泡 $(".bgbox").toggle(); $(".boxout").css({"display":"none"}); }); //點選空白處隱藏彈出層 //$("body").click(function(event){ // var _con = $('.boxout'); // 設定目標區域 // if(!_con.is(event.target) && _con.has(event.target).length ==0){ // _con.hide(); //淡出消失 // $(".bgbox").toggle(); // } //}); }); </script> </head> <body> <div class="bgbox"></div> <span class="html-tag" style="font-family: monospace;font-size:14px; white-space: pre-wrap;"><a <span class="html-attribute-name">class</span>="<span class="html-attribute-value">aaa</span>"<span class="html-attribute-name">href</span>="<a target=_blank class="html-attribute-value html-external-link" target="_blank">javascript:void(0);</a>" <span class="html-attribute-name">onclick</span>="<span class="html-attribute-value">window.open('/download/23199_4298.html')</span>" <span class="html-attribute-name">style</span>="<span class="html-attribute-value">color:#FFF;</span>"></span><span style="font-family: monospace;font-size:14px; white-space: pre-wrap;">本地下載</span><span class="html-tag" style="font-family: monospace;font-size:14px; white-space: pre-wrap;"></a></span>其它頁面內容 <style type="text/css"> .bgbox{background: #fff; display: none;position: absolute;position: fixed; top: 0; right: 0; left: 0; bottom: 0px; background: rgba(0,0,0,.3); z-index: 10; } html { margin:0; padding:0; border:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; -webkit-tap-highlight-color:rgba(0,0,0,0) } body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,code,del,dfn,em,q,dl,dt,dd,ol,ul,li,fieldset,form,legend,caption,tbody,tfoot,thead,article,aside,dialog,figure,footer,header,hgroup,nav,section {list-style:none; margin:0; padding:0; border:0; font-size:14px; font:inherit; vertical-align:baseline } article,aside,details,figcaption,figure,dialog,footer,header,hgroup,menu,nav,section { display:block } body { font-size:14px; color:#333; background:#fff; font-family:"Microsoft YaHei","simsun","Helvetica Neue",Arial,Helvetica,sans-serif } img { border:0; vertical-align:bottom } ::-webkit-input-placeholder { color:#999 } .boxout{ background:#fff; z-index: 111;display:none; box-shadow: 0 1px 4px #AAA; position: fixed; _position:absolute; /* hack for IE6 */ top: 50%; left: 50%; margin: -201px 0 0 -480px; /* 注意,201表示高度的一半,480也是按自己需要自己調整*/ width:960px; height:400px; padding:15px; height:400px } .box_in1{z-index: 111;;display:inline-block } .box_in1 li{width:180px;height:48px;display:inline-block;float:left; margin:12px;margin-left:0} .box_in1 li img { float: left; width: 48px; height: 48px; margin-right: 10px; } .box_in1 li p a { display: block; height: 24px; line-height: 24px; overflow: hidden; font-size: 14px; color: #333; } .box_in1 li p em{ display: block; heihgt: 20px; line-height: 20px; overflow: hidden; } .box_in1 li p em s { margin: 0 3px;font-style: normal; } .box_in2 { z-index: 11; } .box_in2 li { width:78px;height:82px;text-align:center;margin-top:20px;display: inline-block; } .box_in2 li p a{ font-size:12px } hr { background:#ddd; color:#ddd; clear:both; float:none; width:100%; height:1px; margin:2px 0; border:0; -moz-box-sizing:content-box; box-sizing:content-box } hr.space { background:#fff; color:#fff; visibility:hidden } </style> <div class="boxout"> <h1 style="color:#15d292;font-size:24px;">其中一個<span style="color:#111">正在下載,使用者還下載了</span><span class="closes"style="position:absolute;right:10px;top:10px;background:#8f8f8f;font-size:14px;color:#fff;padding:4px">關閉</span></h1> <br/> <h2 style="color:##15d292;font-size:18px">軟體分類 <a href=""><span style="float:right;font-size:14px;font-weight:bold;color:red;">更多(25)>></span></a></h2> <div class="box_in1"> <li> <a class="preview"href="http://"data="http://pic.pc6.com/up/2016-1/2016117211947.jpg"><img src="360.jpg" alt="" /></a> <p><a >360安全1瀏覽器</a></p> <em>42.3M / 簡體 / 7.8</em> </li> <li> <img src="360.jpg" alt="" /> <p>360安全瀏覽器</p> <em>42.3M / 簡體 / 7.8</em> </li> <li> <img src="360.jpg" alt="" /> <p>360安全瀏覽器</p> <em>42.3M / 簡體 / 7.8</em> </li> <li> <img src="360.jpg" alt="" /> <p>360安全瀏覽器</p> <em>42.3M / 簡體 / 7.8</em> </li> <li> <img src="360.jpg" alt="" /> <p>360安全瀏覽器</p> <em>42.3M / 簡體 / 7.8</em> </li> <li> <img src="360.jpg" alt="" /> <p>360安全瀏覽器</p> <em>42.3M / 簡體 / 7.8</em> </li> </div> <hr /> <div class="box_in2"> <li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li><li><a href=""><img src="360.jpg" alt="" /></a> <p><a href="">360安全瀏覽器</a></p> </li> </div> </div> </body></html>
