码迷,mamicode.com
首页 > 其他好文 > 详细

加个飘窗

时间:2018-08-25 16:27:59      阅读:185      评论:0      收藏:0      [点我收藏+]

标签:class   cursor   position   tar   fixed   image   初始   width   ima   

<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>

 

加个飘窗

标签:class   cursor   position   tar   fixed   image   初始   width   ima   

原文地址:https://www.cnblogs.com/shandayuan/p/9534377.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!