JQuery achieves the effect of simulating the marquee tag, jquerymarquee

JQuery achieves the effect of simulating the marquee tag, jquerymarquee

Marquee

Simulate the marquee effect under IE and move the mouse to pause. The main principle of Ring Formation is that once an external display window is determined for each image, it is added to the end. append and prepend are used to simulate the push () and shift () arrays ().

The Code is as follows:

HTML

<! Doctype html> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <meta content =" "name =" keywords "/> <meta content =" "name =" description "/> <meta name =" author "content = "codetker"/> 
CSS
@ Charset "UTF-8";/* CSS Document */body {margin: 0 0; padding: 0 0; height: 100%; width: 100% ;}. wrap {font-family: "", "", 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: pixel PX ;}. marquee ul li {float: left; width: 500px; text-align: center ;}. marquee ul li {}. marquee ul li a: hover {color: red ;}
JavaScript
/** BoxScroll 0.1 * compatible with common browsers such as IE8, FF, and Chrome */; (function ($, window, document, undefined) {// define the constructor var BoxObj = function (ele, opt) {this. $ element = ele; // The outermost layer object this. ults = {'style': 0, // select a scroll style. The default effect is 'speed': 1, // The default value is 1 s 'direction ': 'left' // scroll to the left by default}, this. options = $. extend ({}, this. defaults, opt); // here you can add some common methods} // Add the method BoxObj to the constructor. prototype = {commonScroll: function () {// property of the receiving object 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 ('lil'); 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, which is 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); // put the last item at the beginning, equivalent to pop (last), unshift ()} else {$ (obj ). scrollLeft (step) ;}} else {// value other than not executed} else {// reserved for extension, switch changed} timer = setInterval (function () {move (style, speed, direction) ;}, 10 * speed); // you cannot see $ (lists) because the time is low ). each (function () {// move the mouse up to pause $ (this ). hover (function () {clearInterval (timer) ;}, function () {clearInterval (timer); timer = setInterval (function () {move (style, speed, direction) ;}, 10 * speed) ;}) ;}}}$. fn. marquee = function (options) {// create an object var boxObj = new BoxObj (this, options); // call the object method return boxObj in the form of a tail call. commonScroll () ;}}) (jQuery, window, document );
For more information, see https://github.com/codetker/myMarquee.
The above is all the content of this article. I hope you will like it.