zoukankan      html  css  js  c++  java
  • 鼠标悬浮停留三秒 显示大图

    网站大连烟花网

    http://dlyh365.com

    <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 != "") ? "<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?app=goods&amp;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?app=goods&amp;id=331">【81发六锦系列组合烟花】</a></div>
    <div class="price">¥200.00</div>
    </div>
    </li>
    <li >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=336">【八喜系列组合烟花】五福临门、六六大顺、七星高照、八方得利</a></div>
    <div class="price">¥180.00</div>
    </div>
    </li>
    <li >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=375">【五福系列组合烟花】福运长流、福满人间、福寿满堂、福如东海、福到财来</a></div>
    <div class="price">¥260.00</div>
    </div>
    </li>
    <li style="border-color:#fff;" >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=399">合家欢乐组合烟花小礼花</a></div>
    <div class="price">¥480.00</div>
    </div>
    </li>
    </ul>
    <ul class="box box2" id="box2_1476271702" style="display:none;">
    <li >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=310">套餐烟花-儿孙满堂</a></div>
    <div class="price">¥888.00</div>
    </div>
    </li>
    <li >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=305">套餐烟花-六六大顺</a></div>
    <div class="price">¥666.00</div>
    </div>
    </li>
    <li >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=303">套餐烟花-一路顺发</a></div>
    <div class="price">¥1,688.00</div>
    </div>
    </li>
    <li style="border-color:#fff;" >
    <div class="pic"><a href="index.php?app=goods&amp;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?app=goods&amp;id=300">套餐烟花-喜事连连</a></div>
    <div class="price">¥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;
    }
    }

  • 相关阅读:
    从Object对象中读取属性的值
    CentOS7安装Mysql
    CentOS初使用命令总结
    linux安装git、node、pm2
    将 ELASTICSEARCH 写入速度优化到极限
    Elasticsearch
    elasticsearch5.0.1集群索引分片丢失的处理
    ELASTICSEARCH健康red的解决
    使用linux远程登录另一台linux
    fiddler构造表单上传文件的请求
  • 原文地址:https://www.cnblogs.com/yingjie13/p/3810818.html
Copyright © 2011-2022 走看看