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 相关文章推荐
js 函数的执行环境和作用域链的深入解析
Nov 01 Javascript
浏览器脚本兼容 文本框中,回车键触发事件的兼容
Jun 21 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
jquery多选项卡效果实例代码(附效果图)
Mar 23 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
Oct 10 Javascript
jQuery事件绑定与解除绑定实现方法
Apr 15 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
Oct 27 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
jQuery在header中设置请求信息的方法
Mar 06 Javascript
Centos6.8下Node.js安装教程
May 12 Javascript
js中自定义react数据验证组件实例详解
Oct 19 Javascript
微信小程序一周时间表功能实现
Oct 17 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中TP5 上传文件的实例详解
2017/07/31 PHP
php工具型代码之印章抠图
2018/07/18 PHP
Google Suggest ;-) 基于js的动态下拉菜单
2006/10/11 Javascript
js电信网通双线自动选择技巧
2008/11/18 Javascript
ajax处理php返回json数据的实例代码
2013/01/24 Javascript
JS实现根据当前文字选择返回被选中的文字
2014/05/21 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
jquery获取css的color值返回RGB的方法
2015/12/18 Javascript
原生js编写autoComplete插件
2016/04/13 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
js实现交通灯效果
2017/01/13 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
JS监听滚动和id自动定位滚动
2018/12/18 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
浅谈vue中resetFields()使用注意事项
2020/08/12 Javascript
解决vue项目 build之后资源文件找不到的问题
2020/09/12 Javascript
用Python的urllib库提交WEB表单
2009/02/24 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python3序列化与反序列化用法实例
2015/05/26 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
对python 树状嵌套结构的实现思路详解
2019/08/09 Python
在pycharm中实现删除bookmark
2020/02/14 Python
CSS3实现超酷的黑猫警长首页
2016/04/26 HTML / CSS
春秋航空官方网站:Spring Airlines
2017/09/27 全球购物
c++工程师面试问题
2013/08/04 面试题
文秘应届生求职信
2014/07/05 职场文书
2015年社区计生工作总结
2015/04/21 职场文书
开展警示教育活动总结
2015/05/09 职场文书
田径运动会通讯稿
2015/07/18 职场文书
2015国庆节放假通知范文
2015/07/30 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
Html5大屏数据可视化开发的实现
2021/06/11 HTML / CSS
分享7个 Python 实战项目练习
2022/03/03 Python