鼠標懸浮停留三秒後顯示大圖，在網頁中還是比較實用的
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-active nav1">特效禮花</li> 072 <li class="nav2">套餐煙花</li> 073 </ul> 074 <div class="ks-content"> 075 <ul class="box" id="box1_1476271702"> 076 <li > 077 <div class="pic"><a href="index.php?app=goods&id=331"><img alt="【81發六錦系列組合煙花】" src="data/files/store_927/goods_51/small_201312121557314803.JPG" height="60" width="60"></a><b>1</b></div> 078 <div class="info"> 079 <div class="title"><a href="index.php?app=goods&id=331">【81發六錦系列組合煙花】</a></div> 080 <div class="price">¥200.00</div> 081 </div> 082 </li> 083 <li > 084 <div class="pic"><a href="index.php?app=goods&id=336"><img alt="【八喜系列組合煙花】五福臨門、六六大順、七星高照、八方得利" src="data/files/store_927/goods_33/small_201312121630335585.JPG" height="60" width="60"></a><b>2</b></div> 085 <div class="info"> 086 <div class="title"><a href="index.php?app=goods&id=336">【八喜系列組合煙花】五福臨門、六六大順、七星高照、八方得利</a></div> 087 <div class="price">¥180.00</div> 088 </div> 089 </li> 090 <li > 091 <div class="pic"><a href="index.php?app=goods&id=375"><img alt="【五福系列組合煙花】福運長流、福滿人間、福壽滿堂、福如東海、福到財來" src="data/files/store_927/goods_193/small_201312130956337166.JPG" height="60" width="60"></a><b>3</b></div> 092 <div class="info"> 093 <div class="title"><a href="index.php?app=goods&id=375">【五福系列組合煙花】福運長流、福滿人間、福壽滿堂、福如東海、福到財來</a></div> 094 <div class="price">¥260.00</div> 095 </div> 096 </li> 097 <li style="border-color:#fff;" > 098 <div class="pic"><a href="index.php?app=goods&id=399"><img alt="合家歡樂組合煙花小禮花" src="data/files/store_927/goods_197/small_201312131059578989.JPG" height="60" width="60"></a><b>4</b></div> 099 <div class="info"> 100 <div class="title"><a href="index.php?app=goods&id=399">合家歡樂組合煙花小禮花</a></div> 101 <div class="price">¥480.00</div> 102 </div> 103 </li> 104 </ul> 105 <ul class="box box2" id="box2_1476271702" style="display:none;"> 106 <li > 107 <div class="pic"><a href="index.php?app=goods&id=310"><img alt="套餐煙花-兒孫滿堂" src="data/files/store_927/goods_92/small_201312121508128170.jpg" height="60" width="60"></a> <b>1</b></div> 108 <div class="info"> 109 <div class="title"><a href="index.php?app=goods&id=310">套餐煙花-兒孫滿堂</a></div> 110 <div class="price">¥888.00</div> 111 </div> 112 </li> 113 <li > 114 <div class="pic"><a href="index.php?app=goods&id=305"><img alt="套餐煙花-六六大順" src="data/files/store_927/goods_136/small_201312121455369033.jpg" height="60" width="60"></a> <b>2</b></div> 115 <div class="info"> 116 <div class="title"><a href="index.php?app=goods&id=305">套餐煙花-六六大順</a></div> 117 <div class="price">¥666.00</div> 118 </div> 119 </li> 120 <li > 121 <div class="pic"><a href="index.php?app=goods&id=303"><img alt="套餐煙花-一路順發" src="data/files/store_927/goods_118/small_201312121451582290.jpg" height="60" width="60"></a> <b>3</b></div> 122 <div class="info"> 123 <div class="title"><a href="index.php?app=goods&id=303">套餐煙花-一路順發</a></div> 124 <div class="price">¥1,688.00</div> 125 </div> 126 </li> 127 <li style="border-color:#fff;" > 128 <div class="pic"><a href="index.php?app=goods&id=300"><img alt="套餐煙花-喜事連連" src="data/files/store_927/goods_14/small_201312121443346243.jpg" height="60" width="60"></a> <b>4</b></div> 129 <div class="info"> 130 <div class="title"><a href="index.php?app=goods&id=300">套餐煙花-喜事連連</a></div> 131 <div class="price">¥1,288.00</div> 132 </div> 133 </li> 134 </ul> 135 </div> 136 </div> 137 </div> 138 139 140 後端處理 141 142 //ajax 143 function ajaxBigImage() 144 { 145 146 if(!empty($_POST['goods_id'])){ 147 $goods_id=$_POST['goods_id']; 148 149 $goodsimg_mod = & m('goodsimage'); 150 $uploadedfile_mod = & m('uploadedfile'); 151 //$file_id = $goodsimg_mod->getOne("select file_id from `ecm_goods_image` WHERE goods_id={$goods_id} ORDER BY file_id DESC"); 152 153 //獲取file_id 字符串 154 $file_arr = $goodsimg_mod->getCol("select file_id from `ecm_goods_image` WHERE goods_id={$goods_id} ORDER BY file_id DESC"); 155 if(!empty($file_arr)){ 156 $file_str = implode(",",$file_arr); 157 } 158 //echo $file_str; 159 160 $url_arr = $uploadedfile_mod->getAll("select file_type,file_path from `ecm_uploaded_file` WHERE file_id IN({$file_str}) ORDER BY add_time DESC"); 161 162 if(!empty($url_arr)){ 163 foreach ($url_arr as $v){ 164 if($v['file_type'] == 'image/gif'){ 165 $url = $v['file_path']; 166 break; 167 exit(); 168 }else { 169 unset($v); 170 } 171 } 172 } 173 174 //$url = $uploadedfile_mod->getOne("select file_path from `ecm_uploaded_file` WHERE file_id={$file_id} ORDER BY add_time DESC"); 175 176 if(!empty($url)){ 177 echo $url; 178 exit(); 179 }else{ 180 echo 0; 181 exit(); 182 } 183 }else{ 184 echo 0; 185 } 186 }