当前位置:  编程技术>WEB前端

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

    来源: 互联网  发布时间:2014-08-25

    本文导语:  代码如下: 看看间断滚动文字 央视315曝光: 华润深陷“海砂门”回应澄而未清 吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒 无锡警方公布“待产女警突发不幸”事发经过 中国人一天:最后的轮渡 视界:在家“搞定” ...

代码如下:


看看间断滚动文字





  • 央视315曝光: 华润深陷“海砂门”回应澄而未清

  • 吉野家被曝餐具不消毒 波司登等羊绒衫不含羊绒

  • 无锡警方公布“待产女警突发不幸”事发经过

  • 中国人一天:最后的轮渡 视界:在家“搞定”








代码如下:

.infolist{width:400px;matgin:0;}
.infolist ul{margin:0;padding:0;}
.infolist ul li{list-style:none;height:26px;line-height:26px;}
.infocontent{width:400px;height:26px;overflow:hidden;border:1px solid #666666;}

代码如下:

var interval=1000;//两次滚动之间的时间间隔
var stepsize=26;//滚动一次的长度,必须是行高的倍数,这样滚动的时候才不会断行
var objInterval=null;

$(document).ready( function(){
//用上部的内容填充下部
$("#bottom").html($("#top").html());

//给显示的区域绑定鼠标事件
$("#content").bind("mouseover",function(){StopScroll();});
$("#content").bind("mouseout",function(){StartScroll();});

//启动定时器
StartScroll();
});

//启动定时器,开始滚动
function StartScroll(){
objInterval=setInterval("verticalloop()",interval);
}

//清除定时器,停止滚动
function StopScroll(){
window.clearInterval(objInterval);
}

//控制滚动
function verticalloop(){
//判断是否上部内容全部移出显示区域
//如果是,从新开始;否则,继续向上移动
if($("#content").scrollTop()>=$("#top").outerHeight()){
$("#content").scrollTop($("#content").scrollTop()-$("#top").outerHeight());
}
//使用jquery创建滚动时的动画效果
$("#content").animate(
{"scrollTop" : $("#content").scrollTop()+stepsize +"px"},600,function(){
//这里用于显示滚动区域的scrollTop,实际应用中请删除
// $("#foot").html("scrollTop:"+$("#content").scrollTop());
});
}

    
 
 

您可能感兴趣的文章:

  • jQuery定时器插件 jQuery Timers应用示例
  • jquery打开dialog的简单示例
  • jQuery animate方法定位页面具体位置(示例)
  • jQuery设置input type值示例
  • jquery弹窗代码示例
  • jquery的父子兄弟节点查找示例代码
  • jquery获取第几个元素方法示例 jquery选择器
  • jquery遍历checkbox简单示例
  • jquery动态添加option示例
  • Jquery定时器的简单示例
  • JQuery获取上传文件大小(示例)
  • Jquery在指定DIV加载HTML示例代码
  • jQuery获得内容和属性示例代码
  • jQuery的each终止或跳过示例代码
  • jQuery获得内容和属性方法及示例
  • jquery根据name属性查找示例
  • jQuery find与children方法示例
  • jQuery回车键绑定点击事件示例
  • jQuery 滚动示例插件 kinetic
  • jQuery设置CSS属性(示例)
  • jQuery滚动效果插件 jQuery.SerialScroll
  • jQuery照明效果插件 jQuery Photon
  • jQuery实现CSS3动画效果的插件 jQuery Transit
  • jQuery盖章效果插件 jquery.stamper
  • jQuery卷页效果 jQuery Page Peel
  • jquery打开dialog的简单示例 iis7站长之家
  • jQuery的效果集工具包 Glimmer
  • jQuery Lightbox效果插件 Boxer
  • jQuery滚动延迟效果插件 AnimateScroll
  • jQuery电梯式滚动效果插件 Ascensor
  • jQuery 页面动画效果 Animsition
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • jquery 文字上下滚动的小例子
  • jQuery 文字特效 Arctext
  • 自动文字补齐jQuery插件 Typeahead.js
  • jquery等宽输出文字插件的实例代码
  • jquery统计输入文字的个数
  • jquery 文字上下滚动效果的代码
  • jquery 获取文字宽度与显示长度的例子
  • jquery 文字浮动提示效果(示例)
  • jquery设置div半透明背景色与文字不透明
  • jQuery(js)获取文字宽度(显示长度)示例代码
  • jquery统计输入文字的个数并对其进行判断
  • jquery文字淡入淡出效果代码
  • jquery input输入框获得与失去焦点时显示、隐藏文字的小例子
  • Jquery 鼠标点击文字变文本框的实现代码
  • jquery下拉菜单 jquery文字导航效果
  • jquery文字闪动效果实例
  • jquery文字向上跑动类似跑马灯效果实例
  • 基于jquery实现的文字向上跑动类似跑马灯的效果
  • jquery xMarquee实现文字水平无缝滚动效果
  • Jquery文字逐行向上滚动的实现代码
  • 通过javascript库JQuery实现页面跳转功能代码
  • jQuery鼠标动画插件 jquery-ahover
  • jQuery概述,代码举例及最新版下载
  • jQuery向导插件 Jquery Wizard Plugin
  • Jquery操作html复选框checkbox:全选,全不选和反选
  • jQuery圆角插件 jQuery Corners
  • struts+spring+hibernate+jquery实现分页功能的几个基本类介绍(异步加载)
  • jQuery相册插件 jQuery.popeye
  • jQuery UI组件 jQuery UI
  • jQuery右键菜单插件 jQuery ContextMenu
  • jQuery分页插件 Pagination jQuery Plugin


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3