加个飘窗

Posted 2021-01-01 单大源

<style>
.cloud{ width:260px; height:97px; position:fixed; top:0px; left:0px; background-color:#ddd; z-index:999;}
.cloud_close{ width:18px; height:20px; position:absolute; top:0px; right:-60px; background-color:#f00; font-size:20px; line-height:25px; color:#fff; text-align:center; cursor:pointer; background:url(http://tazwfw.sd.gov.cn/picture/21/1804211225295745632.jpg?cache=0.8886874383072927) center top no-repeat;}
.test{ width:300px; height:200px; position:fixed; top:0px; left:0px; background-color:#0f0; z-index:998;}
</style>



<div id="cloud" class="cloud">
    <a href="/" target="_blank"><img src=‘images/wjwgg.png‘ width=‘320‘ height=‘120‘ border=‘0‘ ></a>
    <div class="cloud_close" onClick="javascript:document.getElementById(‘cloud‘).style.display=‘none‘;"></div>
</div> 



<script>
$(document).ready(function(){
    /*初始设置*/
    var f_speed = 20; /*漂浮速度*/
    var fi_top=50,fi_left=20; /*初始位置：上、左*/
    var $f_cloud = $("#cloud"); /*选定漂浮元素*/
    //var $f_cloud = $(".test");
    
    var f_top=0,f_left=0;
    var f_W = $(window).width()-$f_cloud.width();
    var f_H = $(window).height()-$f_cloud.height();
    function f_auto(){
        if(fi_top>=0 && fi_top<f_H){
            fi_top++;
            f_top = 1*fi_top;
        }else if(fi_top>=f_H && fi_top<2*f_H){
            fi_top++;
            f_top = 2*f_H-fi_top;
        }else{
            fi_top=0;
            fi_top++;
            f_top = 1*fi_top;
        }
        if(fi_left>=0 && fi_left<f_W){
            fi_left++;
            f_left = 1*fi_left;
        }else if(fi_left>=f_W && fi_left<2*f_W){
            fi_left++;
            f_left = 2*f_W-fi_left;
        }else{
            fi_left=0;
            fi_left++;
            f_left = 1*fi_left;
        }
        $f_cloud.css({top:f_top,left:f_left});
    }
    var f_cloud = setInterval(f_auto,f_speed);
    f_auto();
    /*鼠标移入移出*/
    $f_cloud.hover(function(){
        clearInterval(f_cloud);
    },function(){
        f_cloud = setInterval(f_auto,f_speed);
    });
    /*自适应屏幕*/
    $(window).resize(function(){
        f_W = $(window).width()-$f_cloud.width();
        f_H = $(window).height()-$f_cloud.height();
        f_auto();
    });
});
</script>