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 相关文章推荐
让焦点自动跳转
Jul 01 Javascript
js 得到文件后缀(通过正则实现)
Jul 08 Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 Javascript
JavaScript 对象详细整理总结
Sep 29 Javascript
JS中parseInt()和map()用法分析
Dec 16 Javascript
详解JavaScript常量定义
Jan 03 Javascript
JS查找数组中重复元素的方法详解
Jun 14 Javascript
axios发送post请求springMVC接收不到参数的解决方法
Mar 05 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Websocket 向指定用户发消息的方法
Jan 09 Javascript
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
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开发大型项目的一点经验
2006/10/09 PHP
使用php计算排列组合的方法
2013/11/13 PHP
php递归删除目录与文件的方法
2015/01/30 PHP
标准PHP的AES加密算法类
2015/03/12 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP开发api接口安全验证操作实例详解
2020/03/26 PHP
两种WEB下的模态对话框 (asp.net或js的分别实现)
2009/12/02 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
2012/03/15 Javascript
Javascript优化技巧之短路表达式详细介绍
2015/03/27 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
2015/11/19 Javascript
javascript中闭包(Closure)详解
2016/01/06 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
ES6新特性之字符串的扩展实例分析
2017/04/01 Javascript
js replace 全局替换的操作方法
2018/06/12 Javascript
解决vue v-for 遍历循环时key值报错的问题
2018/09/06 Javascript
vue实现随机验证码功能的实例代码
2019/04/30 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
Vue 微信端扫描二维码苹果端却只能保存图片问题(解决方法)
2020/01/19 Javascript
[47:50]Secret vs VP 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
Python判断文件或文件夹是否存在的三种方法
2017/07/27 Python
关于django 数据库迁移(migrate)应该知道的一些事
2018/05/27 Python
python使用pandas处理大数据节省内存技巧(推荐)
2019/05/05 Python
python 判断文件还是文件夹的简单实例
2019/06/10 Python
python调用Matplotlib绘制分布点图
2019/10/18 Python
Python基于codecs模块实现文件读写案例解析
2020/05/11 Python
一份创业计划书范文
2014/02/08 职场文书
车间主任岗位职责范本
2015/04/08 职场文书
golang判断key是否在map中的代码
2021/04/24 Golang
MySQL 查询速度慢的原因
2021/05/25 MySQL
MySQL修炼之联结与集合浅析
2021/10/05 MySQL