跑马灯---js组件 可自设参数

13 篇文章 0 订阅

运用JavaScript的DOM实现纯js的跑马灯的效果。
以下是跑马灯可设的参数:
content是广告内容
y是距离顶部的位置
background是背景颜色
color是字体颜色
size:修改字体大小
height是广告高度
代码如下:

<script>
    var test1 = function (content,y,height,size,color,background)
    {
    // eleId 自己定义的变量名,任意取
    // document.createElement ('marquee'); 勿改变
        var eleId = document.createElement ('marquee');
        eleId.style.position = 'absolute';
		eleId.style.background = background;
		eleId.style.color = color;
		eleId.style.fontSize  = size + 'px';
        eleId.style.height = height + 'px';
        eleId.style.top = y + 'px';
        eleId.innerText = content;
        document.body.appendChild (eleId);
    }
     
    window.onload = function ()
    {
    var abc = "知道爱你 没有结局 与你飞行与你坠落与你感受与你快活与你想做的有太多却只能与你错过";
        test1 (abc,100,'30','25','0%','red');
    }
</script>
  • 注意哦,js操作css属性时,若属性为两个单词组成的,需要去掉连接符’-’,将第二个单词首字母大写哦!
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值