Automatically display the large image js code after hovering the mouse for three seconds_javascript skills

<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 != "") &#63; "<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&#63;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&#63;app=goods&id=331">【81发六锦系列组合烟花】</a></div>

<div class="price">&yen;200.00</div>

</div>

</li>

<li >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=336">【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利</a></div>

<div class="price">&yen;180.00</div>

</div>

</li>

<li >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=375">【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来</a></div>

<div class="price">&yen;260.00</div>

</div>

</li>

<li style="border-color:#fff;" >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=399">合家欢乐组合烟花\小礼花</a></div>

<div class="price">&yen;480.00</div>

</div>

</li>

</ul>

<ul class="box box2" id="box2_1476271702" style="display:none;">

<li >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=310">套餐烟花-儿孙满堂</a></div>

<div class="price">&yen;888.00</div>

</div>

</li>

<li >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=305">套餐烟花-六六大顺</a></div>

<div class="price">&yen;666.00</div>

</div>

</li>

<li >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=303">套餐烟花-一路顺发</a></div>

<div class="price">&yen;1,688.00</div>

</div>

</li>

<li style="border-color:#fff;" >

<div class="pic"><a href="index.php&#63;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&#63;app=goods&id=300">套餐烟花-喜事连连</a></div>

<div class="price">&yen;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;

}

}