`
king_tt
  • 浏览: 2123039 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

Javascript简单跑马灯

 
阅读更多

很久前写的简单JS,让页面元素旋转起来:

复制下面代码粘贴在地址栏,然后回车即可(IE6\7\8测试通过):

javascript:r=100;shita=0;function a(element,speed,size,position){var ee=document.getElementsByTagName(element);if(!ee) return false;setInterval(function(){for(i=0;i<ee.length;i++){shita++;shita=shita*speed;a=r*Math.sin(shita);b=r*Math.cos(shita);ee[i].style.width=size;ee[i].style.height=size;ee[i].style.overflow="hidden";ee[i].style.border="solid 1px red";ee[i].style.position="absolute";ee[i].style.top=b+r*position;ee[i].style.left=a+r*position;}},100);}window.onload=a("div",1,50,1);


最后那个a函数的四个参数分别是:

1、要旋转的标签

2、速度

3、旋转方块大小

4、旋转的中心位置(还有点问题)



分享到:
评论

相关推荐

    用reactnative开发的一个简单跑马灯抽奖demo

    用react-native开发的一个简单跑马灯抽奖demo,使用了react-navigation,可以自定义奖品名称,抽奖定时等

    【JavaScript源代码】vue实现简单的跑马灯效果.docx

     本文实例为大家分享了vue实现简单跑马灯效果的具体代码,供大家参考,具体内容如下 效果图 代码 html  &lt;div id="app"&gt;   开启&lt;/button&gt; 停止&lt;/button&gt; &lt;p&gt;{{msg}}&lt;/p&gt; &lt;/div&gt; vue var app = new Vue...

    【JavaScript源代码】Vue实现跑马灯简单效果.docx

    Vue实现跑马灯简单效果  本文实例为大家分享了Vue实现跑马灯简单效果的具体代码,供大家参考,具体内容如下 1、跑马灯效果 说明:单击"应援"按钮文字向左飘动,再单击"暂停"按钮停止当前飘动 2、完整代码 (注意:...

    简单的跑马灯制作代码

    让图片或者文字在屏幕永不断的移动,类似跑马灯

    Javascript实现跑马灯效果的简单实例

    下面小编就为大家带来一篇Javascript实现跑马灯效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

    JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)

    在上篇文章给大家介绍了JavaScript实现跑马灯抽奖活动实例代码解析与优化(一),既然是要编写插件。那么叫做“插件”的东西肯定是具有的某些特征能够满足我们平时开发的需求或者是提高我们的开发效率。那么叫做插件...

    html javascript jquery 走马灯例子

    html javascript jquery 走马灯例子 调用简单

    javascript简单例子程序

    一些Javascript的例子程序,包括动态显示文字,变色文字,跑马灯,动态时钟,日期时间显示等。

    Javascript简单开发实例

    一些Javascript的例子程序,包括动态显示文字,变色文字,跑马灯,动态时钟,日期时间显示等。

    JavaScript教程

     范例:跑马灯效果 • 三、 JavaScript程序构成  程序控制流  函 数  事件驱动及事件处理  范例:自动装卸载;获取版本号 • 四、 基于对象的JavaScript语言  对象的基础知识  常用对象的属性和方法  ...

    JavaScript源代码集

    一种一条一条显示信息的跑马灯; 自动滚屏并不一定需要Dhtml,到这里看看喔! 在页面上提供向前,向后翻页的按钮。 告诉来访者在本页面停留的时间,作用好坏你判断吧! 请来客登记姓名,统计来访次数。 最常见...

    网站吸引人潮必学JavaScript.pdf

    像是进入网站的欢迎讯息、亲切招呼语、显示目前或浏览时间、显示网页更新时间、超结讯、跑马灯、广告轮播……。透过本书深入浅出的介绍,让你对JavaScript快速上手,同时还提供丰富的JavaScript程式码,轻鬆就能直接...

    程序天下:JavaScript实例自学手册

    7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 ...

    《程序天下:JavaScript实例自学手册》光盘源码

    7.8 状态栏的跑马灯效果 7.9 状态栏缩放文字 7.10 状态栏文字来回出现 7.11 交替闪烁的状态栏 7.12 状态栏的分解显示文本特效 7.13 状态栏文字从右弹出 7.14 状态栏中文字从中间分开显示 7.15 屏蔽掉IE自带的功能键 ...

    Java.Script].杨正华

    点有机地分散在“幸运52”, “速算24”, “俄罗斯方块”, “状态栏跑马灯”, “蝴蝶飞舞” 等多个趣味游戏的程序设计示例中,引导读者学习领会JavaScript 中数组、字符串、事 件处理、数学运算、日期和时间的...

    JavaScript网页特效范例宝典源码

    实例284 文字跑马灯特效 447 实例285 文字依次显示后快速收缩 449 实例286 文字的展开与收缩 451 实例287 状态栏中的文字依次弹出 452 10.2 其他 453 实例288 在状态栏显示固定自定义信息 453 实例289 在状态栏显示...

    javascript网页特效实例大全

    7.12 横向移动的跑马灯 181 7.13 可随便移动的文字 182 7.14 水波形的文字 183 7.15 首字母大小写的变化 184 7.16 状态栏文字飞出效果 186 7.17 链接文字的滚动效果 188 7.18 不停变色的文字 189 7.19 文字...

    JavaScript实用范例词典04-14

    6.36 标题上的跑马灯文字... 191 第7章 网页事件篇.... 193 7.1 进入、离开网页显示信息... 193 7.2 单击和双击鼠标事件... 194 7.3 取得鼠标的按键... 195 7.4 禁止单击鼠标右键... 196 7.5 绝对禁止单击鼠标...

    最新Python3.5零基础+高级+完整项目(28周全)培训视频学习资料

    javascript字符串操作以及跑马灯实例 javascript数组和字典以及for循环 javascript条件语句 javascript函数的定义 Dom直接选择器 Dom间接选择器 示例之模态对话框 示例之全选和反选以及取消 javascript必须加分号 ...

Global site tag (gtag.js) - Google Analytics