图片分割左右/上下分离效果
居于jquery的图片水平或者垂直分割后，设置左右或者上下分离效果。
图片分割左右/上下分离效果源代码如下
<!doctype html>
<title>图片分割左右/上下分离效果</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.1.min.js"></script>
<style>
.slider{width:670px;height:560px;overflow:hidden;position:relative;background-repeat:no-repeat}
</style>
<div class="slider">
<img src="/demo/1.jpg" alt="50音图" />
<img src="/demo/2.jpg" alt="router"/>
</div>
<script>
(function ($) {//注意效果图中的图片长宽要统一，并且配置width，height为图片的长宽一致，要不效果不佳，因为是通过背景来实现的
//*cfg配置
//width:容器款，默认670px
//height：容器高度，默认：560
//splitVertical：图片分割位置，默认false（默认水平）
//moveVertical：分离移动方向，默认false（默认水平）
//delay：自动播放间隔，默认6s
$.fn.splitslider = function (cfg) {
cfg = $.extend({ width: 670, height: 560, delay: 6 }, cfg);
return this.each(function () {
var me = $(this), imgs = me.find('img'), l = imgs.length, dvHalf = $('<div style="position:absolute"></div>')
, dvHalf1 = $('<div style="position:absolute"></div>'), timer, now = 0, dist = 0
, halfAttr = cfg.moveVertical ? 'top' : 'left', half1Attr = cfg.moveVertical ? 'bottom' : 'right'
, oHalfAttr = {}, oHalf1Attr = {};
oHalfAttr[halfAttr] = 0; oHalf1Attr[half1Attr] = 0;
imgs.hide();
/*cfg.splitVertical && cfg.moveVertical ? -cfg.height : !cfg.splitVertical && !cfg.moveVertical ? -cfg.width :
-cfg[cfg.splitVertical ? (cfg.moveVertical ? '' : 'height') : (cfg.moveVertical ? 'width' : '')] / 2*/
if (cfg.splitVertical) {
dvHalf.add(dvHalf1).css({ width: '50%', height: '100%' });
dvHalf1.css({ 'background-position': '-' + (cfg.width / 2) + 'px 0' });
if (cfg.moveVertical) dist = -cfg.height;
else dist = -cfg.width/2;
}
else {
dvHalf.add(dvHalf1).css({ width: '100%', height: '50%' });
dvHalf1.css({ 'background-position': '0 -' + (cfg.height / 2) + 'px' });
if (cfg.moveVertical) dist = -cfg.height / 2;
else dist = -cfg.width;
}
dvHalf.css({ top: 0, left: 0 });
dvHalf1.css({ bottom: 0, right: 0 });
me.css({ width: cfg.width, height: cfg.height }).add(dvHalf).add(dvHalf1).css('background-image', 'url(' + imgs.eq(0).attr('src') + ')');
me.append(dvHalf).append(dvHalf1);
function Moveing() {
now++;
if (now >= l) now = 0;
me.css('background-image', 'url(' + imgs.eq(now).attr('src') + ')');
oHalfAttr[halfAttr] = oHalf1Attr[half1Attr] = dist;
dvHalf.animate(oHalfAttr);
dvHalf1.animate(oHalf1Attr, function () {
setTimeout(function () {//1s后重置div的位置
oHalfAttr[halfAttr] = oHalf1Attr[half1Attr] = 0;
dvHalf.add(dvHalf1).css('background-image', 'url(' + imgs.eq(now).attr('src') + ')');
dvHalf.css(oHalfAttr); dvHalf1.css(oHalf1Attr);
}, 1000);
startTimer(true);
});
}
function startTimer(start) { start ? timer = setTimeout(Moveing, cfg.delay * 1000) : clearTimeout(timer); }
if (imgs.length > 1) {
startTimer(true);
me.mouseenter(function () { startTimer(); }).mouseleave(function () { startTimer(true); });
}
});
}
})(jQuery);
$('div.slider').splitslider({ splitVertical: false,moveVertical:false, delay: 3 });
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：图片分割左右/上下分离效果