jquery implements analog marquee label effect

jquery implements analog marquee label effect _jquery

Last Update:2017-01-19 Source: Internet

Author: User

Tags setinterval

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Marquee

Imitate IE below the marquee effect, the mouse moves up pauses. The main principle of forming a ring is that each picture once determines the outer display window to be added to the tail, using append and prepend to simulate the push () and shift () of the array.

The code is as follows:

Html

<!doctype html>

Css

@charset "Utf-8";
/* CSS Document */
body{
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%
}
. wrap{
  font-family: "Microsoft Ya Black", "Song Body", Times, "Times New Roman", serif;
  font-size:14px;
  margin:0 0;
  padding:0 0;
  height:100%;
  width:100%;
  Overflow:hidden
}
. marquee{
  margin:0 Auto;
  width:960px;
  height:300px;
  Overflow:hidden
}
. Marquee ul{
  width:10000px;
Marquee ul li{
  Float:left;
  width:500px;
  Text-align:center
}
. Marquee ul Li a{

}
. Marquee ul Li a:hover{
  color:red;

Javascript

* * Boxscroll 0.1 * Compatible ie8,ff,chrome and other common browsers/;(function ($,window,document,undefined) {//define constructor var Boxobj=func tion (ele,opt) {this. $element =ele;//Outermost object this.defaults={' style ': 0,//scrolling style selection, default to normal effect ' speed ': 1
     ,//default is 1s ' direction ': ' Left '//default is to scroll to the left-hand side}, This.options=$.extend ({},this.defaults,opt); Here you can add some common methods}//To add a method to the constructor boxobj.prototype={Commonscroll:function () {//Receive object property var obj=
       this. $element;
       var boxwindow=$ (this. $element). Children (' ul ');
       var speed=this.defaults.speed;
       var Style=this.defaults.style; var direction= (this.defaults.direction== ' left ')?
       1:-1;
       var lists=$ (Boxwindow). Children (' Li ');
       var len=$ (lists). length;
       var boxwidth=$ (Lists[0]). width ();
       var timer; var step= (this.defaults.direction== ' left ')?

       0:boxwidth;
       function Move (style,speed,direction) {if (style==0) {if (direction==1) {      Step+=1;
               if (step>boxwidth) {step-=boxwidth; $ (Boxwindow). Append ($ (Boxwindow). Children (). EQ (0));//Put the first item at the end, equivalent to push (0), Shift ()}else{$ (obj)
             . ScrollLeft (step);
             }}else if (direction==-1) {step-=1;
               if (step<0) {step+=boxwidth;
               $ (Boxwindow). Prepend ($ (Boxwindow). Children (). EQ (len-1));//The last item is the first, equivalent to pop (end), Unshift ()}else{
             $ (obj). ScrollLeft (step); }}else{//is left to expand,}else{//switch}} timer=setinterval
       (function () {move (style,speed,direction); },10*speed); Due to the small time, the naked eye can not see the $ (lists). each (function () {//Mouse pause $ (this). Hover (function () {Clearinterval (Tim
        ER);
          }, Function () {clearinterval (timer); Timer=setinterval (function () {Move (Style,speed,direction);
        },10*speed);
      });
     });
     } $.fn.marquee=function (Options) {//Create entity var boxobj=new boxobj (this,options);
   Call the object method in the form of a tail tone return boxobj.commonscroll ();

 }) (jquery,window,document);

Detailed download See Https://github.com/codetker/myMarquee

The above mentioned is the entire content of this article, I hope you can enjoy.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More