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

复制代码 代码如下:

<!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公告文字左右滚动效果-www.jb51.net</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);
            }
        }
    }
}

       

时间: 2024-09-13 08:22:39

jQuery实现公告文字左右滚动的实例代码_jquery的相关文章

jQuery实现下拉加载功能实例代码_jquery

废话不多说了,直接给大家贴代码了,具体代码如下所示: <script> var str = ''; if(page=="") page=1; var stop=true;//触发开关,防止多次调用事件 $(window).scroll( function(event){ //当内容滚动到底部时加载新的内容 100当距离最底部100个像素时开始加载. if ($(this).scrollTop() + $(window).height() + 10 >= $(docum

基于jQuery实现美观且实用的倒计时实例代码_jquery

倒计时效果有着广泛的应用,比如奥运会倒计时.高考倒计时和放假倒计时等,本章节分享一个比较美观且实用的倒计时效果. 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>倒计时效果代

BootStrap的table表头固定tbody滚动的实例代码_jquery

关于bootstrap table其他知识不多说,直接给大家贴代码了. 关键代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css

jquery动态创建div与input的实例代码_jquery

无意中发现的,做为收藏,以备后绪查看时用. 实例如下: <html> <head> <title>jjquery动态创建div与input</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <script> <!--动态创建div--> $(function (){ $(&

jquery判断类型是不是number类型的实例代码_jquery

判断获取的数据是不是number类型 var val=$("#id).val(); If(typeof val=="number"){ 是数字类型 }else{ 不是数字类型 } 以上就是小编为大家带来的jquery判断类型是不是number类型的实例代码全部内容了,希望大家多多支持~ 以上是小编为您精心准备的的内容,在的博客.问答.公众号.人物.课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索jquery number类型 js判断number类型.判断numb

jquery实现文字由下到上循环滚动的实例代码_jquery

有如下代码: 复制代码 代码如下: <div id="oDiv"><ul id="oUl"><li>第1个li元素</li><li>第2个li元素</li><li>第3个li元素</li><li>第4个li元素</li><li>第5个li元素</li><li>第6个li元素</li><li>

jquery实现多行文字图片滚动效果示例代码_jquery

今儿分享一个jquery实现多行滚动效果. 我看一些论坛网站上面,公告处用的较多. 代码如下 // 多行滚动 (function($){ $.fn.extend({ Scroll:function(opt,callback){ if(!opt) var opt={}; var _this=this.eq(0).find("ul:first"); var lineH=_this.find("li:first").height(), line=opt.line?pars

基于jQuery实现点击弹出层实例代码_jquery

jquery实现点击链接弹出层效果:本例实现的主要原理:jquery操作DOM元素.对层样式的设置.将display:设置为none;让层隐藏: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.jb51.net" /> <tit

jquery实现弹出窗口效果的实例代码_jquery

JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域,并在开始时将其隐藏,只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来. 其大致步骤为: •创建一个装载弹出窗口的div 复制代码 代码如下: <html>  <head>    <title>jQuery实例1:浮动窗口</title>    <meta http-equiv="Content-Type" content="te