`

Jquery文字一行一行向上滚动

js 文字滚动显示 
阅读更多

Jquery文字一行一行向上滚动 效果是用了Jquery中animate这个方法实现的 相对来说是蛮简单的 虽然是简单点 还是要分享下 基本原理就是：运用了一个小技巧 滚动的高度和每个li的高度一样的，先找到外层ul的容器 然后相对于外层的容器进行向上滚动 ul在css里面没有设置他的高度 默认情况下是n个li×li的高度 向上是marginTop： -li.height(每个li的高度);
 * 当滚动到最后一个li时候 那么最外层的容器应该滚动到0了 那么我就把第一个li加到ul里面去 这样就实现了循环滚动
 * 而不会滚动到最后一个就停止下来了 基本的HTML/CSS如下

 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
  2. <html> 
  3.     <head> 
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5.         <title>Untitled Document</title> 
  6.     <style type="text/css"> 
  7.         ul,li{list-style:none; margin:0; padding:0;} 
  8.         .scroll{ width:500px; height:175px; overflow:hidden; border:1px solid #333; margin:50px auto 0;} 
  9.         .scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden;} 
  10.         .scroll li a{ font-size:14px; font-family:"宋体";color:#333; text-decoration:none;} 
  11.         .scroll li a:hover{ text-decoration:underline;} 
  12.     </style> 
  13.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
  14.     </head> 
  15.     <body> 
  16.         <div class="scroll"> 
  17.             <ul class="list"> 
  18.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  19.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  20.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  21.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  22.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  23.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  24.                 <li><a href="#" target="_blank">我来博主的空间了</a></li> 
  25.             </ul> 
  26.         </div> 
  27.         <script type="text/javascript" src="index.js"></script> 
  28.     </body> 
  29. </html> 

JS代码如下：

 

  1. /** 
  2.  * @author tugenhua 
  3.  * @email tugenhua@126.com 
  4.  * 一行一行文字向上滚动js 
  5.  * 运用了Jquery中的animate动画方法 
  6.  * 运用了一个小技巧 滚动的高度和每个li的高度一样 
  7.  * 先找到外层ul的容器 然后相对于外层的容器进行向上滚动 ul没有设置他的高度 默认情况下是n个li×li的高度 向上是marginTop： -li.height(每个li的高度); 
  8.  * 当滚动到最后一个li时候 那么最外层的容器应该滚动到0了 那么我就把第一个li加到ul里面去 这样就实现了循环滚动 
  9.  * 而不会滚动到最后一个就停止下来了 
  10.  */ 
  11. function autoScroll(obj){ 
  12.     $(obj).find(".list").animate({ 
  13.         marginTop : "-25px" 
  14.     },500,function(){ 
  15.         $(this).css({marginTop : "0px"}).find("li:first").appendTo(this); 
  16.     }) 
  17. } 
  18. $(function(){ 
  19.     setInterval('autoScroll(".scroll")',3000) 
分享到：
| django csrf token跨站请求
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    文字行向上循环滚动jquery插件，兼容主流浏览器

    总结，通过上述步骤，我们可以创建一个兼容主流浏览器的文字行向上循环滚动jQuery插件。理解jQuery、JavaScript基础以及ECMAScript的新特性是实现此类效果的关键。在实际项目中，应根据需求调整插件参数，优化性能，...

    jQuery文字逐行向上滚动代码.zip

    jQuery文字逐行向上滚动代码是一种常见的网页动态效果，它能够使文本内容以逐行上升的方式展示，常用于新闻更新、公告栏或者滚动广告等场景，为网页增添动态视觉效果，吸引用户注意力。在这个"jQuery文字逐行向上...

    jquery文字多行滚动或模块滚动

    **jQuery文字多行滚动与模块滚动** 在网页设计中，有时候我们需要展示大量文字或信息，但有限的空间使得一次性展示所有内容变得困难。这时，jQuery的文字多行滚动或模块滚动技术就能派上用场。这种技术允许我们将...

    文字列表无缝向上滚动

    这个高度应该是足够显示一行或多行文字的高度，使得在滚动时视觉上没有明显的断层。例如： ```css .scroll-list { height: 300px; /* 设定总体高度 */ overflow: hidden; /* 隐藏超出部分 */ position: relative...

    jQuery向上间歇滚动代码

    这行代码将从jQuery的CDN（内容分发网络）加载最新版本的库。 2. **创建返回顶部按钮**：在页面的适当位置，我们需要创建一个元素，用户可以通过点击它来返回顶部。这通常是一个固定在屏幕底部的按钮。例如： ```...

    jQuery表格信息自动向上滚动代码

    本项目“jQuery表格信息自动向上滚动代码”聚焦于利用jQuery实现一个功能丰富的表格展示效果，尤其适合在数据量较大时提供更好的用户体验。 首先，`index.html`是网页的主文件，它包含了页面的基本结构以及对其他...

    jquery 文字滚动大全 scroll 支持文字或图片 单行滚动 多行滚动 带按钮控制滚动

    1. **单行滚动**：这是最基础的文字滚动方式，适用于展示一行文字或图片。在`单行滚动.html`中，jQuery可能使用了`.slideUp()`和`.slideDown()`方法来模拟向上或向下的滚动效果。这些方法会改变元素的高度，从而实现...

    实现文字的向上滚动

    本主题将深入探讨如何实现“文字的向上滚动”这一功能，结合`jQuery`插件的使用，我们将讨论以下几个关键知识点： 1. **CSS布局与高度设置**： - 在实现文字滚动时，首先要为包含文字的`div`元素设定一个固定的...

    js文字滚动插件制作双行关联向上文字间隙滚动

    总的来说，制作一个js文字滚动插件，特别是双行关联向上滚动的效果，需要熟练掌握JavaScript的基本语法、DOM操作、定时器的使用，以及一定的CSS动画知识。通过实践和学习提供的示例代码，你可以更好地理解和实现这种...

    jQuery文字滚动.rar

    例如，负值使文字向上滚动，正值向下滚动。 3. 复杂版文字滚动 对于更复杂的文字滚动效果，如交替滚动、暂停、鼠标悬停停止等，可以结合其他jQuery功能实现。例如，使用`hover()`监听鼠标悬停事件，暂停和恢复动画...

    jQuery排名文字无缝循环向上滚动代码.zip

    本资源“jQuery排名文字无缝循环向上滚动代码”就是这样一个实例，它利用jQuery实现了文字无缝循环向上滚动的效果，适用于新闻更新、排行榜展示等场景。 该资源包含四个主要文件：index.html、js、css和images，...

    jQuery实现表头固定表格内容滚动效果

    本教程将深入探讨如何利用`jQuery`来创建一个表头固定、内容区域可滚动的表格。 首先，我们需要在HTML中构建基本的表格结构。表头`&lt;thead&gt;`通常包含表的列名，而表体`&lt;tbody&gt;`则包含实际的数据行。例如： ```html ...

    文字的一行一行滚动显示

    在网页设计中，"文字的一行一行滚动显示"是一种常见的动态效果，用于展示大量文本信息，如新闻更新、公告或天气预报等。这种效果能够节省页面空间，同时保持信息的可见性，为用户提供一个动态阅读体验。实现这种效果...

    JQuery 文字滚动

    **jQuery文字滚动**是一种网页动态效果，用于展示文本信息，特别是在有限的空间内显示大量内容时。这个技术使得网站能够以滚动的方式展示新闻标题、公告或者菜单等，吸引用户的注意力并节省网页空间。在本示例中，...

    jquery单行文字向上滚动效果的实现代码

    标题中的“jquery单行文字向上滚动效果的实现代码”指的是使用jQuery库来创建一个效果，使得文本在一行内持续向上滚动。这种效果常用于新闻滚动、公告栏等场景，能够吸引用户注意并节省空间。 首先，我们需要理解...

    jQuery文字上下滚动3个效果

    在“jQuery文字上下滚动3个效果”这个主题中，我们将探讨如何利用jQuery实现文字在页面上动态上下滚动的效果，这通常用于新闻标题、公告或者滚动字幕等场景。 1. **基本概念** - **jQuery选择器**：jQuery的核心是...

    jquery单行文字向上滚动效果示例

    文章中的jQuery单行文字向上滚动效果示例，向我们展示了如何使用jQuery的定时器和动画功能来实现一个简单而实用的页面效果。通过设置合适的间隔时间和步长，以及合理的CSS布局，可以轻松制作出视觉上吸引人的滚动...

    jQuery插件实现文字无缝向上滚动效果代码

    列表项`&lt;li&gt;`的样式则控制每一行文字的高度。 接下来是jQuery插件的核心部分。在JavaScript中，我们定义一个名为`scrollTop`的函数，它接受一个选项对象`options`，默认值包括`speed`属性，表示滚动的速度。这个...

    原生js scrolltext无缝滚动插件带按钮控制文字向上无缝滚动

    5. **状态管理**：维护滚动状态，比如当前滚动到哪一行，是否达到边界，是否需要反向滚动等。 6. **兼容性处理**：考虑到不同浏览器对CSS3属性的支持程度不同，可能需要添加浏览器前缀或者使用渐进增强的方式来确保...

Magicbox
Global site tag (gtag.js) - Google Analytics