Problems with Jquery and filters...

　　

Jquery is a good thing. There are many praises on the Internet: elegance, conciseness, and many others.

 

I am working on a software project today. If you want the artist to move the cursor to the menu image for a brighter result, the artist cannot meet the requirements. So I tried to write it myself.

That's it. Look at the figure, so I want to write it with jquery.

This code can be run in asp.net.

 

$ ("Td [class = 'td ']"). mouseover (function (){
Certificate (this).css ("backgroundPosition", "0px-86px ");
// Var objarr = $ (this). children (0 );
// Objarr [0]. style. color = "yellow ";
$ (This). children (0) [0]. style. color = "yellow ";
// Configure ((this(.children(0)).css ("color", "yellow ");
// Outputs ((((%(this%.children(0%%%%.get(1%%%%.css ("color", "yellow ");
$ (This). attr ("id", "jqueryfilter ");
Certificate (this).css ("filter", "progid: DXImageTransform. Microsoft. Light ()");
Document. all. jqueryfilter. filters [0]. addAmbient (255,255,255, 60 );
Document. all. jqueryfilter. filters [0]. addPoint (24,150,150 );
});

 

This is all the code.

 

The analysis is as follows:

Certificate (this).css ("backgroundPosition", "0px-86px ");

--- Modify the position of the background image of td. The background image is png.

Below I want to modify the td color and filter. So we thought of the element set childer and filters.

1. first look for the childer set

$ (This). children (0); that's the sentence.

That's strange. Normally, you can write js and object. children. In addition, the set array is written as [0] for access.

Jquery is written as (0 ).

In this way, the children of the object is accessed. The following three sentences show one effect, but they are written differently.

$ (This). children (0) [0]. style. color = "yellow ";
// Configure ((this(.children(0)).css ("color", "yellow ");
// Outputs ((((%(this%.children(0%%%%.get(1%%%%.css ("color", "yellow ");

2. Start filter below

The filters set was suddenly found to be inaccessible using the above method. Depressed. Wait until you have time to read jquery. js carefully.

You cannot use the following method.

$ (This). attr ("id", "jqueryfilter ");

Certificate (this).css ("filter", "progid: DXImageTransform. Microsoft. Light ()");
Document. all. jqueryfilter. filters [0]. addAmbient (255,255,255, 60 );
Document. all. jqueryfilter. filters [0]. addPoint (24,150,150 );

　　　　　　

A temporary id attribute. Add a css Filter. Use js to access the filters set of the temporary id object. Modify the illumination.

Light: first place a layer of uniform light with the background color, and then add a light source effect.

 

3. jquery code for moving the cursor out of td

$ ("Td [class = 'td ']"). mouseout (function (){
Certificate (this).css ("backgroundPosition", "0 0px ");
$ (This). children (0) [0]. style. color = "white ";
Document. all. jqueryfilter. filters [0]. clear ();
Filters (this).css ("filter ","");
$ (This). removeAttr ("id ");
});

 

4. It seems that jquery has a major problem in supporting js collection objects. I hope you will disagree.