基于HTMl的 自滚动 标签

基于HTMl的 自滚动 标签(无需任何引入直接使用)

效果实现图:

在这里插入图片描述

代码

<marquee>
	0123456789012345678901234567890123456789012345678901234567890
</marquee>

api文档详细说明

标签属性

标签名功能说明详细范围默认
direction内容滚动的方向left,right,up,downleft
behavior内容滚动的方式scroll(连续滚动),slide(滚动一次), alternate(来回滚动)scroll
loop内容滚动的次数正整数无限循环
scrollamount内容滚动速度正整数6
scrolldelay停顿时间正整数0
align内容的垂直对齐方式top,middle,bottommiddle
bgcolor滚动区域的背景颜色16进制的RGB颜色,或是颜色的英文白色
height滚动区域的高度正整数(单位是像素或者百分数)标签内容的高度
width滚动区域的宽度正整数(单位是像素或者百分数)width=100%
hspace内容到滚动区域边界的水平距离正整数(单位是像素)
vspace内容到滚动区域边界的垂直距离正整数(单位是像素)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用jquery的animate()函数实现图片横向滚动的效果,具体实现步骤如下: 1. HTML结构:使用ul和li标签实现图片列表,并添加左右按钮。 ``` <div class="scroll-container"> <ul class="scroll-list"> <li><img src="image1.jpg"></li> <li><img src="image2.jpg"></li> <li><img src="image3.jpg"></li> <li><img src="image4.jpg"></li> </ul> <div class="scroll-btn scroll-btn-left"></div> <div class="scroll-btn scroll-btn-right"></div> </div> ``` 2. CSS样式:设置容器的宽度和高度,并使图片横向排列。 ``` .scroll-container { position: relative; width: 600px; height: 300px; overflow: hidden; } .scroll-list { position: absolute; top: 0; left: 0; width: 9999px; height: 300px; overflow: hidden; white-space: nowrap; } .scroll-list li { display: inline-block; width: 600px; height: 300px; } ``` 3. JS代码:给左右按钮添加点击事件,通过animate()函数实现图片的横向滚动。 ``` $(function(){ var $scrollList = $('.scroll-list'); var $scrollItem = $('.scroll-list li'); var itemWidth = $scrollItem.outerWidth(true); var scrollWidth = itemWidth * $scrollItem.length; var leftPos = $scrollList.position().left; var minPos = - (scrollWidth - $scrollList.parent().width()); $('.scroll-btn-left').click(function(){ if (leftPos < 0) { leftPos += itemWidth; $scrollList.animate({left: leftPos + 'px'}, 500); } }); $('.scroll-btn-right').click(function(){ if (leftPos > minPos) { leftPos -= itemWidth; $scrollList.animate({left: leftPos + 'px'}, 500); } }); }); ``` 以上代码实现了点击左右按钮图片横向滚动的效果。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值