How to use JavaScript and jQuery to make light stick effect

In this article, the editor introduces in detail "how to use JavaScript and jQuery to make light rod effect". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use JavaScript and jQuery to make light stick effect" can help you solve your doubts.

Use javaScript to make light stick effect

First of all, javaScript.

$(function () {var lis = document.getElementsByTagName ("li"); / / defines the DOM variable to accept the element for labeled li (var I = 0; I < lis.length;i++) {lis.onMouseover = function () {/ / mode-1 / / this.style.backGround = "pink" / / 1, note that the this method can only be used as the current traversal item of the for loop / / this.style.fontSize = "50px"; / / 2, the appended style after style can only be named by camel nomenclature / / method 2 this.style.cssText = "background-color:red;font-size:50px";} Lis.onmouseout = function () {/ / Mode 1 / / this.style.background = ""; / / this.style.fontSize = "20px"; / / Mode 2 this.style.cssText = "background-color:;font-size:20px";})

Compared with the two methods, .cssText is relatively simple.

Use jQuery to make light stick effect

$(function () {("li") .hover (function () {/ / the compound event is called here to simulate the mouse hover event $(this) .css ({"background-color": "red", "font-size": "50px"}) }, function () {$(this) .css ({"background-color": "", "font-size": "20px"}); / / directly append CSS style});}) Read this, this article "how to use JavaScript and jQuery to make light stick effect" article has been introduced, want to master the knowledge of this article still need to practice and use to understand, if you want to know more related articles, welcome to follow the industry information channel.