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

运用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属性时,若属性为两个单词组成的,需要去掉连接符’-’,将第二个单词首字母大写哦!

猜你喜欢

转载自blog.csdn.net/qq_42835377/article/details/98473289
今日推荐