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 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
一个javascript图片阅览组件
Nov 09 Javascript
javascript中input中readonly和disabled区别介绍
Oct 23 Javascript
jquery 如何动态添加、删除class样式方法介绍
Nov 07 Javascript
jsonp原理及使用
Oct 28 Javascript
jQuery自定义添加&quot;$&quot;与解决&quot;$&quot;冲突的方法
Jan 19 Javascript
AngularJS入门教程中SQL实例详解
Jul 27 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
JS 数组随机洗牌的实例代码
Sep 12 Javascript
javascript中join方法实例讲解
Feb 21 Javascript
小程序分享链接onShareAppMessage的具体用法
May 22 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
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php使用Jpgraph绘制简单X-Y坐标图的方法
2015/06/10 PHP
PHP版微信第三方实现一键登录及获取用户信息的方法
2016/10/14 PHP
PHP基于array_unique实现二维数组去重
2020/07/14 PHP
基于jquery的DIV随滚动条滚动而滚动的代码
2012/07/20 Javascript
jQuery中 noConflict() 方法使用
2013/04/25 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JS判断客服QQ号在线还是离线状态的方法
2015/01/13 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
javascript每日必学之条件分支
2016/02/17 Javascript
JS中多种方式创建对象详解
2016/03/22 Javascript
jQuery的图片轮播插件PgwSlideshow使用详解
2016/08/11 Javascript
详解VueJs前后端分离跨域问题
2017/05/24 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
JS轮播图的实现方法2
2020/08/25 Javascript
Python 中 Meta Classes详解
2016/02/13 Python
python生成词云的实现方法(推荐)
2017/06/13 Python
python带参数打包exe及调用方式
2019/12/21 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
python中plt.imshow与cv2.imshow显示颜色问题
2020/07/16 Python
Python 转移文件至云对象存储的方法
2021/02/07 Python
纯CSS3实现给头像加个光芒四射且旋转的背景动画效果
2014/05/07 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
Unineed旗下时尚轻奢网站:FABHunt
2019/05/13 全球购物
Unix/Linux开发面试题
2016/08/16 面试题
2014年医学生毕业自我鉴定
2014/03/26 职场文书
幼儿园开学温馨提示
2015/07/15 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
Java 超详细讲解hashCode方法
2022/04/07 Java/Android
MySQL中一条SQL查询语句是如何执行的
2022/04/08 MySQL
python APScheduler执行定时任务介绍
2022/04/19 Python
Elasticsearch 索引操作和增删改查
2022/04/19 Python