带关闭功能的图片漂浮代码

<!--带关闭功能的图片漂浮代码 -->

<div id="floatDiv" class="float" align="right">

        <span style="display:block;text-align:center;">

                <a href="javascript:void(0)"宋体">通知详情','webArticle_view2.do?ids=<s:property value="articletz.articleId" />','icon-add')" style="color:#666666;text-align:center;line-height:20px;font-weight:bold;padding-left:0px">

                        <s:if test="articletz.articleTitle.length()>12">

                                <s:property value="articletz.articleTitle.substring(0,12)" />

                        </s:if>

                        <s:else>

                                <s:property value="articletz.articleTitle" />

                        </s:else>

                </a>

        </span>

        <p style="padding:2px 5px 5px 0px;line-height:20px;color:#666666;text-align:left;text-indent:2em;">

                <s:if test="articletz.articleContent.length()>50">

                        <s:property value="articletz.articleContent.substring(0,50)" />

                </s:if>

                <s:else>

                        <s:property value="articletz.articleContent" />

                </s:else><br/>

                <span style="cursor:hand;color:#666666;display:block;text-align: right">关闭</span>

        </p>

        <style type="text/css">

        .float {

                width: 133px;

                height: 151px;

                background:#fff;

                border:1px solid #cccccd;

                padding:2px;

                z-index: 100;

                right: 2px;

                top: 85px;

                position: absolute;

                visibility: visible;

        }

        </style>

        <script type="text/javascript">

                var tops=lefts=true;

                function move(){

                        var f=document.getElementById("floatDiv");

                        var a=f.offsetLeft,b=f.offsetTop;

                        var aw=document.body.clientWidth-f.offsetWidth;

                        var ah=document.documentElement.clientHeight-f.offsetHeight;

                        lefts?(a<aw?(a++,f.style.left=a+"px"):lefts=false)a>0?(--a,f.style.left=a+"px"):lefts=true)

                        tops?(b<ah?(b++,f.style.top=b+"px"):tops=false)b>0?(--b,f.style.top=b+"px"):tops=true)

                        var timer=setTimeout("move()",20);

                        f.onmouseover=function() {clearTimeout(timer)};

                        f.onmouseout=function() {timer=setTimeout("move()",10)};

                }

                window.onload=function(){move();}

        </script>

</div>

document.body.clientWidth ==> BODY对象宽度

document.documentElement.clientHeight ==> 可见区域高度

setTimeout和setIntelval都有定时的功能！取消定时功能的时候，都有对应的clearTimeout以及clearInterval与之对应。

但是他们之间是有区别的！

setTimeout只运行一次，也就是说设定的时间到后就触发运行指定代码，运行完后即结束。如果运行的代码中再次运行同样的setTimeout命令，则可循环运行。

setinterval是循环运行的，即每到设定时间间隔就触发指定代码。这是真正的定时器。

setinterval使用简单，而setTimeout则比较灵活，可以随时退出循环，而且可以设置为按不固定的时间间隔来运行，比如第一次1秒，第二次2秒，第三次3秒

占位编辑

带关闭功能的飘窗.doc (17.5 KB, 下载次数: 134)

2016-10-26 17:49 上传

点击文件名下载附件

支持，赞一个

占坑编辑ing

……

报告！别开枪，我就是路过来看看的。。。

very good