JS 实现Div向上浮动的实现代码

Html 及 JS 代码如下：


代码如下:

<div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();"
style="position: absolute; width: 100px;">
<a href="http://www.jb51.net" target="_blank">我们</a>
</div>
<script type='text/javascript'>
var newsOne = document.getElementById("newsOne");
newsOne.style.bottom = 0;
newsOne.style.left = window.screen.availWidth - 100;
var bottom = 0;
function newsScroll() {
if (bottom > (window.screen.availHeight - window.screenTop)) {
bottom = 0;
newsOne.style.bottom = 0;
}
else {
bottom = bottom + 15;
newsOne.style.bottom = bottom;
}
}
var timeid = setInterval(newsScroll, 300);
function CleartTimeInterVal() {
clearInterval(timeid);
}
function resetInterVal() {
timeid = setInterval(newsScroll, 300);
}
</script>

在线运行：

我们

var newsOne = document.getElementById("newsOne");
newsOne.style.bottom = 0;
newsOne.style.left = window.screen.availWidth - 100;
var bottom = 0;
function newsScroll() {
if (bottom > (window.screen.availHeight - window.screenTop)) {
bottom = 0;
newsOne.style.bottom = 0;
}
else {
bottom = bottom + 15;
newsOne.style.bottom = bottom;
}
}
var timeid = setInterval(newsScroll, 300);
function CleartTimeInterVal() {
clearInterval(timeid);
}
function resetInterVal() {
timeid = setInterval(newsScroll, 300);
}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • js实现网站最上边可关闭的浮动广告条代码

    js实现网站最上边可关闭的浮动广告条代码

    本文实例讲述了js实现网站最上边可关闭的浮动广告条.分享给大家供大家参考.具体如下: 这是一款广告条代码,平时浮动在网站最上边,可关闭,设计唯美简洁,带关闭按钮,自适应网页宽度,色调明了,相信有不少朋友会喜欢的. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-top-float-clase-able-adv-codes/ 具体代码如下: <html> <head> <title>网站页首可关闭广告条</ti

  • js浮动图片的动态效果

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  • JS实现侧悬浮浮动实例代码

    JS实现侧悬浮浮动实例代码

    效果: 思路: 首先,加载onscroll控制滚动条.然后写缓存运动的方法,缓冲运动的方法是先计算出DIV缓冲的速度,并且将其取整,再进行运动判断什么时候到达终点.最后将其参数返回.再在onscroll里面调用此方法,并且将终点计算出来赋予此方法的参数. 代码: 复制代码 代码如下: <head runat="server">    <title></title>    <style type="text/css"> 

  • JS实现可缩放、拖动、关闭和最小化的浮动窗口完整实例

    本文实例讲述了JS实现可缩放.拖动.关闭和最小化的浮动窗口方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999

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

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

    一.应用展示 关于层的智能浮动效果早在几年前我就在国外的一些个人网站的垂直导航上见到了,现在似乎在国内一些商业网站上也屡见此效果,例如淘宝网的搜索结果页的排序水平条,在默认状态下,滚动条跟随页面滚动,如下: 随着页面向下滚动,当此水平条接触浏览器的上边缘时,水平条独立出来,不跟随滚动条滚动了,如下图所示: 类似的效果在新浪微博上也有: 当页面滚动,新动态提示开始要淡出浏览器窗口的时候,其浮动于浏览器窗口的最上沿显示,如下图所示: 此效果实现原理其实很简单,本文就将展示其实现. 二.实现原理 默认

  • JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    JS实现弹出浮动窗口(支持鼠标拖动和关闭)实例详解

    本文实例讲述了JS实现弹出浮动窗口.分享给大家供大家参考.具体如下: 这里介绍的JS弹出浮动窗口,支持鼠标拖动和关闭,点击链接文字后弹出层窗口,也称作是弹出式对话框吧. 关于一些参数说明: bodycontent:要在窗口中显示的内容 title:窗口的标题 removeable:窗口是否能拖动 注意:内容窗体的高度是height-30px,请计算好要显示的内容高度和宽度. 注:在火狐或chrome下效果最佳,IE8下可能有些小问题. 点击此处查看运行效果: http://demo.jb51.n

  • JS模拟Dialog弹出浮动框效果代码

    JS模拟Dialog弹出浮动框效果代码

    本文实例讲述了JS模拟Dialog弹出浮动框效果代码.分享给大家供大家参考.具体如下: 这里演示JS模拟Dialog弹出浮动框,蓝色经典风格,可以创建一个新层,可设置弹出层的标题和内容,用它可实现一个登录框,或用在后台管理中. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML

  • JS 实现Div向上浮动的实现代码

    Html 及 JS 代码如下: 复制代码 代码如下: <div id="newsOne" onmouseover="CleartTimeInterVal();" onmouseout="resetInterVal();" style="position: absolute; width: 100px;"> <a href="http://www.jb51.net" target="

  • js实现div闪烁原理及实现代码

    最近在学着用easyui,发现框架用起来果然是方便简洁,能弄出这框架的都是大神级别了吧,牛啊.... 今天碰到这个应用可以说是让我非常之无语,整出源码来一看就明白了,可之前却还是感觉非常神奇,我也常常告诉自己,要多动脑筋,实际上有一些也的确有想过,但实在是效果很牵强,而当源码拿出来看的时候却又格外的明白,如果这时候我可以看到自己的表情,大抵就是一个纠结吧,如果说量变引起质变,那我的量还差的太多了,连见多识广都算不上,何谈创造啊. 先来分析下实现的原理吧,闪烁的原理是什么呢:其实就一个,displ

  • JS实现很实用的对联广告代码（可自适应高度）

    JS实现很实用的对联广告代码（可自适应高度）

    本文实例讲述了JS实现很实用的对联广告代码(可自适应高度).分享给大家供大家参考.具体如下: 这是一款很实用的基于JS+CSS+DIV的网页对联广告代码,自适应网页高度,也就是始终保持在一定调试,这款暂时没有关闭功能. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-lr-useful-adv-auto-height-codes/ 具体代码如下: <html> <head> <meta http-equiv="

  • 如何用js实现鼠标向上滚动时浮动导航

    为什么会有这个需求呢?有没有发现在国外的一些网站,当你向上滚动时,导航条浮动在顶部位置.用户如果是想看内容就可以直接点击到达,省去很多拖动的时间,当然返回顶部也是比较容易.但有时候返回顶部这个按钮往往被人忽略了.下面一起来看看代码和演示(引入jQuery 1.9). 判断鼠标向上滚动,或者向下滚动,可以通过对比用户的上一次滚动的坐标和下一次的坐标,当上一次小于下一次时,即用户在向下滚动,反之,则说明用户在向上滚动.滚动的坐标值可以取窗口的scrollTop. HTML代码示例 <div id=&qu

  • js跟随滚动条滚动浮动代码

    复制代码 代码如下: var str="客服"; var objFT=new FloatT("FloatMenu1",str,942,137,125,200,80,10); objFT.FloatRun(); //js跟随滚动条滚动 浮动 //pObjName:html 元素ID //pText:html 元素内容 //其它自己看 function FloatT(pObjName,pText,pstmnLEFT,pstmnGAP1,pstmnGAP2,pstmnBA

  • js当前页面登录注册框,固定div,底层阴影的实例代码

    这是一个实例,保存代码为html文件运行试试吧.兼容火狐.ie6.ie7.ie8.Chrome等. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

  • 不用js多浏览器兼容纯DIV/CSS对联漂浮广告代码

    纯DIV/CSS对联漂浮广告代码(无JS) 源码网两侧漂浮.经测试,兼容IE6,IE7,Firefox浏览器. CSS代码为: 复制代码 代码如下: .r1{width:80px;height:80px;background:red;float:right;          position:fixed !important; top/**/:200px;          position:absolute; z-index:300; top:expression(offsetParent.

  • js实现div拖动动画运行轨迹效果代码分享

    js实现div拖动动画运行轨迹效果代码分享

    本文实例讲述了js div拖动动画运行轨迹效果.分享给大家供大家参考.具体如下: 这是一款基于js实现的div拖动动画运行轨迹效果源码,是一款原生js div拖动效果制作鼠标拖动div动画运行轨迹效果代码.可以选择[记住轨迹]与[不记住轨迹]两种拖动显示模式,从而显示出不同的拖动效果. 运行效果图:                                        -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能

  • JS实现点击复选框变更DIV显示状态的示例代码

    首先是页面上: <div class="row cl"> <label class="form-label col-xs-4 col-sm-3" style="width: 20%"><span class="c-red">*</span>是否存在促销活动:</label> <div class="formControls col-xs-8 col-s

随机推荐