Jquery web page WeChat QR code graphic block rolling effect implementation

You may have seen the scrolling effect of the QR code block on the webpage. In the following article, we will introduce in detail how Jquery is used, if you are interested, refer to the custom script method Property Code:

/** Create a floating image advertisement (Generate a dock AD image) ** USAGE: * $ (selector ). higo_plugins_ad ({* src: null, // ad image path * closeSrc: null, // close the image path * href: "#", // ad image link address * autoHide: true, // whether to automatically hide * hideSecond: 10, // delay hidden seconds * top: 20, // offset height from top * layout: "left ", // default image position: left (left), right (right), center (center), * width: 100, // width * height: 100, // height * opacity: 0.5 // transparency opacity: 0.5 (firefox), filter: alpha (opacity = 50) (IE) * setPosition: function (left, top) {// Method for reserving custom display locations (not implemented yet) * return ;*}*})*/

The second is detailed effect implementation:

(Function ($) {$. fn. ad = function (options) {var lastScrollY = 0; var czd = $ (this); var settings = $. extend ({src: null, closeSrc: null, href: "#", autoHide: true, hideSecond: 10, position: "top", top: 20, bottom: 20, layout: "left", width: 100, height: 100, opacity: 0.5, setPosition: function (left, top) {return ;}, options || {}); if (settings. src & settings. closeSrc) {var imgEl ="
"; Var closeImgEl =" "; $ (this ). append (imgEl + closeImgEl); expires (this).css ("position", "absolute"); if (settings. position = 'top') {comment (this(.css ("top", settings. top + "px");} else {detail (this).css ("bottom", settings. bottom + "px");} finally (this%.css ("opacity", settings. opacity); condition (this).css ("filter", "alpha (opacity =" + parseInt (settings. opacity * 100) + ")"); switch (settings. layout) {case "left": Condition (this).css ("left", "-100px"); break; case "right": Condition (this).css ("right", "-100px "); break; case "center": var left = (parseInt (window. screen. availWidth)-parseInt (settings. width)/2 + "px"; expires (this).css ("left", left); break; default: expires (this).css ("left", "-100px"); break ;}} else {return;} if (settings. autoHide) {setTimeout ("(function () {$ ('" + $ (this ). selector + "'). hide () ;}) (); ", parseInt (settings. hideSecond) * 1000;} // different event drivers are caused by different aliases: scroll and onscroll $ (window ). bind ("scroll", function () {var diffY; if (document.doc umentElement & document.doc umentElement. scrollTop) diffY = document.doc umentElement. scrollTop; else if (document. body) diffY = document. body. scrollTop else {/* Netscape stuff */} percent = 1 * (diffY-lastScrollY); if (percent> 0) percent = Math. ceil (percent); else percent = Math. floor (percent); if (settings. position = 'top') {var top = czd.css ("top"); czd.css ("top", parseInt (top) + percent + "px "); lastScrollY + = percent;} else {var top = czd.css ("bottom"); czd.css ("bottom", parseInt (top)-percent + "px "); lastScrollY + = percent ;}}) ;}) (jQuery );

Finally, compile the page:

1. Import your own JQuery file and configure the head