The examples in this article describe how jquery achieves the spotlight effect. Share to everyone for your reference. The specific analysis is as follows:
Sometimes the site needs to use jquery to implement a picture spotlight effect, when the mouse slides through a single icon in a single group, the current highlight, and other icons darken the similar picture spotlight effect. The implementation of the principle is first let the mouse touch the current picture, so that all other pictures are transparent, and then display the current prompt, when the mouse moved away to hide the current prompt, so that all the background color transparency back to normal. Here's how to use jquery to achieve a spotlight effect
<! Doctype>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title>jquery Spotlight Plugin make jquery picture special effects mouse over picture current picture highlight </title>
<meta name= "description" content= jquery Spotlight plugin to make jquery image special effects when the mouse is over the picture, the current picture highlights the rest of the picture dimming. "/>
<body>
<style type= "Text/css" >
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
Img{vertical-align:middle}
* Lamp * *
. lamp{height:366px;width:960px;position:relative;margin:0 Auto;}
. Lamp. Sublight{position:absolute;display:block;overflow:hidden;
. Lamp. pic1{top:0;left:0;width:240px;height:366px;
. Lamp. pic2{top:0;left:240px;width:480px;height:183px;
. Lamp. pic3{top:0;left:720px;width:240px;height:183px;
. Lamp. pic4{top:183px;left:240px;width:240px;height:183px;
. Lamp. pic5{top:183px;left:480px;width:240px;height:183px;
. Lamp. pic6{top:183px;left:720px;width:240px;height:183px;
</style>
<div class= "lamp" >
<a target= "_blank" href= "http://www.jb51.net/" class= "sublight pic1" ></a>
<a target= "_blank" href= "http://www.jb51.net/" class= "sublight pic2" ></a>
<a target= "_blank" href= "http://www.jb51.net/" class= "sublight pic3" ></a>
<a target= "_blank" href= "http://www.jb51.net/" class= "sublight pic4" ></a>
<a target= "_blank" href= "http://www.jb51.net/" class= "sublight pic5" ></a>
<a target= "_blank" href= "http://www.jb51.net/" class= "sublight pic6" ></a>
</div>
<script type= "Text/javascript" src= "jquery." JS "></script>
<script type= "Text/javascript" >
Highlight Effect
var blockhighlight = (function (window, $, undefined) {
var markers = [];
return function (Boxcls, ITEMCLS, Sizearr) {
var box = $ (BOXCLS);
Itemcls = Itemcls | | "A";
Box.find (ITEMCLS). Each (function (i) {
var self = $ (this);
var Arr,w,h,marker;
if (Sizearr!== undefined) {
arr = Sizearr[i].split (",");
W = arr[0];
h = arr[1];
}else{
W = Self.find ("img"). attr ("width");
h = Self.find ("img"). attr ("height");
}
Marker = $ (' <div style= ' cursor:pointer;top:0;left:0;position:absolute;width: ' +w+ ' px;height: ' +h+ ' px;filter: Alpha (opacity=0); Opacity:0;background-color: #000; " ></div> ');
Self.append (marker);
Self.mouseover (function () {
for (var i=0; i<markers.length; i++) {
Markers[i].show (). CSS ({"Opacity": ' 0.2 ', ' filter ': ' Alpha (OPACITY=20)} ');
}
Marker.hide ();
});
Markers.push (marker);
});
Box.mouseout (function () {
for (var i=0; i<markers.length; i++) {
Markers[i].css ({"opacity": ' 0 ', "filter": "Alpha (Opacity=0)"});
}
})
}
}) (this, $);
Blockhighlight (
". Lamp",//Parent element
". Sublight",//child element set
[
' 240,366 ',//The first picture of the wide height
' 480,183 ',//The second picture of the wide height
' 240,183 ',//third picture of the width of the height
' 240,183 ',//fourth picture of the wide height
' 240,183 ',//fifth picture of the wide height
' 240,183 '//Sixth picture's width and height
]
);
</script>
</body>
I hope this article will help you with your jquery programming.
