鼠標懸浮停留三秒後顯示大圖,在網頁中還是比較實用的
1 <style> 2 *{margin:0;padding:0;list-style-type:none;} 3 img,a{border:0;} 4 .piccon{height:75px;margin:100px 0 0 50px;} 5 .piccon li{float:left;padding:0 10px;} 6 #preview{position:absolute;border:1px solid #ccc;background:#333;padding:5px;display:none;color:#fff;z-index:2000;} 7 </style> 001 <script type="text/javascript"> 002 this.imagePreview = function(){ 003 004 xOffset = 10; 005 yOffset = 30; 006 var urll; 007 $(".widget .ks-content a,.box .ks-switchable-content div li a").hover(function(){ 008 //$(".widget .ks-content a").hover(function(e){ 009 //var goods_id = $(this).attr("href").replace("goods/", ""); 010 var goods_id = $(this).attr("href").replace("index.php?app=goods&id=", ""); 011 this.t = this.title; 012 this.title = " "; 013 var c = (this.t != "") ? "<br/>" + this.t : " "; 014 015 $.post("index.php?app=default&act=ajaxBigImage", {goods_id: goods_id},function(data){ 016 $.ajaxSettings.async = false; 017 if(data!=0){ 018 urll = data; 019 020 $("body").append("<div id='preview'><img src="+ urll +" />"+ c +"</div>"); 021 return true; 022 }else{ 023 return false; 024 } 025 }); 026 /* 027 $("#preview") 028 .css("top",(e.pageY - xOffset) + "px") 029 .css("left",(e.pageX + yOffset) + "px") 030 .fadeIn("fast"); 031 */ 032 $('#preview').css({ 033 position:'absolute', 034 left: ($(window).width() - $('#preview').outerWidth())/2, 035 top: ($(window).height() - $('#preview').outerHeight())/2 + $(document).scrollTop() 036 }); 037 038 setTimeout(function(){ 039 $("#preview").fadeIn("fast"); 040 },3000) 041 042 043 }, 044 function(){ 045 this.title = this.t; 046 $("#preview").remove(); 047 }); 048 049 /* 050 $("a.preview").mousemove(function(e){ 051 $("#preview") 052 .css("top",(e.pageY - xOffset) + "px") 053 .css("left",(e.pageX + yOffset) + "px"); 054 }); 055 */ 056 057 }; 058 059 $(document).ready(function(){ 060 imagePreview(); 061 }); 062 063 </script> 064 065 066 <div id="_widget_579" name="jdr_sale_list" widget_type="widget" class="widget"> 067 <div class="sale_list mt10 clearfix"> 068 <h2>銷售排行</h2> 069 <div> 070 <ul class="ks-nav ks-nav1476271702"> 071 <li class="ks-ac