This article mainly introduces the special effect code of QQ customer service with animation displayed from the top drop-down of JS, which can bring up the QQ customer service window with elastic buffering effect, which has some reference value, for more information, see the examples in this article to show the special effect code of QQ customer service with animations displayed from the top drop-down of JavaScript. We will share this with you for your reference. The details are as follows:
This is an animated version of QQ online customer service code. The QQ Customer Service Code pulled from the top of the webpage has an elastic buffer effect after the decline. Under the world map, it seems that the taste has suddenly increased. The animation effect is implemented by jq. You can modify some information about QQ customer service and change it to your own QQ. You can upload it to the webpage. Note: The test results in Firefox chrome browser will be better.
The running effect is as follows:
The Online Demo address is as follows:
Http://demo.jb51.net/js/2015/js-top-show-down-dh-qq-online-codes/
The Code is as follows:
Jquery online customer serviceScript function startMove (obj, json, fnEnd) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; for (var attr in json) {var now = 0; if (attr = "opacity") {now = Math. round (parseFloat (getStyle (obj, attr) * 100);} else {now = parseInt (getStyle (obj, attr ));} var speed = (json [attr]-now)/10; speed = speed> 0? Math. ceil (speed): Math. floor (speed); if (now! = Json [attr]) bStop = false; if (attr = "opacity") {obj. style. filter = "alpha (opacity:" + (now + speed) + ")"; obj. style. opacity = (now + speed)/100;} else {obj. style [attr] = (now + speed) + "px" ;}} if (bStop) {clearInterval (obj. timer); if (fnEnd) fnEnd () ;}, 30)} function startFlex (obj, json, fnEnd) {clearInterval (obj. timer); obj. timer = setInterval (function () {var bStop = true; var cur = 0; for (var attr in json) {if (! Obj. oSpeed) obj. oSpeed = {}; if (! Obj. oSpeed [attr]) obj. oSpeed [attr] = 0; cur = parseInt (getStyle (obj, attr); if (Math. abs (json [attr]-cur)> 1 | Math. abs (obj. oSpeed [attr])> 1) {bStop = false; obj. oSpeed [attr] + = (json [attr]-cur)/5; obj. oSpeed [attr] * = 0.7; var maxSpeed = 65; if (Math. abs (obj. oSpeed [attr])> maxSpeed) {obj. oSpeed [attr] = obj. oSpeed [attr]> 0? MaxSpeed:-maxSpeed;} obj. style [attr] = cur + obj. oSpeed [attr] + "px" ;}} if (bStop) {clearInterval (obj. timer); if (fnEnd) fnEnd () ;}, 30);} function getStyle (obj, name) {if (obj. currentStyle) {return obj. currentStyle [name];} else {return getComputedStyle (obj, false) [name];} window. onload = function () {var oCs = document. getElementById ('cs '); var oBtn = document. getElementById ('btn '). getElementsByTagName ('span ') [0]; var oImg = document. getElementById ('bg '); var oLi = document. getElementById ('qqlist '). getElementsByTagName ('lil'); var on = 0; for (var I = 0; I
= OLi. length) {clearInterval (timer) ;}, 20) ;}obtn. onclick = function () {if (on = 0) {startFlex (oCs, {height: 500}, function () {showImg (); oBtn. innerHTML = "CLOSE" ;}); on = 1 ;}else {showQQ (-200); timer2 = setInterval (function () {startMove (oImg, {opacity: 0 }, function () {oImg. style. display = "none"; startMove (oCs, {height: 0}) ;}) if (oCs. style. height = 0 + "px") {clearInterval (timer2); oBtn. innerHTML = "contact us"; }}, 500); on = 0 ;}} script
- Presales consultation
- Presales consultation
- Presales consultation
- Presales consultation
- Presales consultation
- Presales consultation
Contact us
I hope this article will help you design JavaScript programs.