鼠标悬浮停留三秒后自动显示大图js代码
鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的
<style> *{margin:0;padding:0;list-style-type:none;} img,a{border:0;} .piccon{height:75px;margin:100px0050px;} .picconli{float:left;padding:010px;} #preview{position:absolute;border:1pxsolid#ccc;background:#333;padding:5px;display:none;color:#fff;z-index:2000;} </style>
<scripttype="text/javascript"> this.imagePreview=function(){ xOffset=10; yOffset=30; varurll; $(".widget.ks-contenta,.box.ks-switchable-contentdivlia").hover(function(){ //$(".widget.ks-contenta").hover(function(e){ //vargoods_id=$(this).attr("href").replace("goods/",""); vargoods_id=$(this).attr("href").replace("index.php?app=goods&id=",""); this.t=this.title; this.title=""; varc=(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("<divid='preview'><imgsrc="+urll+"/>"+c+"</div>"); returntrue; }else{ returnfalse; } }); /* $("#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> <divid="_widget_579"name="jdr_sale_list"widget_type="widget"class="widget"> <divclass="sale_listmt10clearfix"> <h2>销售排行</h2> <div> <ulclass="ks-navks-nav1476271702"> <liclass="ks-activenav1">特效礼花</li> <liclass="nav2">套餐烟花</li> </ul> <divclass="ks-content"> <ulclass="box"id="box1_1476271702"> <li> <divclass="pic"><ahref="index.php?app=goods&id=331"><imgalt="【81发六锦系列组合烟花】"src="data/files/store_927/goods_51/small_201312121557314803.JPG"height="60"width="60"></a><b>1</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=331">【81发六锦系列组合烟花】</a></div> <divclass="price">¥200.00</div> </div> </li> <li> <divclass="pic"><ahref="index.php?app=goods&id=336"><imgalt="【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利"src="data/files/store_927/goods_33/small_201312121630335585.JPG"height="60"width="60"></a><b>2</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=336">【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利</a></div> <divclass="price">¥180.00</div> </div> </li> <li> <divclass="pic"><ahref="index.php?app=goods&id=375"><imgalt="【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来"src="data/files/store_927/goods_193/small_201312130956337166.JPG"height="60"width="60"></a><b>3</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=375">【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来</a></div> <divclass="price">¥260.00</div> </div> </li> <listyle="border-color:#fff;"> <divclass="pic"><ahref="index.php?app=goods&id=399"><imgalt="合家欢乐组合烟花\小礼花"src="data/files/store_927/goods_197/small_201312131059578989.JPG"height="60"width="60"></a><b>4</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=399">合家欢乐组合烟花\小礼花</a></div> <divclass="price">¥480.00</div> </div> </li> </ul> <ulclass="boxbox2"id="box2_1476271702"style="display:none;"> <li> <divclass="pic"><ahref="index.php?app=goods&id=310"><imgalt="套餐烟花-儿孙满堂"src="data/files/store_927/goods_92/small_201312121508128170.jpg"height="60"width="60"></a><b>1</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=310">套餐烟花-儿孙满堂</a></div> <divclass="price">¥888.00</div> </div> </li> <li> <divclass="pic"><ahref="index.php?app=goods&id=305"><imgalt="套餐烟花-六六大顺"src="data/files/store_927/goods_136/small_201312121455369033.jpg"height="60"width="60"></a><b>2</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=305">套餐烟花-六六大顺</a></div> <divclass="price">¥666.00</div> </div> </li> <li> <divclass="pic"><ahref="index.php?app=goods&id=303"><imgalt="套餐烟花-一路顺发"src="data/files/store_927/goods_118/small_201312121451582290.jpg"height="60"width="60"></a><b>3</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=303">套餐烟花-一路顺发</a></div> <divclass="price">¥1,688.00</div> </div> </li> <listyle="border-color:#fff;"> <divclass="pic"><ahref="index.php?app=goods&id=300"><imgalt="套餐烟花-喜事连连"src="data/files/store_927/goods_14/small_201312121443346243.jpg"height="60"width="60"></a><b>4</b></div> <divclass="info"> <divclass="title"><ahref="index.php?app=goods&id=300">套餐烟花-喜事连连</a></div> <divclass="price">¥1,288.00</div> </div> </li> </ul> </div> </div> </div> 后端处理 //ajax functionajaxBigImage() { if(!empty($_POST['goods_id'])){ $goods_id=$_POST['goods_id']; $goodsimg_mod=&m('goodsimage'); $uploadedfile_mod=&m('uploadedfile'); //$file_id=$goodsimg_mod->getOne("selectfile_idfrom`ecm_goods_image`WHEREgoods_id={$goods_id}ORDERBYfile_idDESC"); //获取file_id字符串 $file_arr=$goodsimg_mod->getCol("selectfile_idfrom`ecm_goods_image`WHEREgoods_id={$goods_id}ORDERBYfile_idDESC"); if(!empty($file_arr)){ $file_str=implode(",",$file_arr); } //echo$file_str; $url_arr=$uploadedfile_mod->getAll("selectfile_type,file_pathfrom`ecm_uploaded_file`WHEREfile_idIN({$file_str})ORDERBYadd_timeDESC"); if(!empty($url_arr)){ foreach($url_arras$v){ if($v['file_type']=='image/gif'){ $url=$v['file_path']; break; exit(); }else{ unset($v); } } } //$url=$uploadedfile_mod->getOne("selectfile_pathfrom`ecm_uploaded_file`WHEREfile_id={$file_id}ORDERBYadd_timeDESC"); if(!empty($url)){ echo$url; exit(); }else{ echo0; exit(); } }else{ echo0; } }