jquery 文字(动态消息)向上滚动一次一行多种方法

例1

 代码如下 复制代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">  

   <html>  

       <head>  

           <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  

           <title>Untitled Document</title>  

       <style type="text/css">  

           .list,li{list-style:none; margin:0; padding:0;}  

           .scroll{ width:500px; height:25px; overflow:hidden; border:1px solid #333;}  

           .scroll li{ width:500px; height:25px; line-height:25px; overflow:hidden;}  

           .scroll li a{ font-size:14px;color:#333; text-decoration:none;}  

           .scroll li a:hover{ text-decoration:underline;}  

       </style>  

       <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>  

       </head>  

       <body>  

           <div class="scroll">  

               <ul class="list">  

                   <li><a href="#" target="_blank">sdfsdfsdf </a></li>  

                   <li><a href="#" target="_blank">rtyrt rty rtyrt r</a></li>  

               </ul>  

           </div>  

           <script>

                   function autoScroll(obj){  

                       $(obj).find(".list").animate({  

                           marginTop : "-25px"  

                       },500,function(){  

                           $(this).css({marginTop : "0px"}).find("li:first").appendTo(this);  

                       })  

                   }  

                   $(function(){  

                       setInterval('autoScroll(".scroll")',3000)  

                   })  

           </script>

       </body>  

   </html>  

例2 jquery 向上滚动效果

 代码如下 复制代码

<script type="text/javascript">
function AutoScroll(obj) {
$(obj).find("ul:first").animate({
marginTop: "-190px"
}, 500, function() {
$(this).css({ marginTop: "0px" }).find("li:first").appendTo(this);
});
}
$(document).ready(function() {
setInterval('AutoScroll("#scrollDiv")', 3000)
});
</script>
<style type="text/css">
ul, li
{
margin: 0;
padding: 0;
}
#scrollDiv
{
height: 190px;
line-height: 190px;
overflow: hidden;
}
#scrollDiv li
{
height: 190px;
}
</style>
<div id="scrollDiv" class="banner_little">
<ul>
<li>第一行</li>                                   
<li>第二行</li>
</ul>
</div>

例3
利用animate() 方法执行 CSS 属性集的自定义动画

 代码如下 复制代码

<!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>无标题文档</title>
</head>
<body>
<div style="border:5px #666 solid; width:500px; height:350px; overflow:hidden;">
<div id="box">
<div style="width:500px; height:350px; background-color:#0F0;">One</div>
<div style="width:500px; height:350px; background-color:#00F;">Two</div>
<div style="width:500px; height:350px; background-color:#696;">Three</div>
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var Top=-350;//定义一个向上移动的距离，这个数值和你图片或DIV的高度相等
var Time=500;//定义一个速度
function move(){
$("#box").animate({"margin-top":Top},Time);//animate方法，只能对数值型的值进行渐变
Top+=-350;//运行一次增加一个图片的高度
if(Top==-1050)//判断当总高度大于你DIV或者图片总高度
{
Top=0;//把距离设置回0
Time=400;//加快移动速度
}
else
{
Time=500;//否则减慢速度
}
}
setInterval(move,3000);//3秒执行一次move()
})
</script>
</body>
</html>
时间： 2024-08-02 09:29:50

jquery 文字(动态消息)向上滚动一次一行多种方法的相关文章

jquery插件之文字间歇自动向上滚动效果代码_jquery

本文实例讲述了jquery插件之文字间歇自动向上滚动效果代码.分享给大家供大家参考,具体如下: 此插件旨在实现目前较为流行的文字间歇向上滚动特效,当鼠标移动到文字上时,向上滚动会停止,当鼠标离开时,向上滚动继续.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quo

JS实现单行文字不间断向上滚动的方法_javascript技巧

本文实例讲述了JS实现单行文字不间断向上滚动的方法.分享给大家供大家参考.具体分析如下: 前几天帮一个朋友写了一个单行文字不间断向上滚动的JS效果,现在分享给需要的weber.先看HTML和CSS代码: CSS: 复制代码 代码如下: .wrap{padding:10px;border:1px #ccc solid; width:500px;margin:20px auto;} .roll-wrap{height:130px;overflow:hidden;} HTML: 复制代码 代码如下:

关于jquery中动态增加select,事件无效的快速解决方法_jquery

近来做项目,用的jquery1.6.2库,当动态增加div 及select时,事件却不起作用. 查了一些资料,发现bind事件:向匹配元素附加一个或更多事件处理器.而live事件:为当前或未来的匹配元素添加一个或多个事件处理器. 其资料如下: [bind和live的区别] live方法其实是bind方法的变种,其基本功能就同bind方法的功能是一样的,都是为一个元素绑定某个事件,但是bind方法只能给当前存在的元素绑定事件,对于事后采用JS等方式新生成的元素无效,而live方法则正好弥补了bin

jQuery为动态生成的select元素添加事件的方法_jquery

项目中需要在点击按钮时动态生成select元素,为防止每次点击按钮时从服务器端获取数据(因为数据都是相同的),可以这样写代码 1.首先定义全局js变量 var strVoucherGroupSelect =""; 2.在js中写好获取服务端数据的代码 function genVoucherGroupSelect(rowID){ return $(strVoucherGroupSelect).attr("id", "sl_" + rowID).pa

js文字无间断向上滚动程序代码

提示:您可以先修改部分代码再运行 zhudongya1 zhudongya2 zhudongya3 zhudongya4 zhudongya5 zhudongya6 zhudongya7 zhudongya1 zhudongya2 zhudongya3 zhudongya4 zhudongya5 zhudongya6 zhudongya788 提示:您可以先修改部分代码再运行

兼容ie6,ie7,firfox的文字不间断向上滚动特效代码

微软和谷歌对浏览器的垄断会导致Web的私有化吗? Subversion高级应用:SVN的多种认证方式 年度总结:2008年Java工具 要不要把IT主导权还给业务人员? IT专家网08年回顾:开发语言与开发平台共舞 下一代网络业务融合 方正科技七大优势 打造全流程专业外包 08回顾:Oracle能否继续领跑者数据库市场? Web安全性问题的层次关系分析 从融合至存储 以太网成企业网络终极答案

jquery html动态生成select标签出问题的解决方法_jquery

今天用jquery,用json从后台获取一个列表,准备在前台用一个动态生成的select标签显示出来... 结果一直不能显示,动态生成input,a 都是可以的 最后随便的在select前面敲了一堆11111111111111111111111 然后select出现了 怀疑可能跟空格有关,加了个 在select前面,没反应 之后又尝试了各种方法,还是不行 再从搜狗浏览器换成IE,FIREFOX, 没问题了 才发现是浏览器问题....浪费了3个多小时,无语了 搜狗浏览器也比较坑啊....哎 以后坚

基于JS实现新闻列表无缝向上滚动实例代码_javascript技巧

当新闻较多,并且空前有限的时候,使用滚动是一个不错的选择,本章节就通过代码实例介绍一下如何实现此效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.jb51.net/" /> <title>文字列表无缝向上滚动代码<

jQuery实现单行文字间歇向上滚动源代码

 以下是源代码:   代码如下: <script type="text/javascript" src="http://www.keleyi.com/keleyi/pmedia/jquery-1.9.1.min.js"></script>  <style type="text/css">  .scrollDiv{height:25px;/* 必要元素 */line-height:25px;border:#ccc