<!doctype html>
<html>
<head>
<meta charset="gbk"/>
<title>基于jQuery的上下无缝滚动应用(单行或多行)@Mr.Think</title>
<link rel="stylesheet" href="http://mrthink.net/demo/css/base.css" />
<link rel="shortcut icon" type="image/x-icon" href="http://mrthink.net/wp-content/themes/zsofa/favicon.ico" />
<meta name="author" content="Mr.Think又名青鸟简称i" />
<meta name="keywords" content="i,Mr.Think,前端开发,WEB前端,前端技术,前端开发,WEB前端开发,用户体验,网站策划,网站优化,青鸟,javascript,jQuery,css,xhtml,html,UE,SEO,Mr.Think的博客,青鸟的博客,PHP爱好者" />
<meta name="description" content="Mr.Think的博客,中文网名青鸟,现专注于WEB前端开发,同时也是一位PHP的爱好者.爱思考,有点代码洁癖,生吃过螃蟹腿,喜好肉食.这里是我记录知识与生活琐事的地方." />
<link rel="pingback" href="http://mrthink.net/xmlrpc.php" />
<link rel="alternate" type="application/rss+xml" title="Mr.Think的博客 RSS Feed" href="http://mrthink.net/feed/" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<style>
/*demo css*/
#demo h2{background:#a40000; font-size:12px; color:#fff; font-weight:normal; text-align:center; width:100px; height:25px;line-height:25px; margin:30px 0 0 20px}
#demo ul.line,#demo ul.mulitline{width:500px; height:30px; background:#eee; overflow:hidden;margin-bottom:20px;border:2px solid #a40000}
#demo ul.mulitline{height:90px}
#demo li{height:30px;text-indent:15px; font-size:12px; line-height:30px;list-style:none}
</style>
<script>
/*******************************
* @author Mr.Think
* @author blog http://mrthink.net/
* @2010.08.08
* @可自由转载及使用,但请注明版权归属
*******************************/
$(function(){
//单行应用@Mr.Think
var _wrap=$('ul.line');//定义滚动区域
var _interval=2000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
$(function(){
//多行应用@Mr.Think
var _wrap=$('ul.mulitline');//定义滚动区域
var _interval=3000;//定义滚动间隙时间
var _moving;//需要清除的动画
_wrap.hover(function(){
clearInterval(_moving);//当鼠标在滚动区域中时,停止滚动
},function(){
_moving=setInterval(function(){
var _field=_wrap.find('li:first');//此变量不可放置于函数起始处,li:first取值是变化的
var _h=_field.height();//取得每次滚动高度
_field.animate({marginTop:-_h+'px'},600,function(){//通过取负margin值,隐藏第一行
_field.css('marginTop',0).appendTo(_wrap);//隐藏后,将该行的margin值置零,并插入到最后,实现无缝滚动
})
},_interval)//滚动间隔时间取决于_interval
}).trigger('mouseleave');//函数载入时,模拟执行mouseleave,即自动滚动
});
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head>
<body>
<div id="d_head">
<h1><a title="返回Mr.Think的博客" href="http://mrthink.net/">Mr.Think的博客</a><em>可自由转载及使用,但请注明出处.</em></h1>
<h2><span><a title="订阅Mr.Think的博客" href="http://mrthink.net/feed/">RSS Feed</a></span>@专注Web前端技术, 热爱PHP, 崇尚简单生活的凡夫俗子.</h2>
</div>
<div class="return">返回文章页:<a href="http://mrthink.net/js-jq-autoscroll-updown/">基于jQuery的上下无缝滚动应用(单行或多行)</a></div>
<!--DEMO start-->
<div id="demo">
<h2>单行应用</h2>
<ul class="line">
<li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
<li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
<li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
<li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
<li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
</ul>
<!--//jQ版本//-->
<h2>多行应用</h2>
<ul class="mulitline">
<li><a title="一个简单的鼠标划过切换效果" href="http://mrthink.net/script-mousechange-simple/">一个简单的鼠标划过切换效果</a> 2010年05月23日 (4)</li><li><a title="奇或偶数行高亮显示及鼠标划过高亮显示类" href="http://mrthink.net/javascript-tagnames-highlight/">奇或偶数行高亮显示及鼠标划过高亮显示类</a> 2010年05月05日 (5)</li>
<li><a title="getElementsByTagName的简写方式" href="http://mrthink.net/javascrip-simple-getelementsbytagname/">getElementsByTagName的简写方式</a> 2010年06月24日 (4)</li>
<li><a title="两种简单实现菜单高亮显示的JS类" href="http://mrthink.net/javascript-highlight-menu-twoway/">两种简单实现菜单高亮显示的JS类</a> 2010年04月17日 (10)</li>
<li><a title="简易的点击展开/关闭效果(原生JS版和JQ版)" href="http://mrthink.net/js-jq-click-openclose/">简易的点击展开/关闭效果(原生JS版和JQ版)</a> 2010年08月02日 (6)</li>
<li><a title="一个简单的纵横向动画效果类" href="http://mrthink.net/javascrip-dom-slide-simple/">一个简单的纵横向动画效果类</a> 2010年05月02日 (4)</li><li><a title="document.getElementById的简写方式" href="http://mrthink.net/javascript-getbyid-simplewrite/">document.getElementById的简写方式</a> 2010年04月18日 (1)</li>
</ul>
<!--//多行应用//-->
</div>
<!--DEMO end-->
<!--@Mr.Think的统计及广告代码,使用样例请勿复制:)-->
<div class="clear"></div>
<div id="adsense"></div>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-15924173-1");
pageTracker._trackPageview();
} catch(err) {}
</script>
<!--@end-->
</body>
</html>
http://mrthink.net/demo/thinkjsjq100808.htm
分享到：
相关推荐
基于jQuery的上下无缝滚动应用(单行或多行).htm
基于jQuery的上下无缝滚动应用(单行或多行
jQuery 是一个广泛使用的 JavaScript 库，它简化了DOM操作、事件处理和动画效果，因此用jQuery来实现公告的上下无缝滚动是理想的选择。在本教程中，我们将深入探讨如何使用jQuery实现这个功能。 首先，我们需要在...
"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术，它使得图片能够在页面上以平滑、连续的方式移动，既可以从左到右，也可以从上到下，为用户带来流畅的视觉体验。 jQuery是一个...
本教程将聚焦于"jquery文本单行多行滚动特效"，这是一种常见且吸引用户注意力的设计手法，常用于新闻更新、公告展示或者广告轮播。 首先，我们来详细了解一下这种特效的基本概念。文本滚动特效是指将文字或文本列表...
本教程将详细讲解基于jQuery实现的"文字滚动大全"，其中包括单行滚动、多行滚动以及带按钮控制的滚动效果。 首先，我们要了解jQuery中的scroll方法。通常，scroll事件用于监听滚动条的滚动动作，但在这个特定场景下...
"jQuery文字上下无缝滚动"是一种常见的网页动态效果，它可以使文字或内容在页面上持续滚动，给予用户流畅且不间断的阅读体验。这种效果常用于新闻更新、公告栏或广告展示等场景。 jQuery是一个强大的JavaScript库，...
liMarquee 是一款基于 jQuery 的无缝滚动插件，类似于 HTML 的 Marquee 标签，但比 Marquee 更强大。它可以应用于任何 Web 元素，同时它可以设置不同的滚动方向（左右上下）、滚动速度、鼠标悬停暂停、鼠标拖动、...
【标题】"js 单行多行滚动信息新闻"指的是使用JavaScript实现的一种动态展示新闻信息的效果，这种效果常见于网站的新闻更新区域，通过上下滚动或左右滑动的方式，使得多条新闻信息在有限的空间内循环展示，既节省了...
总结，jQuery在实现单行或多行滚动效果上提供了极大的便利。通过理解jQuery的基本语法和DOM操作，开发者可以快速地创建出各种动态滚动效果，提升网页的用户体验。无论是在新闻网站、公告栏还是产品展示中，jQuery的...
在网页设计中，动态效果常常能提升用户体验，其中“向上无缝滚动”是一种常见的文本或图片滚动展示方式。这个效果使得内容能够持续不断地从底部向上滚动，给用户带来连贯且吸引人的视觉体验。在本文中，我们将深入...
【标题】"Jquery图片无缝连续循环滚动 支持上下左右的滚动.zip" 提供的是一个基于jQuery的图片滚动插件，它具有丰富的视觉效果，能够实现图片的无缝连续循环滚动，不仅支持横向滚动，还支持纵向滚动，为网页增添动态...
本文将详细讲解如何使用jQuery实现一个广告上下无缝滚动的效果，其中每个广告的高度可以不一致，提供更高的灵活性。 首先，我们需要了解`marquee`标签。在HTML中，`<marquee>`是一个非标准但广泛使用的元素，用于...
6. **插件使用**：在实际项目中，开发者可能会使用已有的jQuery无缝滚动插件，比如`jQuery.scrollable`或`jQuery.Slide`等。这些插件通常提供丰富的配置选项和API，以满足不同需求。 在提供的文件名`texiao5488_...
这时，jQuery的文字多行滚动或模块滚动技术就能派上用场。这种技术允许我们将内容动态地、逐行滚动显示，既节省空间又增加了视觉效果。 ### 一、jQuery基础 在深入讨论多行滚动之前，我们需要了解jQuery的基础知识...
【jQuery 无缝滚动效果详解】 在网页设计中，动态效果的运用可以提升用户体验，其中“无缝滚动”是一种常见的视觉效果，常用于展示图片或文本信息。本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果，...
**jQuery上下滚动插件**是一种常用的前端开发工具，主要用于实现网页元素（如`<li>`列表项）的平滑上下滚动效果。这种效果在展示新闻、公告或产品列表时非常常见，可以为用户带来动态浏览体验，提升网站的互动性和...