鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的
<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;background:#333;padding:5px;display:none;color:#fff;z-index:2000;} </style>
<script type=\"text/javascript\"> this.imagePreview = function(){ xOffset = 10; yOffset = 30; var urll; $(\".widget .ks-content a,.box .ks-switchable-content div li a\").hover(function(){ //$(\".widget .ks-content a\").hover(function(e){ //var goods_id = $(this).attr(\"href\").replace(\"goods/\", \"\"); var goods_id = $(this).attr(\"href\").replace(\"index.php?app=goods&id=\", \"\"); this.t = this.title; this.title = \" \"; var c = (this.t != \"\") ? \"<br/>\" + this.t : \" \"; $.post(\"index.php?app=default&act=ajaxBigImage\", {goods_id: goods_id},function(data){ $.ajaxSettings.async = false; if(data!=0){ urll = data; $(\"body\").append(\"<div id=\'preview\'><img src=\"+ urll +\" />\"+ c +\"</div>\"); return true; }else{ return false; } }); /* $(\"#preview\") .css(\"top\",(e.pageY - xOffset) + \"px\") .css(\"left\",(e.pageX + yOffset) + \"px\") .fadeIn(\"fast\"); */ $(\'#preview\').css({ position:\'absolute\', left: ($(window).width() - $(\'#preview\').outerWidth())/2, top: ($(window).height() - $(\'#preview\').outerHeight())/2 + $(document).scrollTop() }); setTimeout(function(){ $(\"#preview\").fadeIn(\"fast\"); },3000) }, function(){ this.title = this.t; $(\"#preview\").remove(); }); /* $(\"a.preview\").mousemove(function(e){ $(\"#preview\") .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\" class=\"widget\"> <div class=\"sale_list mt10 clearfix\"> <h2>销售排行</h2> <div> <ul class=\"ks-nav ks-nav1476271702\"> <li class=\"ks-active nav1\">特效礼花</li> <li class=\"nav2\">套餐烟花</li> </ul> <div class=\"ks-content\"> <ul class=\"box\" id=\"box1_1476271702\"> <li > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=331\">【81发六锦系列组合烟花】</a></div> <div class=\"price\">¥200.00</div> </div> </li> <li > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=336\">【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利</a></div> <div class=\"price\">¥180.00</div> </div> </li> <li > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=375\">【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来</a></div> <div class=\"price\">¥260.00</div> </div> </li> <li style=\"border-color:#fff;\" > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=399\">合家欢乐组合烟花\\小礼花</a></div> <div class=\"price\">¥480.00</div> </div> </li> </ul> <ul class=\"box box2\" id=\"box2_1476271702\" style=\"display:none;\"> <li > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=310\">套餐烟花-儿孙满堂</a></div> <div class=\"price\">¥888.00</div> </div> </li> <li > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=305\">套餐烟花-六六大顺</a></div> <div class=\"price\">¥666.00</div> </div> </li> <li > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=303\">套餐烟花-一路顺发</a></div> <div class=\"price\">¥1,688.00</div> </div> </li> <li style=\"border-color:#fff;\" > <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> <div class=\"info\"> <div class=\"title\"><a href=\"index.php?app=goods&id=300\">套餐烟花-喜事连连</a></div> <div class=\"price\">¥1,288.00</div> </div> </li> </ul> </div> </div> </div> 后端处理 //ajax function ajaxBigImage() { if(!empty($_POST[\'goods_id\'])){ $goods_id=$_POST[\'goods_id\']; $goodsimg_mod = & m(\'goodsimage\'); $uploadedfile_mod = & m(\'uploadedfile\'); //$file_id = $goodsimg_mod->getOne(\"select file_id from `ecm_goods_image` WHERE goods_id={$goods_id} ORDER BY file_id DESC\"); //获取file_id 字符串 $file_arr = $goodsimg_mod->getCol(\"select file_id from `ecm_goods_image` WHERE goods_id={$goods_id} ORDER BY file_id DESC\"); if(!empty($file_arr)){ $file_str = implode(\",\",$file_arr); } //echo $file_str; $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\"); if(!empty($url_arr)){ foreach ($url_arr as $v){ if($v[\'file_type\'] == \'image/gif\'){ $url = $v[\'file_path\']; break; exit(); }else { unset($v); } } } //$url = $uploadedfile_mod->getOne(\"select file_path from `ecm_uploaded_file` WHERE file_id={$file_id} ORDER BY add_time DESC\"); if(!empty($url)){ echo $url; exit(); }else{ echo 0; exit(); } }else{ echo 0; } }
本文地址:https://www.stayed.cn/item/5899
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我