这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 实现带按钮的上下滚动效果, 设计 javascript 鼠标事件及页面元素样式的相关操作技巧, 需要的朋友可以参考下
本文实例讲述了 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>
运行效果如下所示:
希望本文所述对大家的 javascript 程序设计有所帮助。
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0629/271370.html