html滚动效果实现

最新推荐文章于 2024-05-18 17:18:05 发布

原创最新推荐文章于 2024-05-18 17:18:05 发布 · 683 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了如何在HTML页面中实现滚动效果，包括在CSS中设置样式，在HTML中添加相应代码，以及使用JavaScript来增强滚动功能。通过这三个步骤，你可以为网页创造出动态且吸引人的滚动体验。

1. 在css页面添加样式

.fl{ float:left;}
.fr{ float:right;}
.cls{clear:both;}
.width-auto{width:1000px; margin:0 auto;}

.nrog_oo_img{margin-top:75px; margin-left:13px;margin-right:12px;cursor:pointer}

2. 在html中添加代码

在head中添加js文件（该js文件在“我的资源处下载”）

在body中添加如下代码

<div id="LeftArr1" class="nrog_oo_img fl"><img src="{dede:global.cfg_templeturl/}/handi/img/ship_02.png"/></div>
<div id="scrollPic1" class="fl">
要滚动的内容
</div>
<div id="RightArr1" class="nrog_oo_img fr"><img src="{dede:global.cfg_templeturl/}/handi/img/ship_03.png"/></div>

3. 添加的js代码

window.onload = function(){
scrollPic();
}
function scrollPic() {
var scrollPic = new ScrollPic();
scrollPic.scrollContId = "scrollPic"; //内容容器ID
scrollPic.arrLeftId = "RightArr";//左箭头ID
scrollPic.arrRightId = "LeftArr"; //右箭头ID

scrollPic.frameWidth = 880;//显示框宽度
scrollPic.pageWidth = 220; //翻页宽度

scrollPic.speed = 10; //移动速度(单位毫秒，越小越快)
scrollPic.space = 10; //每次移动像素(单位px，越大越快)
scrollPic.autoPlay = true; //自动播放
scrollPic.autoPlayTime = 3; //自动播放间隔时间(秒)

scrollPic.initialize(); //初始化
}