Site Focus map is a form of Web site content, can be simply understood as a picture or more than a photo exhibition now on the Web site is the focus of the map. In the site is very obvious location, in the form of a combination of pictures, similar to the focus of news is only added to the image. Generally used in the home page layout or channel home page layout, because it is through the form of pictures, so there is a certain degree of attraction, visual attraction. Easy to arouse the visitor's clicks, according to the Foreign Design Organization Survey statistics, the website Focus chart's Click rate is obviously higher than the pure text, the conversion ratio is higher than the text title 5 times times. It seems that the focus of the map can make the first impression of the enterprise greatly improved, below to give you a package of our project to use the beautiful atmosphere of the full screen focus map. As shown in the following illustration:
Can add more than one picture, set the picture link, navigation with the mouse mobile switch picture, in the release of the article when the picture compressed a bit distorted.
The use of this effect first requires the introduction of the use of jquery, plug-ins have been encapsulated into a jquery function, the code is as follows:
Copy Code code as follows:
/*
* jquery Image Carousel (Focus map) Plugin
*/
(function ($) {
$.fn.slidebox = function (options) {
var defaults = {
Direction: ' Left ',
duration:0.6,
Easing: ' Swing ',
Delay:3,
startindex:0,
Hideclickbar:true,
Clickbarradius:5,
Hidebottombar:false
};
var settings = $.extend (defaults, Options | | {});
var wrapper = $ (this),
UL = Wrapper.children (' Ul.items '),
Lis = Ul.find (' li '),
Firstpic = Lis.first (). FIND (' img ');
var li_num = Lis.size (),
Li_height = 0,
li_width = 0;
var order_by = ' ASC ';
var init = function () {
if (!wrapper.size ()) return false;
Li_height = Lis.first (). height ();
Li_width = Lis.first (). width ();
Wrapper.css ({
Width:li_width + ' px ',
Height:li_height + ' px '
});
Lis.css ({
Width:li_width + ' px ',
Height:li_height + ' px '
});
if (settings.direction = = ' Left ') {
Ul.css (' width ', li_num * li_width + ' px ')
} else {
Ul.css (' height ', li_num * li_height + ' px ')
};
Ul.find (' Li:eq (' + settings.startindex + ') '). addclass (' active ');
if (!settings.hidebottombar) {
var tips = $ (' <div class= ' tips ></div> '). CSS (' opacity ', 0.6). Appendto (wrapper);
var title = $ (' <div class= ' title ' ></div> '). HTML (function () {
var active = ul.find (' li.active '). Find (' a '),
Text = active.attr (' title '),
href = active.attr (' href ');
return $ (' <a> '). attr (' href ', href). Text (text)
). Appendto (tips);
var nums = $ (' <div class= ' nums ' ></div> '). Hide (). Appendto (tips);
Lis.each (function (i, n) {
var a = $ (n). Find (' a '),
Text = a.attr (' title '),
href = a.attr (' href '),
CSS = ';
i = = = = Settings.startindex && (CSS = ' active ');
$ (' <a> '). attr (' href ', href). Text (text). addclass (CSS). css (' Borderradius ',
Settings.clickbarradius + ' px '). MouseOver (function () {
$ (this). addclass (' active '). Siblings (). Removeclass (' active ');
Ul.find (' Li:eq (' + $ (This). Index () + ') '. addclass (' active '). Siblings
(). Removeclass (' active ');
Start ();
Stop ()
}). Appendto (Nums)
});
if (Settings.hideclickbar) {
Tips.hover (function () {
Nums.animate ({
Top: ' 0px '
},
' Fast ')
},
function () {
Nums.animate ({
Top:tips.height () + ' px '
},
' Fast ')
});
Nums.show (). Delay. Animate ({
Top:tips.height () + ' px '
},
' Fast ')
} else {
Nums.show ()
}
};
Lis.size () > 1 && start ()
};
var start = function () {
var active = ul.find (' li.active '),
Active_a = Active.find (' a ');
var index = Active.index ();
if (settings.direction = = ' Left ') {
offset = Index * li_width *-1;
param = {
' Left ': offset + ' px '
}
} else {
offset = Index * li_height *-1;
param = {
' Top ': Offset + ' px '
}
};
Wrapper.find ('. Nums '). Find (' A:eq (' + index + ') '). addclass (' active '). Siblings (). Removeclass
(' active ');
Wrapper.find ('. Title '). Find (' a '). attr (' href ', active_a.attr (' href '). Text (active_a.attr
(' title '));
Ul.stop (). Animate (param, settings.duration * 1000, settings.easing,
function () {
Active.removeclass (' active ');
if (order_by = = ' ASC ') {
if (Active.next (). Size ()) {
Active.next (). addclass (' active ')
} else {
order_by = ' DESC ';
Active.prev (). addclass (' active ')
}
else if (order_by = = ' DESC ') {
if (Active.prev (). Size ()) {
Active.prev (). addclass (' active ')
} else {
order_by = ' ASC ';
Active.next (). addclass (' active ')
}
}
});
Wrapper.data (' Timeid ', window.settimeout (Start, Settings.delay * 1000))
};
var stop = function () {
Window.cleartimeout (Wrapper.data (' Timeid '))
};
Wrapper.hover (function () {
Stop ()
},
function () {
Start ()
});
var imgloader = new Image ();
Imgloader.onload = function () {
Imgloader.onload = null;
Init ()
};
IMGLOADER.SRC = firstpic.attr (' src ')
}
}) (JQuery);
The following is the CSS style of the picture focus diagram;
Copy Code code as follows:
div.slidebox{position:relative;height:300px; overflow:hidden; margin:0 Auto;}
Div.slidebox ul.items{position:absolute; float:left; background:none; list-style:none; padding:0px; margin:0px;
Div.slidebox ul.items li{float:left; background:none; list-style:none; padding:0px; margin:0px;}
Div.slidebox ul.items Li a{float:left; line-height:normal!important; padding:0px!important; Border:none/*For IE. ADD. jena.201206300844*/;}
Div.slidebox Ul.items li a img{margin:0px!important; padding:0px!important; Display:block IE. ADD. jena.201206300844*/;}
Div.slidebox div.tips{position:absolute; bottom:0px; width:100%; height:50px; Background-color: #000; overflow:hidden ;}
Div.slidebox div.tips div.title{position:absolute; left:0px; top:0px; height:100%;}
Div.slidebox div.tips div.title a{color: #FFF; font-size:18px; line-height:50px; margin-left:10px; Text-decoration: none;}
Div.slidebox div.tips div.title a:hover{text-decoration:underline!important;
Div.slidebox div.tips div.nums{position:absolute; right:0px; top:0px; height:100%;}
Div.slidebox div.tips div.nums a{display:inline-block, >float:left/*for IE. ADD. jena.201206300844*/; width:20px; height:20px; Background-color: #FFF; text-indent:-99999px; margin:15px 10px 0px 0px;}
Div.slidebox div.tips div.nums a.active{background-color: #093;}
Page configuration:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<script src= "Scripts/jquery-1.4.1.min.js" type= "Text/javascript" ></script>
<script src= "Scripts/sliderbox.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ (function () {
$ (". Slidebox"). Slidebox ();
})
</script>
<body>
<div class= "Slidebox" >
<ul class= "Items" >
<li><a href= "#" title= "Here is the test title one" ></a>< /li>
<li><a href= "#" title= "Here is the test Title 2" ></a>< /li>
<li><a href= "#" title= "Here is the test Title 3" ></a>< /li>
<li><a href= "#" title= "Here is the test Title 4" ></a>< /li>
<li><a href= "#" title= "Here is the test title 5" ></a>< /li>
</ul>
</div>
</body>
Simply introduce JS and call $ (selector) in the page. Slidebox (), you can achieve the effect, and we can also in Sliebox ({}) to specify the operation, such as the starting picture, direction and so on.
This is in a previous period of time a project used in the picture of the Carousel plug-in, feel can also be used directly.
