这篇文章主要介绍了 javascript 实现列表滚动的方法, 较为详细的分析了 javascript 实现列表滚动的页面布局及 javascript 滚动效果的实现技巧, 具有一定参考借鉴价值, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 javascript 实现列表滚动的方法。分享给大家供大家参考。具体如下:
index.html 如下:
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <meta name="keywords" content="" />
- <meta name="description" content="" />
- <link rel="stylesheet" type="text/css" href="css/global.css" />
- <script type="text/javascript" src="js/jquery-1.7.min.js">
- </script>
- <script type="text/javascript" src="js/scroll_img.js">
- </script>
- <title>
- 图片列表滚动
- </title>
- </head>
- <body>
- <div class="scroll_img_wrap clearfix">
- <p class="left_btn">
- <a href="javascript:void(0)">
- <img src="images/btn.jpg" />
- </a>
- </p>
- <div id="scroll_img">
- <ul class="scroll_img_list clearfix">
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information1
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information2
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information3
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information4
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/2.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information5
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/2.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information6
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/2.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information7
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/2.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information8
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information9
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information10
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information11
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information12
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information13
- </a>
- </p>
- </li>
- <li>
- <p>
- <a href="#">
- <img src="images/1.jpg" alt="#" />
- </a>
- </p>
- <p>
- <a href="#">
- information14
- </a>
- </p>
- </li>
- </ul>
- </div>
- <p class="right_btn">
- <a href="javascript:void(0)">
- <img src="images/btn.jpg" />
- </a>
- </p>
- </div>
- </body>
- <script type="text/javascript">
- (function() {
- var test = new scroll_img('scroll_img', 150, 590, 140, 10);
- test.initialize();
- $('.left_btn').click(function() {
- test.stop();
- test.left();
- test.autoplay();
- });
- $('.right_btn').click(function() {
- test.stop();
- test.right();
- test.autoplay();
- });
- })();
- </script>
- </html>
scroll_img.js 如下:
- function scroll_img(target, distance, show_width, li_width, mr) {
- this.distance = distance; //每次移动距离
- this.target = $("#" + target);
- this.show_width = show_width; //显示区域宽度
- this.li_width = li_width; //items宽度
- this.mr = mr; //items间距
- this.scrollbar = $("#" + target).find('ul');
- this.position = 0;
- this.direction = 1;
- }
- scroll_img.prototype = {
- version: 1.00,
- author: "yangfeifei",
- date: 2011 - 11 - 21,
- initialize: function() {
- var t = this;
- t.scrollbar.css('position', 'relative');
- //初始动作
- t.autoplay();
- t.scrollbar.mouseover(function() {
- t.stop();
- }); //鼠标移到图片上停止自动播放
- t.scrollbar.mouseout(function() {
- t.autoplay();
- }); //鼠标移出图片开始自动播放
- },
- right: function() {
- var t = this; ( - t.position) < t.total_length() ? t.position -= t.distance: t.position = t.position;
- if (( - t.position) < t.total_length()) {
- t.scrollbar.animate({
- left: t.position
- },
- 500);
- t.direction = 1;
- }
- if (( - t.position) == t.total_length()) {
- t.scrollbar.animate({
- left: t.position
- },
- 500);
- t.direction = -1;
- }
- },
- left: function() {
- var t = this; ( - t.position) > 0 ? t.position += t.distance: t.position = t.position;
- if (( - t.position) > 0) {
- t.scrollbar.animate({
- left: t.position
- },
- 500);
- t.direction = -1;
- }
- if (( - t.position) == 0) {
- t.scrollbar.animate({
- left: t.position
- },
- 500);
- t.direction = 1;
- }
- },
- total_length: function() {
- var t = this,
- total_num = t.scrollbar.find('li').length;
- return total_num * (t.li_width + t.mr) - (t.mr + t.show_width);
- },
- autoplay: function() {
- var t = this;
- t.setInt = setInterval(function() {
- t.direction == 1 ? t.right() : t.left();
- },
- 3000);
- },
- stop: function() {
- var t = this;
- clearInterval(t.setInt);
- }
- }
global.css 如下:
- /*CSS reset*/
- body,
- div,
- dl,
- dt,
- dd,
- ul,
- ol,
- li,
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- pre,
- form,
- fieldset,
- input,
- textarea,
- p,
- blockquote,
- th,
- td {
- margin: 0;
- padding: 0;
- font - family: arial,
- "宋体";
- }
- table {
- border - collapse: collapse;
- border - spacing: 0;
- }
- fieldset,
- img {
- border: 0;
- }
- address,
- caption,
- cite,
- code,
- dfn,
- em,
- strong,
- th,
- var {
- font - style: normal;
- font - weight: bold;
- }
- ol,
- ul {
- list - style - type: none;
- }
- caption,
- th {
- text - align: left;
- }
- h1,
- h2,
- h3,
- h4,
- h5,
- h6 {
- font - size: 100 % ;
- font - weight: normal;
- }
- /*font-size:100%;的作用主要是改变它默认的大小,继承父体的字体大小*/
- q: before,
- q: after {
- content: ' ';
- }
- abbr,
- acronym {
- border: 0;
- }.cb {
- clear: both;
- }.cl {
- clear: left;
- }.cr {
- clear: right;
- }.clearfix: after {
- content: ".";
- display: block;
- height: 0;
- clear: both;
- visibility: hidden;
- }.clearfix {
- display: inline - block;
- } * html.clearfix {
- height: 1 % ;
- }.clearfix {
- display: block;
- }
- /*主体css*/
- .scroll_img_wrap {
- width: 612px;
- margin: 10px auto;
- }#scroll_img {
- width: 590px;
- overflow: hidden;
- float: left; * position: relative;
- border: 1px#ccc solid;
- }
- /*可视区域宽度*/
- .scroll_img_list {
- width: 9999px;
- }.scroll_img_list li {
- float: left;
- width: 140px;
- margin - right: 10px;
- }
- /*items*/
- .scroll_img_list li p {
- text - align: center;
- }.scroll_img_list li p a {
- text - decoration: none;
- color: #666;
- }.left_btn,
- .right_btn {
- float: left;
- }
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0226/270207.html