jQuery Realize the announcement text to scroll around the code .

<!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 Notice text scrolling effect -www.jbxue.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);
            }
        }
    }
} //-------------------------------------------- Scroll left and right ----------------------------------------------
/*
AppendToObj:         Display position ( Target audience )
ShowHeight:         Display height
ShowWidth:         Show width
ShowText:         display information
ScrollDirection:     Rolling direction ( value :left、right)
Steper:         The distance between each movement ( Company :px; The smaller the numerical , The smoother the roll , Recommended setting is 1px)
Interval:         The time interval between each exercise ( Company : millisecond ; The smaller the numerical , The faster you move )
*/
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}// The distance of each movement exceeds the limit ( Company :px)
    if(Interval<1){Interval = 10}// The time interval of each movement ( Company : millisecond )
    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,' Welcome to script learning !','left',1,20);// Rolling subtitles
});
</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>
 

jQuery Realize the announcement text to scroll around more related articles

  1. jQuery Realize the announcement text to scroll around the code .

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Expression Blend4 Experience sharing : Text announcement seamless cycle scrolling effect

    This time share a seamless circular scrolling effect similar to news bulletin board , I believe many projects will be applied to this effect . Before I also Baidu a bit , Some on the Internet Silverlight Text or picture scrolling effect , It's all rolled at one time , If you want to roll seamlessly , Most of them want to ...

  3. jquery How to scroll up and down the text

    jquery The way to scroll up and down . Code : // Scroll up and down var textRoll=function(){$('#notice p:last').css({'height':'0px','opacit ...

  4. jquery Text scrolls left and right

    Realization jquery Text scrolls left and right <div class="fl"> The winners :</div> <div class="scrollText" ...

  5. jquery The text scrolls up +CSS pseudo-classes before and after Application

    Summarize common skills ——CSS pseudo-classes before and after Application First on the renderings , It is suggested to follow the principle of truth with pictures , Where you can see the picture above , I hope it's not too much trouble , After all, if there is a picture It can make readers spend less time ! <!DOCTYPE html ...

  6. jquery Vertical announcement scrolling implementation code

    I think everyone has seen it , There are many ways to implement it , Here's how to use jquery Achieve vertical announcement scrolling , Don't miss... If you are interested in it Copy the code as follows : <!DOCTYPE html PUBLIC " ...

  7. jquery Achieve text up and down scrolling effect

    Scrolling up and down is often used js effect , This paper introduces a kind of text display effect that is gradually hidden up and down ! The code implementation is simple , Just import jquery Can . The code is as follows : <!DOCTYPE> <head> &l ...

  8. jQuery Achieve horizontal scrolling effect of text

    HTML Code : <div id="aaa" style="width:100px; position:relative; white-space:nowrap; o ...

  9. Taro -- The text scrolls left and right

    The text scrolls left and right Set the left shift distance of the announcement , Constantly decreasing , When the left shift distance is greater than the announcement length ( The announcement has been removed from the screen ), Recycle . <View className='scroll-wrap'> <View ...

Random recommendation

  1. NIO And buffer (Buffer)

    The buffer is java nio The core of , So you have to be familiar with some of its operations . Implementation types : nio Division Boolean is implemented in (boolean) Other than 7 There are two basic data types buffer(ByteBuffer,CharBuffer, ...

  2. app Shake function

    1. rewrite canBecomeFirstResponder , And back to YES -(BOOL)canBecomeFirstResponder{ return YES; } 2. rewrite UIResponder One of the three ...

  3. SPFA( Negative loop ) LightOJ 1074 Extended Traffic

    Subject portal The question : Toll collection . If the final charge is less than 3 Or can't reach , Output '?'. Otherwise output to n The smallest toll analysis : The key weight can be negative , If you hit a negative ring, it's , Less than 3 There are not enough constraints , So when we know that there is a negative ring , Mark all the points of this ring ...

  4. .net Read xml Document Chinese garbled problem solved

    Read XML Coding method of Encoding.UTF8 Want to be with <?xml version="1.0" encoding="utf-8"?> Of encoding ...

  5. php Business website shopping cart linkage address

    The data table is as follows : CREATE TABLE IF NOT EXISTS `china` (`region_id` smallint(5) unsigned NOT NULL,  `parent_id` s ...

  6. strange Lisp And the construction and interpretation of difficult computer programs

    Recently I bought a new one Kindle see < Hackers and painters > Of Lisp part , Find the author Paul Graham I admire Lisp Language , And I don't think any other language has Lisp concise “ mature ”, And to illustrate that other languages are going to ...

  7. SQL Server Summary of the understanding of functions in

    T-SQL Language provides us with a more flexible way to manipulate data , That's the function , Functions are generally divided into three categories : Scalar function :( Pass in a parameter , One more parameter ) Aggregate functions ( Pass in multiple parameters , Pass out a parameter ), Table-valued functions ( Pass in a result set object , Let us ...

  8. Can you solve this equation?

    Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Jav ...

  9. Android+struts2+json Way to simulate mobile phone login function

    Knowledge points involved : 1.Struts2 Construction of framework ( Include Struts2 Of jSON plug-in unit ) 2.Android Front desk visit Web use HttpClient The way . 3.Android use JSON Parsing . The main package on the server side ...

  10. python note 13 Built in functions

    1. lst = [" The white snake "," Skeleton sighs "," Zhuang Zhou's leisure trip "] it = lst.__iter__() print(it.__next__()) ...