鼠标悬浮停留三秒后显示大图 ， 在网页中还是比较实用的
<style>*{margin:0;padding:0;list-style-type:none;}img,a{border:0;}.piccon{height:75px;margin:100px 0 0 50px;}.piccon li{float:left;padding:0 10px;}#preview{position:absolute;border:1px solid #ccc; arrière-plan: # 333; padding: 5px; affichage: Aucun; couleur: #fff; z-index: 2000;} </ style> <script type = "text / javascript"> this.imagepreview = function () {xoffset = 10; yoffset = 30; var urll; $ (". widget .ks-contenu a, .box .ks-switchable-content div li a"). hover (function () {// $ (". widget .ks-content a"). $ (this) .attr ("href"). remplacer ("biens /", ""); var biens_id = $ (this) .attr ("href"). Remplace ("index.php? app = goches & id =", ""); this.t = this.title; this.title = ""; var c = (this.t! = "")? "; $. Post (" index.php? App = Default & Act = ajaxBigImage ", {biens_id: biens_id}, fonction (data) {$. ajaxsettings.async = false; if (data! = 0) {urll = data; $ (" body "). + "</div>"); return true;} else {return false;}}); / * $ ("# aperview"). css ("top", (e.pagey - xoffset) + "px"). CSS ("Left", (e.pagex + yoffset) + "PX"). Fadein ("Fast"); * / $ ('# préview'). CSS ({position: 'Absolute', gauche: ($ (window) .width () - $ ('# préview'). OuterWidth ()) / 2, top: ($ (Window) .Height () - $ ('# aperview'). OUTERHEight () / 2 + $ (document) .scrollTop ()}); setTimeout (function () {$ ("# préview"). fadein ("fast");}, 3000)}, function () {this.title = this.t; $ ("# aperview"). retire ();}); / * $ ("a.preview"). MousMove (fonction (e) {$ ("# aperview"). CSS ("top", (e.pagey - xoffset) + "px"). CSS ("Left", (e.pagex + yoffset) + + "px");}); * /}; $ (document) .ready (function () {imagePreview ();}); </ script> <div id = "_ widget_579" name = "jdr_sale_list" widget_type = "widget"> <div> <h2> 销售排行 </h2> <div> <ul> <li> 特效礼花 </li> <li> 套餐烟花 </li> </ul> <v> <ul id = "box1_1476271702"> <li> <v> <a href = "index.php? src = "data / fichiers / store_927 / boyages_51 / small_201312121557314803.jpg"> </a> <b> 1 </b> </div> <div> <div> <A href = "index.php? app = bourse & id = 331"> 【81 发六锦系列组合烟花】 </a> </div> <div> ¥ 200.00 </div> </div> </li> <li> <div> <a href = "index.php? App = bourse & id = 336"> <img src = "data / fichiers / store_927 / boyages_33 / small_201312121630335585.jpg"> </a> <b> 2 </b> </div> <v> <v> <A href = "index.php? app = bourse & id = 336"> 【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利 </a> </div> <div> ¥ 180.00 </div> </div> </li> <li> <div> <a href = "index.php? App = bourse & id = 375"> <img src = "data / fichiers / store_927 / goches_193 / small_201312130956337166.jpg"> </a> <b> 3 </b> </div> <v> <div> <A href = "index.php? app = bourse & id = 375"> 【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来 </a> </div> <div> ¥ 260.00 </div> </div> </li> <li style = "Border-Color: #fff;" src = "data / fichiers / store_927 / bourse_197 / small_201312131059578989.jpg"> </a> <b> 4 </b> </v> <v> <v> <A href = "index.php? app = bourse & id = 399"> 合家欢乐组合烟花 / 小礼花 </a> </div> <div> ¥ 480.00 </div> </div> </li> </ul> <ul id = "box2_1476271702" style = "Display: None;"> <li> <div> <A href = "index.php? app = bourse & id = 310"> <img src = "data / files / store_927 / goches_92 / small_201312121508128170.jpg"> </a> <b> 1 </b> </v> <v> <div> <a href = "index.php? app = bourse & id = 310"> 套餐烟花 - 儿孙满堂 </a> </div> <div> ¥ 888.00 </div> </div> </li> <li> <div> <a href = "index.php? App = bourse & id = 305"> <img src = "data / fichiers / store_927 / boyages_136 / small_201312121455369033.jpg"> </a> <b> 2 </b> </v> <v> <div> <A href = "index.php? app = bourse & id = 305"> 套餐烟花 - 六六大顺 </a> </div> <div> ¥ 666.00 </div> </div> </li> <li> <div> <a href = "index.php? App = bourse & id = 303"> <img src = "data / fichiers / store_927 / bourse_118 / small_201312121451582290.jpg"> </a> <b> 3 </b> </div> <div> <div> <A href = "index.php? app = bourse & id = 303"> 套餐烟花 - 一路顺发 </a> </div> <div> ¥ 1,688.00 </div> </div> </li> <li style = "Border-Color: #fff;" src = "data / fichiers / store_927 / bourse_14 / small_201312121443346243.jpg"> </a> <b> 4 </b> </div> <div> <div> <A href = "index.php? app = bourse & id = 300"> 套餐烟花 - 喜事连连 </a> </div> <div> ¥ 1,288.00 </div> </div> </li> </ul> </div> </div> </div> 后端处理 // ajaxfunction ajaxbigimage () {if (! vide ($ _ poster ['goches_id'])) {$ bourse_id = $ _ post ['goches_id']; $ woodsimg_mod = & m ('woodsimage'); $ uploadfile_mod = & m ('uploadfile'); // $ file_id = $ bienmg_mod-> getone ("sélection `ECM_GOODS_IMAGE` WHERE GARCHES_ID = {$ bourse_id} Ordre par fichier_id desc"); // 获取 file_id 字符串 $ file_arr = $ woodsimg_mod-> getCol ("SELECT File_id dans` ECM_GOODS_IMAGE` WHERE GARCHED_ID = {$ Woods_id} ordonnance par file_id_id Desc "); if (! Vide ($ file_arr)) {$ file_str = implode (", ", $ file_arr);} // echo $ file_str; $ url_arr = $ uploadfile_mod-> getall (" select file_type, file_path à partir de `ecm_upload_file` where_id dans ({$ file_str} commander par addition Desc "); if (! Vide ($ url_arr)) {foreach ($ url_arr as $ v) {if ($ v ['file_type'] == 'image / gif') {$ url = $ v ['file_path']; break; eTET ();} else {unset ($ v);}}} // $ url = uploadfile file_path à partir de `ECM_UPLOLODED_FILE` WHERE FILE_ID = {$ file_id} Ordre par add_time desc"); if (! vide ($ url)) {echo $ url; exit ();} else {echo 0; exit ();}} else {echo 0;}}