鼠标悬浮停留三秒后自动显示大图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;
}
}