js 实现div里面的内容滚动,并可以通过按钮控制

这篇博客介绍了如何利用JavaScript库jQuery实现div内容的滚动,并通过按钮进行控制。作者详细阐述了CSS样式设置和JS文件的准备,包括jQuery.js、jquery-ui-1.8.6.custom.min.js和MSClass.js。当鼠标悬停在内容上时,滚动会暂停,移开后继续。此外,博主还更新了功能,使得点击按钮时内容会加速滚动1秒后再恢复原速度。提供了一个稍显粗糙但功能实现的demo供读者参考。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

按照步骤来:

 

一  css 样式控制:

.in_f {
	CLEAR: both; HEIGHT: 46px
}
.in_f .a {
	BACKGROUND: url(../images/i12.gif) no-repeat left 50%; FLOAT: left; WIDTH: 160px; HEIGHT: 46px
}
.in_f .b {
	FLOAT: left; WIDTH: 17px; HEIGHT: 46px
}
.in_f .centerBox {
	DISPLAY: inline; FLOAT: left; MARGIN: 0px 10px; OVERFLOW: hidden; width:498px; HEIGHT: 232px
}
.in_f .centerBox IMG {
	MARGIN: 0px 3px
}
.in_f .d {
	FLOAT: left; WIDTH: 16px; HEIGHT: 46px
}
.in_f .b IMG {
	CURSOR: pointer
}
.in_f .d IMG {
	CURSOR: pointer
}

 

 

二:准备js

    jQuery.js

    jquery-ui-1.8.6.custom.min.js

    MSClass.js  ----这个就是滚动的操作js

 

   

<!--  引入js 和 css -->  
 <!--  控制滚动的按钮  -->
<img id="left" title="向左滚动" alt="向左
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值