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 - 如何引入js代码
Mar 09 Javascript
jQuery 浮动广告实现代码
Dec 25 Javascript
基于jQuery的一个扩展form序列化到json对象
Dec 09 Javascript
javascript 正则表达式相关应介绍
Nov 27 Javascript
兼容IE和FF的图片上传前预览js代码
May 28 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
js验证整数加保留小数点的简单实例
Dec 02 Javascript
基于javascript简单实现对身份证校验
Jan 25 Javascript
js实现倒计时效果(小于10补零)
Mar 08 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 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
使用VisualStudio开发php的图文设置方法
2010/08/21 PHP
CodeIgniter实现更改view文件夹路径的方法
2014/07/04 PHP
PHP翻页跳转功能实现方法
2020/11/30 PHP
php对xml文件的增删改查操作实现方法分析
2017/05/19 PHP
PHP PDOStatement::debugDumpParams讲解
2019/01/30 PHP
jquery tools系列 expose 学习
2009/09/06 Javascript
Jquery选择器 $实现原理
2009/12/02 Javascript
js前台判断开始时间是否小于结束时间
2012/02/23 Javascript
JavaScript数值转换的三种方式总结
2014/07/31 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jQuery提示插件qTip2用法分析(支持ajax及多种样式)
2016/06/08 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
2016/12/18 Javascript
基于vue实现分页/翻页组件paginator示例
2017/03/09 Javascript
详解webpack2+node+react+babel实现热加载(hmr)
2017/08/24 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Python制作钉钉加密/解密工具
2016/12/07 Python
TensorFlow损失函数专题详解
2018/04/26 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python Gitlab Api 使用方法
2019/08/28 Python
解决import tensorflow as tf 出错的原因
2020/04/16 Python
scrapy中如何设置应用cookies的方法(3种)
2020/09/22 Python
HTML5资源预加载(Link prefetch)详细介绍(给你的网页加速)
2014/05/07 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
学校大课间活动方案
2014/01/30 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
知识竞赛主持词
2014/03/26 职场文书
班主任个人工作反思
2014/04/28 职场文书
大班亲子运动会方案
2014/06/10 职场文书
巾帼志愿者活动方案
2014/08/17 职场文书
五五普法心得体会
2014/09/04 职场文书
办理收楼委托书范本
2014/10/09 职场文书
2014幼儿园班主任工作总结
2014/12/04 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
最感人的道歉情书
2015/05/12 职场文书
2016党校学习心得体会
2016/01/07 职场文书