js滚动条平滑移动示例代码


Posted in Javascript onMarch 29, 2016

本文实例为大家分享了js滚动条平滑移动相关代码,供大家参考,具体内容如下

html页

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  <title></title> 
  <script src="../Scripts/JavaScript9.js"></script> 
  <link href="../Content/StyleSheet9.css" rel="stylesheet" /> 
  <script src="../Scripts/cxc.js"></script> 
  <meta charset="utf-8" /> 
</head> 
<body> 
  <input type="button" id="bt" value="滑动滚动条" /> 
  <div id="back"> 
  </div> 
  <div id="container"> 
    <div id="main"> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>   
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div> 
      <div class="d"> 
        <p>如果有人说自己得到了真理,对不起,请恕鄙人无法相信。原因就不多谈了,这种拿真理吹牛逼的行为</p> 
      </div>  
    </div> 
  </div> 
</body> 
</html>

js页

var body, back, container, main,bt; //dom 
 
window.onload = function () { 
  domload(); 
  dominit(); 
  events(); 
}; 
var domload = function () { 
  body = document.body; 
  back = $("back"); 
  container = $("container"); 
  main = $("main"); 
  bt = $("bt"); 
}; 
var dominit = function () { 
  setH(back, screenH); 
  setH(container, screenH); 
  setH(main, screenW); 
}; 
var events = function () { 
  AddEvent(bt, EventsType[0], function () { 
    var speed = 10; 
    var min = 0,max = 449; 
    var scrolldown = function () { 
      min += speed; 
      if (min < max) { 
        container.scrollTop = min; 
        setTimeout(scrolldown, 4); 
      } 
    }; 
    setTimeout(scrolldown, 100); 
  }); 
};

css页

* { 
  margin:0px; 
  padding:0px; 
} 
#back { 
  position: absolute; 
  width: 100%; 
  top: 0px; 
  left: 0px; 
  z-index: 1; 
  background-image: url('../Images/psbg/bg7.png'); 
} 
#container{ 
  position:absolute; 
  width:100%; 
  top:0px; 
  left:0px; 
  z-index:100; 
  overflow:auto; 
} 
#main{ 
  position:absolute; 
  width:100%; 
  top:0px; 
  left:0px; 
} 
.d{ 
  margin-top:50px; 
} 
#bt{ 
  position:absolute; 
  top:0; 
  right:50px; 
  z-index:200; 
}

以上就是本文的全部内容,希望对大家的学习有所帮助。

Javascript 相关文章推荐
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
新浪微博字数统计 textarea字数统计实现代码
Aug 28 Javascript
Extjs4 消息框去掉关闭按钮(类似Ext.Msg.alert)
Apr 02 Javascript
js实现点击添加一个input节点
Dec 05 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
Oct 20 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
jQuery学习笔记之Ajax用法实例详解
Dec 01 Javascript
bootstrap实现弹窗和拖动效果
Jan 03 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
防止Node.js中错误导致进程阻塞的办法
Aug 11 Javascript
Node.js复制文件的方法示例
Dec 29 Javascript
JavaScript头像上传插件源码分享
Mar 29 #Javascript
js解决movebox移动问题
Mar 29 #Javascript
javascript中不易分清的slice,splice和split三个函数
Mar 29 #Javascript
分析js闭包引起的事件注册问题
Mar 29 #Javascript
使用postMesssage()实现iframe跨域页面间的信息传递
Mar 29 #Javascript
Angularjs实现多个页面共享数据的方式
Mar 29 #Javascript
jQuery ajax请求返回list数据动态生成input标签,并把list数据赋值到input标签
Mar 29 #Javascript
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
php将图片保存为不同尺寸图片的图片类实例
2015/03/30 PHP
PHP随机生成唯一HASH值自定义函数
2015/04/20 PHP
php封装的mongodb操作类代码
2017/08/06 PHP
css值转换成数值请抛弃parseInt
2011/10/24 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
jQuery制作的别致导航有阴影背景高亮模式窗口
2014/04/15 Javascript
jQuery中:gt选择器用法实例
2014/12/29 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
javascript中Array()数组函数详解
2015/08/23 Javascript
jQuery插件实现无缝滚动特效
2015/11/24 Javascript
jquery实现具有嵌套功能的选项卡
2016/02/12 Javascript
利用JQuery写一个简单的异步分页插件
2016/03/07 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
Node.Js生成比特币地址代码解析
2018/04/21 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
详解Django中的form库的使用
2015/07/18 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
使用python将时间转换为指定的格式方法
2018/11/12 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
Python常用模块sys,os,time,random功能与用法实例分析
2020/01/07 Python
Python标准库shutil模块使用方法解析
2020/03/10 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
日本酒店、民宿、温泉旅馆、当地旅行团中文预订:e路东瀛
2019/12/09 全球购物
自主实习接收函
2014/01/13 职场文书
三年大学生活自我鉴定
2014/01/21 职场文书
模具数控专业自荐信
2014/01/27 职场文书
外贸员简历中的自我评价
2014/03/04 职场文书
亮化工程实施方案
2014/03/17 职场文书
纪念九一八事变演讲稿:忘记意味着背叛
2014/09/14 职场文书
自我推荐信格式模板
2015/03/24 职场文书
使用Golang的channel交叉打印两个数组的操作
2021/04/29 Golang
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫