JavaScript js csdn 文字滚动广告效果

最新推荐文章于 2021-07-07 14:21:55 发布
最新推荐文章于 2021-07-07 14:21:55 发布
阅读量1.9k 收藏
点赞数
分类专栏： JavaScript/lufylegend-1.4 文章标签： javascript loadrunner function 招聘 java delay

转载自： http://blog.csdn.net/ibm_hoojo/article/details/5790372

 

 

一、csdn博客中的招聘广告效果：

 

二、以下是代码实现

 注意：这段代码在有的浏览器中会变为乱码，此时得把里面的下面部分去掉即可：

 <meta http-equiv="author" content="hoojo">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">


 

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">  
<html>  
  <head>  
    <title>csdn 博客 招聘滚动信息广告特效</title>  
    <meta http-equiv="author" content="hoojo">  
    <meta http-equiv="description" content="this is my page">  
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  
    <style type="text/css">  
        .recruit {  
            border:1px solid #C1AE9E;  
            display:inline;  
            float:left;  
            margin-left:15px;  
            padding:1px;  
            text-align:left;  
            width:200px;  
            font-size:12px;  
        }  
          
        dd.recruit ul {  
            float:none;  
            height:252px;  
            margin:10px 5px;  
            overflow:hidden;  
            padding:0;  
            width:auto;  
        }  
          
        body {  
            color:#000000;  
            font-family:verdana,sans-serif;  
            font-size:75%;  
            font-size-adjust:none;  
            font-style:normal;  
            font-variant:normal;  
            font-weight:normal;  
            line-height:150%;  
            text-align:center;  
        }  
  
        dd {  
            float:left;  
            margin:0;  
            padding:0;  
            width:474px;  
        }  
          
        a:link {  
            font-size: 12px;  
            text-decoration: none;  
            color: black;  
        }  
          
        a:hover {  
            font-size: 12px;  
            text-decoration: none;  
            color: red;  
        }  
          
        a:active {  
            font-size: 12px;  
            text-decoration: none;  
            color: blue;  
        }  
          
        a:visited {  
            font-size: 12px;  
            text-decoration: none;  
            color: black;  
        }  
        * {  
            font-size: 12px;  
        }  
    </style>  
    <script>  
        function startmarquee(lh, speed, delay, index) {  
            var t;  
            var p = false;  
            var o = document.getElementById("marqueebox" + index);  
            o.innerHTML += o.innerHTML;  
            o.onmouseover = function () { p = true }  
            o.onmouseout = function () { p = false }  
            o.scrollTop = 0;  
            function start() {  
                t = setInterval(scrolling, speed);  
                if (!p)   
                    o.scrollTop += 2;  
            }  
            function scrolling() {  
                if (o.scrollTop % lh != 0) {  
                    o.scrollTop += 2;  
                if (o.scrollTop >= o.scrollHeight / 2)   
                    o.scrollTop = 0;  
                } else {  
                    clearInterval(t);  
                    setTimeout(start, delay);  
                }  
            }  
            setTimeout(start, delay);  
        }  
          
        function addEventHandler(target, type, func) {  
            if (target.addEventListener)  
                target.addEventListener(type, func, false);  
            else if (target.attachEvent)  
                target.attachEvent("on" + type, func);  
            else   
                target["on" + type] = func;  
        }  
          
        addEventHandler(window, "load", function () {  
            startmarquee(42, 50, 3000, 0);  
        });   
    </script>  
  
  </head>  
    
  <body>  
        <dd class="recruit" id="recommended">  
            <h5>  
                热门招聘职位  
            </h5>  
            <ul id="marqueebox0">  
                <li>  
                    <a target="_blank" href="#">2010支付宝技术专场招聘</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 .NET Tech  
                        Lead(Quality Center)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【东方通】中间件第一品牌：高薪.急聘！</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 C++资深开发工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技 高级需求分析师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技有限公司 高级java工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技 JAVA开发工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="http://g.csdn.net/5149674">北京明天高软科技  
                        测试工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="http://g.csdn.net/5149688">【惠普】研发中心诚聘  
                        QA Tech Lead(LoadRunner)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="http://g.csdn.net/5149690">【惠普】研发中心诚聘  
                        .NET Senior Developer (Quality Center)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="http://g.csdn.net/5149693">【惠普】研发中心诚聘  
                        R&D Tech Lead(LoadRunner or QTP)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="http://g.csdn.net/5149691">【CSDN】招聘:Ruby  
                        工程师、Java搜索工程师、运营编辑、兼职编辑</a>  
                </li>  
  
                <li>  
                    <a target="_blank" href="#">2010支付宝技术专场招聘</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 .NET Tech  
                        Lead(Quality Center)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【东方通】中间件第一品牌：高薪.急聘！</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 C++资深开发工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技 高级需求分析师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技有限公司 高级java工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技 JAVA开发工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">北京明天高软科技 测试工程师</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 QA Tech  
                        Lead(LoadRunner)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 .NET Senior  
                        Developer (Quality Center)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="#">【惠普】研发中心诚聘 R&D Tech  
                        Lead(LoadRunner or QTP)</a>  
                </li>  
                <li>  
                    <a target="_blank" href="http://g.csdn.net/5149691">【CSDN】招聘:Ruby  
                        工程师、Java搜索工程师、运营编辑、兼职编辑</a>  
                </li>  
            </ul>  
        </dd>  
    </body>  
</html>

 三、原理分析

1、在<head></head>里有<script>，而<script></script>间有

  addEventHandler(window, "load", function () {  
            startmarquee(42, 50, 3000, 0);  
        });

它不是一个函数定义，而是一个运行表达式，参数分别为：window、"load"，function () { startmarquee(42, 50, 3000, 0);}。

2、接下来我们来看看addEventHandler函数的定义：

     function addEventHandler(target, type, func) {  
            if (target.addEventListener)  
                target.addEventListener(type, func, false);  
            else if (target.attachEvent)  
                target.attachEvent("on" + type, func);  
            else   
                target["on" + type] = func;  
        }


按它的定义，1、里的运行式的意思是给调用window的属性中的addEventListener方法，此方法的目的是告诉window在"load"时调用方法startmarquee(42, 50, 3000, 0);

3、以上只是安装一个动作而已，接下来我们开始实现startmarquess，它是实现文件滚动的真正所在。

3、1 首先获得Id为"marqueebox"+index的文档元素，然后设置此元素的onmouseover事件、onmouseout事件的处理、scrollTop属性为0（即指它的顶部一开始为0）、

        这些属性及变量是为了控制滚动而定义的。

3、2 声明两个函数，一个是开始滚动，一个是滚动动作的实现。

3、3  接下来是用setTimeout启动定时器，表delay时间后动行start函数（此定时器只触发一次）。

         start函数就是设置一个中断，此中断每speed运行一次scrolling，然后根据鼠标是否放在上面来决定是否把o.scroolTop的属性加2。

        在scrolling函数里，判断加了2的值是否超出，如果滚动的高度大于了总高度的一半，那么就重新置0；

 

function startmarquee(lh, speed, delay, index) {  
            var t;  
            var p = false;  
            var o = document.getElementById("marqueebox" + index);  
            o.innerHTML += o.innerHTML;  
            o.onmouseover = function () { p = true }  
            o.onmouseout = function () { p = false }  
            o.scrollTop = 0;  
            function start() {  
                t = setInterval(scrolling, speed);  
                if (!p)   
                    o.scrollTop += 2;  
            }  
            function scrolling() {  
                if (o.scrollTop % lh != 0) {  
                    o.scrollTop += 2;  
                if (o.scrollTop >= o.scrollHeight / 2)   
                    o.scrollTop = 0;  
                } else {  
                    clearInterval(t);  
                    setTimeout(start, delay);  
                }  
            }  
            setTimeout(start, delay);  
        }



 

chenyujing5678
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现的文字推荐广告代码(js+css)
03-11
jquery实现的文字推荐广告代码(js+css)实用的JS代码加CSS样式
[css3] 动画案例---会呼吸的圆
qq_14993591的博客
08-17 1936
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
2021-js实现广告文字滚动效果
码蝗的博客
03-04 651
分享一个用原生JS实现的文字滚动效果，这种效果通常用在网页中一些局部展示信息，如新闻、动态、充值记录等，效果如下： 也可以下载更多特效 实现代码如下： <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>原生JS实现目录滚动特效</title&gt.
javaScript:滚动广告（通过获取滑动距离来实现，点击关闭后每5s出现）
小福气的博客
07-07 512
题目：用滑动的方法去实现页面某个位置固定一个广告，并且每次点击关闭后，5s后该广告会再次出现 <style> *{ margin:0px; padding:0px; } body{ text-align:center; } div{ width:117px; heigh...
HTML+JS制作无限滚动广告代码
qq_41093007的博客
02-12 7312
对于火热的H5,虽然你会用，但是不一定全部会写。这里记录的是html+css实现的广告无限滚动效果。后期还会记录自己学习中遇到的小应用知识！谢谢
基于javascript实现文字无缝滚动效果
10-22
主要介绍了基于javascript实现文字无缝滚动效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现文字无缝滚动效果
10-19
主要为大家详细介绍了javascript实现文字无缝滚动效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现滚动栏效果的方法
10-24
主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下
javascript跟随鼠标的文字带滚动效果
10-30
javascript跟随鼠标的文字带滚动效果
js网页侧边随页面滚动广告效果实现
01-21
a.scrollTop的计算； b.滚动元素的定位值计算； c.滚动周期设定； 代码如下： css部分： 代码如下: /*测试用的高度*/ body{ height:3000px;} div,ul,li,body{margin:0; padding:0;... JS代码： 代码如下: v
滚动广告动画 JS实现
12-30
使用JS实现的鼠标滑动，广告图片依次替换，包含详细讲解，只要更换成心仪的图片，就可实现首页动画超炫的动画效果
100个常用JS广告代码
03-13
100个常用JS广告代码 100个常用JS广告代码 100个常用JS广告代码 100个常用JS广告代码
js实现网页中常见的随滚动条移动的悬浮广告栏做法
04-13
这里的scrollTop这个变量就是获取得到可视区到达页面顶部的距离 2 调用运动函数的时候付入的参数其实就是先用整个可视区的高度减去盒子的高度，然后在加上可视区到顶部的距离，这样可以实现的就是把悬浮广告停在右下角的位置 3 根据上面的分析则说明如果把可视区的高减掉盒子的高然后再除掉2，那么此时再加上可视区到顶部的距离就可以把这个盒子保始终停在页面的中间,但是这里会有一个小问题，那就是因为我们除去2运算了所以会出现小数的情况。这样就会在那个整点位置来回走。解决的方法就是把运算结果通过parseInter取整。
javascript实现循环广告条效果
10-18
主要为大家详细介绍了javascript实现循环广告条效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery广告上下左右滚动效果
01-08
jquery广告上下最有滚动效果，需要的可以下载来看看，做广告链接特效实用！
JavaScript实现滚动广告层
binboot的专栏
09-16 657
在标准下     function move(){ document.getElementById("Layer1").style.top=(document.body.scrollTop)+100+"px";document.getElementById("Layer1").style.left=(document.body.scrollLeft+document.body.
javascript 实现滚动效果代码整理
10-29
javascript 实现滚动效果代码整理，需要的朋友可以参考下。
用javascript代替marquee的滚动字幕效果代码
10-30
用javascript代替marquee的滚动字幕效果代码
用js制作文字滚动效果
最新发布
02-22
可以使用JavaScript来创建文字滚动效果，你可以通过在HTML文件中添加JavaScript脚本来实现。您可以使用setInterval()函数来控制滚动速度，以及使用animation属性来控制滚动方向。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值