js实现带按钮的上下滚动效果


Posted in Javascript onMay 12, 2015

本文实例讲述了js实现带按钮的上下滚动效果。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js带按钮上下滚动效果</title>
<style type="text/css">
ul{
 margin:0;
 padding:0;
 list-style:none;
 height:100000px;
}
li{
 margin:0;
 padding:0;
 width:100px;
 height:100px;
 display:block;
 float:top;
 margin-bottom:5px;
 background:#009900;
}
#img_bag{
 width:110px;
 height:600px;
 background:#F2F2F2;
 margin:0 auto;
 text-align:center;
}
#img_bag #img{
 width:100px;
 height:525px;
 background:#969696;
 overflow:hidden;
 margin:auto;
}
</style>
</head>
<body>
<div id="img_bag">
 <a href="javascript:void(0)" onmousedown="moveTop()">
 <img src="upp.jpg" border="0" /></a>
 <div id="img">
 <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
 </ul>
 </div>
 <a href="javascript:void(0)" onmousedown="moveBottom()">
 <img src="down.jpg" border="0" /></a>
</div>
<script type="text/javascript">
function $(obj){
 //获取指定对象
 return document.getElementById(obj);
}
var maxHeight=$("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length*105;
//滚动图片的最大高度
var targety = 211;
//一次滚动距离
var dx;
var a=null;
function moveTop(){
 var le=parseInt($("img").scrollTop);
 if(le>211){
 targety=parseInt($("img").scrollTop)-211;
 }else{
 targety=parseInt($("img").scrollTop)-le-1;
 }
 scTop();
}
function scTop(){
 dx=parseInt($("img").scrollTop)-targety;
 $("img").scrollTop-=dx*.3;
 clearScroll=setTimeout(scTop,50);
 if(dx*.3<1){
 clearTimeout(clearScroll);
 }
}
function moveBottom(){
 var le=parseInt($("img").scrollTop)+211;
 var maxL=maxHeight-600;
 if(le<maxL){
 targety=parseInt($("img").scrollTop)+211;
 }else{
 targety=maxL
 }
 scBottom();
}
function scBottom(){
 dx=targety-parseInt($("img").scrollTop);
 $("img").scrollTop+=dx*.3;
 a=setTimeout(scBottom,50);
 if(dx*.3<1){
 clearTimeout(a)
 }
}
</script>
</body>
</html>

运行效果如下所示:

js实现带按钮的上下滚动效果

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
完美解决IE低版本不支持call与apply的问题
Dec 05 Javascript
21个值得收藏的Javascript技巧
Feb 04 Javascript
js实现漂浮回顶部按钮实例
May 06 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
js模仿微信朋友圈计算时间显示几天/几小时/几分钟/几秒之前
Apr 27 Javascript
vue初尝试--项目结构(推荐)
Jan 30 Javascript
angularjs实现的购物金额计算工具示例
May 08 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
pm2发布node配置文件ecosystem.json详解
May 15 Javascript
微信小程序发布新版本时自动提示用户更新的方法
Jun 07 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 15 Javascript
js验证上传图片的方法
May 12 #Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 #Javascript
js实现一个链接打开两个链接地址的方法
May 12 #Javascript
js实现鼠标经过表格行变色的方法
May 12 #Javascript
js比较日期大小的方法
May 12 #Javascript
js实现简单div拖拽功能实例
May 12 #Javascript
js实现两点之间画线的方法
May 12 #Javascript
You might like
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
基于MySQL体系结构的分析
2013/05/02 PHP
ThinkPHP验证码和分页实例教程
2014/08/22 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
yii2框架中使用下拉菜单的自动搜索yii-widget-select2实例分析
2016/01/09 PHP
Laravel5中防止XSS跨站攻击的方法
2016/10/10 PHP
PHP手机短信验证码实现流程详解
2018/05/17 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
javascript 文本框水印/占位符(watermark/placeholder)实现方法
2012/01/15 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
网页禁用右键菜单和鼠标拖动选择方法小结
2015/02/25 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
2015/10/10 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
类似于QQ的右滑删除效果的实现方法
2016/10/16 Javascript
JQuery学习总结【二】
2016/12/01 Javascript
JS对象的深度克隆方法示例
2017/03/16 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
在JS循环中使用async/await的方法
2018/10/12 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
JavaScript实现抖音罗盘时钟
2019/10/11 Javascript
[20:57]Ti4主赛事第三天开幕式
2014/07/21 DOTA
python网络编程学习笔记(10):webpy框架
2014/06/09 Python
Python编写简单的HTML页面合并脚本
2016/07/11 Python
python中字符串类型json操作的注意事项
2017/05/02 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python中列表与元组的乘法操作示例
2018/02/10 Python
python3使用SMTP发送HTML格式邮件
2018/06/19 Python
JACK & JONES瑞典官方网站:杰克琼斯欧式风格男装
2017/12/23 全球购物
小区门卫值班制度
2014/01/24 职场文书
《藏戏》教学反思
2014/02/11 职场文书
助学金申请书该怎么写?
2019/07/16 职场文书
Mysql文件存储图文详解
2021/06/01 MySQL
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python