鼠标悬浮停留三秒后自动显示大图js代码

前端之家收集整理的这篇文章主要介绍了鼠标悬浮停留三秒后自动显示大图js代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

鼠标悬浮停留三秒后显示大图,在网页中还是比较实用的

*{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;}
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 != "") ? "
" + 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("

"+ c +"
");
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.pageX + yOffset) + "px");
});
/

};

$(document).ready(function(){
imagePreview();
});

<div id="_widget_579" name="jdr_sale_list" widget_type="widget" class="widget">
<div class="sale_list mt10 clearfix">

销售排行

Box" id="Box1_1476271702">
  • 1
  • 2
  • 3
  • 4
    • Box Box2" id="Box2_1476271702" style="display:none;">
    • 1
    • 2
    • 3
    • 4

    后端处理

    //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.f2er.com/js/57799.html

    猜你在找的JavaScript相关文章