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 相关文章推荐
一个js封装的不错的选项卡效果代码
Feb 15 Javascript
jQuery操作input值的各种方法总结
Nov 21 Javascript
关闭ie窗口清除Session的解决方法
Jan 10 Javascript
JS实现点击按钮自动增加一个单元格的方法
Mar 09 Javascript
JavaScript替换当前页面的方法
Apr 03 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jQuery中hover与mouseover和mouseout的区别分析
Dec 24 Javascript
JS组件Bootstrap Table使用实例分享
May 30 Javascript
详解angular2封装material2对话框组件
Mar 03 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 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获取bing每日壁纸示例分享
2014/02/25 PHP
ThinkPHP连接数据库的方式汇总
2014/12/05 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
2016/04/07 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
php+jQuery实现的三级导航栏下拉菜单显示效果
2017/08/10 PHP
PHP并发场景的三种解决方案代码实例
2021/02/27 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
jQuery 改变CSS样式基础代码
2010/02/11 Javascript
IE6下js通过css隐藏select的一个bug
2010/08/16 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
2011/07/28 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
JS原型对象的创建方法详解
2016/06/16 Javascript
Javascript中引用类型传递的知识点小结
2017/03/06 Javascript
nodejs根据ip数组在百度地图中进行定位
2017/03/06 NodeJs
详解打造 Vue.js 可复用组件
2017/03/24 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
浅谈react.js中实现tab吸顶效果的问题
2017/09/06 Javascript
node中的session的具体使用
2018/09/14 Javascript
Js实现复选框的全选、全不选反选功能代码实例
2020/02/28 Javascript
[01:05:56]2018DOTA2亚洲邀请赛3月29日 小组赛A组 Newbee VS VG
2018/03/30 DOTA
[55:18]Liquid vs Chaos 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python入门教程之if语句的用法
2015/05/14 Python
python冒泡排序简单实现方法
2015/07/09 Python
pip install urllib2不能安装的解决方法
2018/06/12 Python
使用Python进行防病毒免杀解析
2019/12/13 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
HTML5语义化元素你真的用对了吗
2019/08/22 HTML / CSS
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
Proenza Schouler官方网站:纽约女装和配饰品牌
2019/01/03 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
企划主管岗位职责
2013/12/12 职场文书
征婚广告词
2014/03/17 职场文书
金融专业求职信
2014/08/05 职场文书
2015年财务试用期工作总结
2014/12/24 职场文书
活动宣传稿范文
2015/07/23 职场文书