`

Js 漂浮层

阅读更多
<div id="scrollDiv">放些文字或图片</div>
<script type="text/javascript">
    var x = 50,y = 60; 
    var xin = true, yin = true ;
    var step = 1 ;
    var delay = 10 ;
    var obj=document.getElementById("scrollDiv") ;
    /**//*<![CDATA[*/
    function closeDiv(){
        document.getElementById('scrollDiv').style.display='none';
    }
    function rollMethod() { 
        var L=T=0;
        var R= document.body.clientWidth-obj.offsetWidth ;
        var B = document.body.clientHeight-obj.offsetHeight ;
        obj.style.left = x + document.body.scrollLeft ;
        obj.style.top = y + document.body.scrollTop ;
        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 } 
        } 
        var itl= setInterval("rollMethod()", delay) ;
        obj.onmouseover=function(){clearInterval(itl)} ;
        obj.onmouseout=function(){itl=setInterval("rollMethod()", delay);
    } 
   /**//*]]>*/
</script>

 

分享到:
评论

相关推荐

    多种弹出漂浮层JS网页特效

    本资源包“多种弹出漂浮层JS网页特效”集合了各种各样的弹出层实现方式,帮助开发者为网站增添更多动态和互动性。 1. **什么是弹出层** 弹出层是指在用户与网页交互时,突然出现在当前视图上的独立窗口。它可以是...

    Jquery跟随滚动条漂浮层

    4. **JavaScript/jQuery动态计算**:当用户滚动时,可能需要动态调整漂浮层的位置。可以使用`$(window).scrollTop()`获取滚动条的垂直偏移量,然后根据这个值调整元素的`top`属性。 5. **插件使用**:jQuery社区有...

    Jquery 跟随滚动条漂浮层

    **jQuery 跟随滚动条漂浮层技术详解** 在网页设计中,有时我们需要创建一种效果,即某个元素(如广告、导航栏或提示信息)始终保持在用户视野内,即使当用户滚动页面时也是如此。这种效果被称为“跟随滚动条漂浮层...

    很简单的纯CSS固定漂浮层

    本案例中,我们探讨的是一个“很简单的纯CSS固定漂浮层”的实现方法,无需JavaScript或其他编程语言,仅通过CSS就能达到预期效果。 首先,我们要理解CSS中的定位属性,这是实现固定漂浮层的关键。CSS中的定位主要有...

    用CSS实现跟随滚动条漂浮层代码

    这样的效果称为“漂浮层”或者“固定定位”。在本教程中,我们将探讨如何仅使用CSS来实现这一功能,无需JavaScript的介入。这对于保持页面性能和减少代码复杂性非常有益。 首先,我们需要理解CSS中的`position`属性...

    CSS+JS图片显示漂亮的漂浮提示框效果代码

    "CSS+JS图片显示漂亮的漂浮提示框效果代码"就是一个很好的例子,它利用了CSS(层叠样式表)和JavaScript来增强用户体验,特别是在处理图片展示时。下面将详细阐述这个主题中的核心知识点。 首先,CSS(Cascading ...

    CSS JS图片漂浮提示框效果.rar

    标题中的“CSS JS图片漂浮提示框效果”指的是在网页设计中使用CSS(层叠样式表)和JavaScript技术实现的一种交互式用户体验。这种效果通常会在用户鼠标悬停在图片上时,显示一个漂浮的提示框,提供额外的信息或者与...

    js封装类 漂浮广告封装类

    javascript 漂浮广告 虽然网站上有漂浮广告很烦人,有的老板就偏爱 这个 ... 没办法 ..哎

    可自定义js弹出层动画特效.zip

    4. **弹窗漂浮**:标签中的"JS特效-弹窗漂浮"可能意味着这个弹出层不仅局限于页面某一固定位置,还可以在整个页面上自由移动,保持与用户的鼠标位置同步,提高交互性。 从压缩包内的文件"123"来看,虽然没有提供...

    网页上漂浮文字

    网页上的漂浮文字广告是一种常见的在线营销策略,它利用JavaScript或者CSS技术在用户浏览网页时显示浮动的文字元素,以吸引用户的注意力。这种广告形式通常设计为动态效果,可以在页面上移动,滚动,甚至跟随用户的...

    CSS+JS图片显示漂亮的漂浮提示框效果.zip

    "CSS+JS图片显示漂亮的漂浮提示框效果"是一个实现这一目标的实例,它结合了CSS(层叠样式表)和JavaScript的技术,为用户提供了一种优雅的方式来展示信息或者提示。这个压缩包文件包含了一个完整的解决方案,用于在...

    全屏漂浮代码

    根据不同的浏览器类型,插入不同格式的HTML代码,创建一个漂浮层(在NS4中为`&lt;layer&gt;`,在其他浏览器中为带有`position: absolute`样式的`&lt;div&gt;`),并将上述定义的属性应用到这个层上。 ### 4. 实现漂浮效果的动态...

    单元格撑大 层 密码显示可变 漂浮广告 html javascript

    根据给定文件的信息,我们可以提炼出以下几个主要的知识点:单元格撑大、层的处理、密码显示可变、漂浮广告以及HTML与JavaScript的应用。接下来将对这些知识点进行详细的阐述。 ### 单元格撑大的实现方法 在网页...

    漂亮的漂浮QQ在线服务

    3. **JavaScript**:JavaScript用于处理动态交互,比如检测QQ在线状态、显示隐藏聊天窗口、更换QQ号码等功能。 4. **Ajax**:可能使用Ajax技术进行异步通信,使得与服务器的交互无需刷新整个页面,提高用户体验。 5....

    漂浮鼠标显示div

    【漂浮鼠标显示div】是一种常见的网页交互设计技术,它涉及到HTML、CSS和JavaScript的综合应用。当用户将鼠标指针悬停在特定元素上时,一个div层会以浮动的方式出现在屏幕上的指定位置,展示相关信息。这种效果常...

    JS实现弹性漂浮效果的广告代码

    JS(JavaScript)是一种广泛使用的网页脚本语言,它是构成动态网站、网页和Web应用不可或缺的部分。本文重点讨论如何利用JavaScript实现广告图片在网页上的弹性漂浮效果。所谓的弹性漂浮效果,指的是当广告图片接触...

    jQuery与Js实现屏幕蒙层效果.rar

    在网页开发中,jQuery 和 JavaScript 是两种常用的前端技术,它们能帮助开发者轻松地实现各种交互效果,其中就包括屏幕蒙层效果。屏幕蒙层通常用于显示提示信息、加载动画、弹窗对话框等,它可以在页面上覆盖一层半...

    可定时关闭可手动关闭的漂浮窗口

    综上所述,实现"可定时关闭可手动关闭的漂浮窗口"涉及前端开发的基本技能,包括HTML布局、CSS定位、JavaScript事件处理及计时器功能。通过这些技术,开发者可以创建出既实用又具有良好用户体验的漂浮窗口功能。对于...

    CSS+JS图片弹出漂浮特效

    在前端开发中,创建引人入胜的用户体验是至关重要的,而"CSS+JS图片弹出漂浮特效"就是一种实现这一目标的方式。这个小项目旨在通过结合CSS样式和JavaScript脚本,创建一个动态背景,其中包含随机颜色的气球漂浮效果...

    漂浮QQ客服+自动识别在线状态

    2. **ServiceQQ.js**:这很可能是JavaScript文件,用于实现QQ客服的交互功能,包括浮动效果、客服状态的获取和展示、以及与QQ服务器的通信等。JavaScript是实现动态网页效果的关键,这里的ServiceQQ.js将处理大部分...

Global site tag (gtag.js) - Google Analytics