jQuery实现公告文字左右滚动的实例代码


Posted in Javascript onOctober 29, 2013
<!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=gb2312" />
<title>jQuery公告文字左右滚动效果-3water.com</title>
<style type="text/css"> 
#scrollText {
    width: 400px;
    margin-right: auto;
    margin-left: auto;
}
</style>
</head>
<script type="text/javascript" src="/source/js/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var ScrollTime;
function ScrollAutoPlay(contID,scrolldir,showwidth,textwidth,steper){
    var PosInit,currPos;
    with($('#'+contID)){
        currPos = parseInt(css('margin-left'));
        if(scrolldir=='left'){
            if(currPos<0 && Math.abs(currPos)>textwidth){
                css('margin-left',showwidth);
            }
            else{
                css('margin-left',currPos-steper);
            }
        }
        else{
            if(currPos>showwidth){
                css('margin-left',(0-textwidth));
            }
            else{
                css('margin-left',currPos-steper);
            }
        }
    }
}
//--------------------------------------------左右滚动效果----------------------------------------------
/*
AppendToObj:        显示位置(目标对象)
ShowHeight:        显示高度
ShowWidth:        显示宽度
ShowText:        显示信息
ScrollDirection:    滚动方向(值:left、right)
Steper:        每次移动的间距(单位:px;数值越小,滚动越流畅,建议设置为1px)
Interval:        每次执行运动的时间间隔(单位:毫秒;数值越小,运动越快)
*/
function ScrollText(AppendToObj,ShowHeight,ShowWidth,ShowText,ScrollDirection,Steper,Interval){
    var TextWidth,PosInit,PosSteper;
    with(AppendToObj){
        html('');
        css('overflow','hidden');
        css('height',ShowHeight+'px');
        css('line-height',ShowHeight+'px');
        css('width',ShowWidth);
    }
    if (ScrollDirection=='left'){
        PosInit = ShowWidth;
        PosSteper = Steper;
    }
    else{
        PosSteper = 0 - Steper;
    }
    if(Steper<1 || Steper>ShowWidth){Steper = 1}//每次移动间距超出限制(单位:px)
    if(Interval<1){Interval = 10}//每次移动的时间间隔(单位:毫秒)
    var Container = $('<div></div>');
    var ContainerID = 'ContainerTemp';
    var i = 0;
    while($('#'+ContainerID).length>0){
        ContainerID = ContainerID + '_' + i;
        i++;
    }
    with(Container){
      attr('id',ContainerID);
      css('float','left');
      css('cursor','default');
      appendTo(AppendToObj);
      html(ShowText);
      TextWidth = width();
      if(isNaN(PosInit)){PosInit = 0 - TextWidth;}
      css('margin-left',PosInit);
      mouseover(function(){
          clearInterval(ScrollTime);
      });
      mouseout(function(){
          ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);
      });
    }
    ScrollTime = setInterval("ScrollAutoPlay('"+ContainerID+"','"+ScrollDirection+"',"+ShowWidth+','+TextWidth+","+PosSteper+")",Interval);
}
</script>
<script type="text/javascript"> 
$(document).ready(function(e) {
    ScrollText($('#scrollText'),23,400,'欢迎光临三水点靠木!','left',1,20);//滚动字幕
});
</script>
<body>
<div id="scrollText"></div>
<script type="text/javascript"> 
if(document.getElementById('GoogleAD')!=null){
    document.getElementById('GoogleAD').innerHTML = '<div class="SearchEngine_AD1">' + document.getElementById('GoogleADCode').innerHTML + '</div>';
}
</script>
</body>
</html>
       
Javascript 相关文章推荐
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
function foo的原型与prototype属性解惑
Nov 19 Javascript
从零开始学习jQuery (三) 管理jQuery包装集
Feb 23 Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
Bootstrap组件系列之福利篇几款好用的组件(推荐)
Jun 23 Javascript
AngularJS折叠菜单实现方法示例
May 18 Javascript
JS实现的加减乘除四则运算计算器示例
Aug 09 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
微信小程序页面间传值与页面取值操作实例分析
Apr 30 Javascript
一文看懂如何简单实现节流函数和防抖函数
Sep 05 Javascript
vue接口请求加密实例
Aug 11 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 #Javascript
JavaScript代码简单实现求杨辉三角给定行的最大值
Oct 29 #Javascript
Js操作Select大全(取值、设置选中等等)
Oct 29 #Javascript
java与javascript之间json格式数据互转介绍
Oct 29 #Javascript
javascript在myeclipse中报错的解决方法
Oct 29 #Javascript
web css实现整站样式互相切换
Oct 29 #Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 #Javascript
You might like
深入PHP nl2br()格式化输出的详解
2013/06/05 PHP
修改apache配置文件去除thinkphp url中的index.php
2014/01/17 PHP
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php模拟post提交数据的方法
2015/02/12 PHP
PHP中创建和验证哈希的简单方法实探
2015/07/06 PHP
php将服务端的文件读出来显示在web页面实例
2016/10/31 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
jQuery中live()方法用法实例
2015/01/19 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
2016/05/04 Javascript
JavaScript组合模式学习要点
2016/08/26 Javascript
React Native使用百度Echarts显示图表的示例代码
2017/11/07 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
2019/10/12 Javascript
python二分法实现实例
2013/11/21 Python
详解Python中的循环语句的用法
2015/04/09 Python
python实现中文分词FMM算法实例
2015/07/10 Python
解析Python中while true的使用
2015/10/13 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
一个基于flask的web应用诞生 记录用户账户登录状态(6)
2017/04/11 Python
python如何重载模块实例解析
2018/01/25 Python
python矩阵/字典实现最短路径算法
2019/01/17 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
Python在Matplotlib图中显示中文字体的操作方法
2019/07/29 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
在DELPHI中调用存储过程和使用内嵌SQL哪种方式更好
2016/11/22 面试题
生物技术专业研究生自荐信
2013/09/22 职场文书
毕业实习证明(4篇)
2014/10/28 职场文书
2014年便民服务中心工作总结
2014/12/20 职场文书
英语复习计划
2015/01/19 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
三八妇女节寄语
2015/02/27 职场文书