鼠标悬浮停留三秒后显示大图，在网页中还是比较实用的
<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", ""); this.t = this.title; this.title = " "; var c = (this.t != "") " + 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"> <div> <h2>销售排行</h2> <div> <ul> <li>特效礼花</li> <li>套餐烟花</li> </ul> <div> <ul id="box1_1476271702"> <li > <div><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> <div><a href="index.php?app=goods&id=331">【81发六锦系列组合烟花】</a></div> <div>¥200.00</div> </div> </li> <li > <div><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> <div><a href="index.php?app=goods&id=336">【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利</a></div> <div>¥180.00</div> </div> </li> <li > <div><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> <div><a href="index.php?app=goods&id=375">【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来</a></div> <div>¥260.00</div> </div> </li> <li > <div><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> <div><a href="index.php?app=goods&id=399">合家欢乐组合烟花小礼花</a></div> <div>¥480.00</div> </div> </li> </ul> <ul id="box2_1476271702"> <li > <div><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> <div><a href="index.php?app=goods&id=310">套餐烟花-儿孙满堂</a></div> <div>¥888.00</div> </div> </li> <li > <div><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> <div><a href="index.php?app=goods&id=305">套餐烟花-六六大顺</a></div> <div>¥666.00</div> </div> </li> <li > <div><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> <div><a href="index.php?app=goods&id=303">套餐烟花-一路顺发</a></div> <div>¥1,688.00</div> </div> </li> <li > <div><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> <div><a href="index.php?app=goods&id=300">套餐烟花-喜事连连</a></div> <div>¥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; } }
【鼠标悬浮停留三秒后自动显示大图js代码】相关文章：
★ 下拉菜单