实现如下的效果，一般用于广告，

这是通过运动来实现的，大家可以先自己写写，再看看和小编我写的是不是同一个思想

<style>

    #div1{

        width:100px;

        height:100px;

        background:red;

        position:absolute;

        bottom:0;

        right:0;

    }

</style>

<body style="height:2000px;">

    <div id="div1"></div>

</body>

js代码部分

<script>

    window.onscroll=function()

    {

          var div=document.getElementById("div1");

          var scrollTop=document.documentElement.scrollTop ||document.body.scrollTop;

          // div.style.top=document.documentElement.clientHeight-div.offsetHeight+scrollTop+'px';

          startmove (parseInt((document.documentElement.clientHeight-div.offsetHeight)/2+scrollTop))

          //offsetHeight是div的高度

          //document.documentElement.clientHeight是到窗口的顶部

    };

    var timer=null;

    function startmove(iTarget)

    {

        var div=document.getElementById('div1');

        clearInterval(timer);

        timer=setInterval(function()

        {

             var speed =(iTarget-div.offsetTop)/4;

             speed=speed>0?Math.ceil(speed):Math.floor(speed);

             if (div.offsetTop==iTarget)

             {

                clearInterval(timer);

             }

             else

             {

                div.style.top=div.offsetTop+speed+'px';

             }

        }

            , 30)   

    }

</script>

　　

js添加广告模块，随页面移动而移动的更多相关文章

  1. js 添加广告

    需要调用广告的页面 <script type="text/javascript">    var xzname="巨蟹座";</script& ...

  2. 系统管理模块_部门管理_改进_抽取添加与修改JSP页面中的公共代码_在显示层抽取BaseAction_合并Service层与Dao层

    系统管理模块_部门管理_改进1:抽取添加与修改JSP页面中的公共代码 commons.jspf <%@ page language="java" import="j ...

  3. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

  4. webpack 通用模块(每个页面都用到的js)编译

    1.项目目录 2.配置文件:webpack.config.js var htmlWebpackPlugin = require('html-webpack-plugin'); var webpack ...

  5. node.js使用mysql模块的坑

      之前用node.js写的订餐系统,很容易挂掉,一直也没想去解决它.今天看了一下,试了试,原因是在连接数据库的时候没有对error事件进行处理,导致程序一直挂在那里,需要重启服务才能正常使用.   ...

  6. legend---一、如何实现js跳转到php页面

    legend---一.如何实现js跳转到php页面 一.总结 一句话总结:url还是同样的方式,只不过注意引号内嵌的时候的转义. 代码: onClick="javascript:if(con ...

  7. nginx添加 nginx_heath模块

    原因?为什么会使用nginx_heath 这个模块,主要是如nginx+tomcat部署的时,tomcat挂了之后nginx->upstream 轮询是可以踢掉挂掉的tomcat服务的,如果部署 ...

  8. 为自己的Android应用添加广告

    平时也写了不少Android小应用,但是都是做练习之用,从来没有想过添加广告赚钱这一说. 个人是非常反感在应用内添加广告这种行为的,非常影响用户体验,不小心点到广告的话,手机流量哗哗地就没了··· 但 ...

  9. Zepto.js库touch模块代码解析

    Zepto.js也许并不陌生,专门针对移动端开发,Zepto有一些基本的触摸事件可以用来做触摸屏交互(tap事件.swipe事件),Zepto是不支持IE浏览器的. 下面来解析一些Zepto.js触摸 ...

随机推荐

  1. iOS开发：XCTest单元测试（附上一个单例的测试代码）

    测试驱动开发并不是一个很新鲜的概念了.在我最开始学习程序编写时,最喜欢干的事情就是编写一段代码,然后运行观察结果是否正确.我所学习第一门语言是c语言,用的最多的是在算法设计上,那时候最常做的事情就是编 ...

  2. iOS ShareSDK 使用

    流量精灵软件中,也在大部分地方使用到了shareSDK 这个三方开源库.具体的有两种需求 a.弹出所有分享模块 b.只弹出指定的平台:如微信朋友圈和QQ . 配置方法,三方库中也很详细,这里我只有写出 ...

  3. jQueryUI 之控件们

    总结:总的来说,这些控件可以在官网找到列子, 部分ui效果不如意的,可根据jQueryUI上添加的类选择器等,进行再加工 <!DOCTYPE html> <html> < ...

  4. poj1502 spfa最短路

    //Accepted 320 KB 16 ms //有n个顶点,边权用A表示 //给出下三角矩阵,求从一号顶点出发到各点的最短路的最大值 #include <cstdio> #includ ...

  5. ie 11 cookie 的值为空

    昨天碰到ie 11上运行的程序时  登录老是登录不上去 一直是登录界面 最后检查半天发现时因为 权限验证登录时 获取cookie里的用户信息时 一直为空 便在网上查询资料  发现是因为ie11 里貌似 ...

  6. RABBITMQ/JAVA (主题)

    上篇博文中,我们进一步改良了日志系统.即使用Direct类型的转换器,使得接受者有能力进行选择性的接收日志,而非fanout那样,只能够无脑的转发. 虽然使用Direct类型的转换器改进了日志系统.但 ...

  7. [GodLove]Wine93 Tarining Round #2

    比赛链接: http://acm.hust.edu.cn/vjudge/contest/view.action?cid=44704#overview 题目来源: ZOJ Monthly, June 2 ...

  8. SQLServer数据库表架构和数据保存成sql文件

    一.先在你的mssql数据库中点击“数据库–>任务–>生成脚本” 二.然后我们会看到有“生成和发布脚本”窗口 下一步 三.选择要编写脚本的数据库对象,全部导出选第一个,如果你想导出部分数据 ...

  9. Linux下部署solrCloud

    1. 准备工作 这里我只是把我的师兄教我的关于Solrcloud搭建的过程,以及需要注意的地方文档化了.感谢他教会了我很多. 1.机子IP 三台安装linux系统的机子的IP地址为: 172.24.1 ...

  10. // 开始无限播放 ViewPager

    public class MainActivity extends Activity { private ViewPager vp;    private Handler handler = new ...