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 相关文章推荐
数组Array进行原型prototype扩展后带来的for in遍历问题
Feb 07 Javascript
读jQuery之十二 删除事件核心方法
Jul 31 Javascript
JavaScript 学习笔记之变量及其作用域
Jan 14 Javascript
JQuery悬停控制图片轮播——代码简单
Aug 05 Javascript
js阻止浏览器默认行为的简单实例
May 15 Javascript
JS使用onerror捕获异常示例
Aug 03 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
angular2中Http请求原理与用法详解
Jan 11 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
js防抖和节流的深入讲解
Dec 06 Javascript
微信小程序实现的绘制table表格功能示例
Apr 26 Javascript
js+springMVC 提交数组数据到后台的实例
Sep 21 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实现批量查询清除一句话后门的代码
2008/01/20 PHP
Session的工作机制详解和安全性问题(PHP实例讲解)
2014/04/10 PHP
php使用imagick模块实现图片缩放、裁剪、压缩示例
2014/04/17 PHP
phpmyadmin提示The mbstring extension is missing的解决方法
2014/12/17 PHP
select标记美化--JS式插件、后期加载
2013/04/01 Javascript
jquery仿京东导航/仿淘宝商城左侧分类导航下拉菜单效果
2013/04/24 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
如何利用AngularJS打造一款简单Web应用
2015/12/05 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Vue.js组件间的循环引用方法示例
2017/12/27 Javascript
vue项目中应用ueditor自定义上传按钮功能
2018/04/27 Javascript
使用rollup打包JS的方法步骤
2018/12/05 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
vue实现菜单切换功能
2019/05/08 Javascript
教你完全理解ReentrantLock重入锁
2019/06/03 Javascript
Python中的默认参数详解
2015/06/24 Python
python多进程共享变量
2016/04/06 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
python Opencv将图片转为字符画
2021/02/19 Python
Python高斯消除矩阵
2019/01/02 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
Django3.0 异步通信初体验(小结)
2019/12/04 Python
Python编程快速上手——选择性拷贝操作案例分析
2020/02/28 Python
解决pyPdf和pyPdf2在合并pdf时出现异常的问题
2020/04/03 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
打架检讨书2000字
2014/02/22 职场文书
合作意向书模板
2014/03/31 职场文书
关爱留守儿童倡议书
2014/04/15 职场文书
交通安全责任书范本
2014/07/24 职场文书
欢迎新生标语
2014/10/06 职场文书
2015年员工试用期工作总结
2014/12/12 职场文书
nginx负载功能+nfs服务器功能解析
2022/02/28 Servers
【海涛dota解说】DCG联赛第一周 LGD VS DH
2022/04/01 DOTA