`

网站首页浮动窗口移动代码

阅读更多

 1.html代码:

<div id="dcwj" class="flabox" style="position:absolute;z-index:1000;">

    <div class="flatit"><span><a onclick="closediv();" title="关闭" style="cursor: pointer;">×</a></span>最新通知公告</div>

    <ul class="flaul">

    <c:forEach items="${newsInfoList}" begin="0" end="2" var="cur">

    <c:url var="url" value="/IndexNewsInfo.do?uuid=${cur.uuid}" />

      <li><a title="${fn:escapeXml(cur.title)}" style="color:${cur.title_color}; text-decoration:none; <c:if test='${cur.title_is_strong eq 1}'>font-weight:bold;</c:if>" href="${url}" target="_blank">

        <c:out value="${fnx:abbreviate(fn:escapeXml(cur.title), 2 * 15, '..')}" />

      </a></li>

    </c:forEach>

    </ul>
</div>
2.js代码:

var x = 50,y = 60;

var xin = true, yin = true;

var step = 0.5;

var delay = 10;

var obj=document.getElementById("dcwj");

var width= window.screen.availWidth;

var height = window.screen.availHeight;

function dcwj() {

    var L=T=0;

    //var R= document.body.clientWidth-obj.offsetWidth;

    var R= width-obj.offsetWidth-35;

    //var B = document.body.clientHeight-obj.offsetHeight;

    var B = height-obj.offsetHeight-100;

    obj.style.left = x + (document.documentElement.scrollLeft || document.body.scrollLeft) + "px";

    obj.style.top = y + (document.documentElement.scrollTop || document.body.scrollTop) + "px";

    x = x + step*(xin?1:-1);

    if (x < L) { xin = true; x = L;}

    if (x > R){ xin = false; x = R;}

    y = y + step*(yin?1:-1);

    if (y < T) { yin = true; y = T; }

    if (y > B) { yin = false; y = B; }

    //document.getElementById("console").innerHTML=x + " : " + y;

}

var itl;

if(obj!=null){

    itl    = setInterval("dcwj()", delay);    

    obj.onmouseover=function(){clearInterval(itl);};

    obj.onmouseout=function(){itl=setInterval("dcwj()", delay);};

}

function closediv(){

   clearInterval(itl);

   obj.style.display = "none";
}
 
 
分享到:
评论

相关推荐

    一个浮动广告的html代码

    一个浮动广告的html代码,有助于网站建设,广告联盟,网络赚钱,等等

    网页广告 代码全集 js 广告代码 大全 1-61 (A)

    53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...

    网页广告 代码全集 js 广告代码 62-120 大全 (B)

    53:关闭弹出两窗口的代码下载 54:鼠标经过即弹出广告代码下载 55:按钮跳出广告代码下载 56:左边底部悬浮代码下载 57:滑动展开/收缩广告代码下载 58:点空白页面也弹出代码下载 59:置顶收栏关闭效果代码下载 60:...

    JS实现可根据窗口自适应跳转悬浮移动窗口(悬浮广告)的特效代码

    DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;,并且可以根据用户滚动窗口时,悬浮广告自适应窗口,在很多网站做活动需要悬浮广告时...

    一款漂亮的浮动网站客服窗口代码

    内容索引:脚本资源,Ajax/JavaScript,QQ客服,漂浮广告 这款网站客服代码可以浮动在网页右侧,随页面滚动而滚动,红色调,看上去非常漂亮,而且调用时候就只需一名话,除了可以拿它来做浮动的客服窗口外,还可以把它...

    JS右下角弹出可滚动的新闻列表浮动窗口

    内容索引:脚本资源,Ajax/JavaScript,滚动 JavaScript右下角弹出式可以支持滚动的新闻列表,来自城市联盟网站,打开页后,右下角缓慢出现一个向上浮动的窗口,在CSDN网站现在就有这种。窗口内的内容是自动带间歇的...

    JQuery 实现的页面滚动时浮动窗口控件

    1. Introduction: 这个控件能够实现的效果是当你的页面滚动时,某个DIV永远停留在你需要它停留的位置。同时可以为这个DIV设定个容器,当滚动条已经超过了这个容器,那么这个DIV就不再滚动了。有时候如果需要做个比较...

    JAVA上百实例源码以及开源项目源代码

    此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这...

    超实用的jQuery代码段

    超实用的jQuery代码段精选近350个jQuery代码段,涵盖页面开发中绝大多数要点、技巧与方法,堪称史上最实用的jQuery代码参考书,可以视为网页设计与网站建设人员的好帮手。《超实用的jQuery代码段》的代码跨平台、跨...

    明日科技《C#示例源代码》(17-20)

    注意:本源代码共有20章节,分五部分上传,名称分别为:明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(5-8)、明日科技《C#示例源代码》(9-12)、明日科技《C#...

    JAVA上百实例源码以及开源项目

    此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这...

    JQuery&CSS;&CSS;+DIV实例大全.rar

    56.jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57.jQuery黑色动感Ajax无刷新动态分组图片效果代码 58.jquery黑色风格左右带箭头的图片浏览控制插件下载 59.jQuery鼠标滑动图片显示标题与简介...

    javascript跟随滚动条滚动的层(浮动AD效果)

    其实这个效果在很多网站中都能见到,其主要表现为网页两侧的浮动广告。看起来感觉很难做,但其实原理是很简单的,使用定时器没0.1秒检测层的位置并将其置在指定的位置(相对于窗口)。写了一个简单的代码: ...

    明日科技《C#示例源代码》(13-16)

    注意:本源代码共有20章节,分五部分上传,名称分别为:明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(5-8)、明日科技《C#示例源代码》(9-12)、明日科技《C#...

    明日科技《C#示例源代码》(5-8)

    注意:本源代码共有20章节,分五部分上传,名称分别为:明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(5-8)、明日科技《C#示例源代码》(9-12)、明日科技《C#...

    明日科技《C#示例源代码》(9-12)

    注意:本源代码共有20章节,分五部分上传,名称分别为:明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(1-4)、明日科技《C#示例源代码》(5-8)、明日科技《C#示例源代码》(9-12)、明日科技《C#...

    js页面滚动时层智能浮动定位实现(jQuery/MooTools)

    一、应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,...

    java源码包---java 源码 大量 实例

    浮动的广告 嵌套在html中 各种EJB之间的调用示例 7个目标文件 摘要:Java源码,初学实例,EJB调用实例  各种EJB之间的调用源码示例,用远程接口的引用访问EJB、函数将被FirstEJB调用,同时它将调用secondEJB 基于...

    java源码包2

    浮动的广告 嵌套在html中 各种EJB之间的调用示例 7个目标文件 摘要:Java源码,初学实例,EJB调用实例  各种EJB之间的调用源码示例,用远程接口的引用访问EJB、函数将被FirstEJB调用,同时它将调用secondEJB ...

Global site tag (gtag.js) - Google Analytics