site map is a focus of the show form of web content can be simply understood as a picture or more exhibition now focus on the page is the site map. Obvious position on the site , combined with a picture in the form of play , similar to the focus of news meant just added a picture. More commonly used on the site or channel Home Forum Home Forum , because it is through the form of pictures , so there is a certain attraction , visual attractiveness . Easily lead the visitor clicks , according to foreign design agency survey, focus map site hits significantly higher than plain text, text captions conversion rate at five times . From this point on the map allows visitors to greatly enhance the enterprise 's first impression , here we give you about a project in a beautiful package uses atmospheric fullscreen focus map . As shown below : 
can add multiple pictures, set the image links , navigation with the mouse to switch pictures, publish articles in the time to put a little picture compression distortion .
use this effect for jquery first need to introduce the use of plug-ins has been packaged into jquery function code is as follows :
/*
* jQuery图片轮播(焦点图)插件
*/
(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(2000).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);
focus map the css style ;
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; border:none/*For 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; }
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; }
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 layout :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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>
</head>
<body>
<div class="slideBox" >
<ul class="items">
<li><a href="#" title="这里是测试标题一"><img src="/image/1.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题2"><img src="/image/2.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题3"><img src="/image/3.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题4"><img src="/image/4.png" width="1000" height="300"></a></li>
<li><a href="#" title="这里是测试标题5"><img src="/image/5.png" width="1000" height="300"></a></li>
</ul>
</div>
</body>
</html>
just with js in the page calling the $ ( selector ). slideBox (); effect as above can be achieved , but we can also sliebox ({}) inside the specified action , such as starting picture and direction .
This is used in the project some time ago a picture carousel plug-in can feel can be directly used .
没有评论:
发表评论