<div class="img6"> <p class="solu" style="background:#2b5656 ">智能客服</p> <div class="bg" style="left: 14.5px; top: 303px; opacity: 1;"> <p class="tit">智能客服</p> <p class="con">可导入独家行业知识库，快速实现智能客服服务。</p> </div> </div>
JS： 解决的思路：计算出数据移动的轨迹，然后得到一个最小的值，就知道他去哪个方向了。
比如第一个：
$('.scenariosCon .bg').each(function () {
var h = ( $(this).parent().height() - $(this).height() ) / 2;
var w = ( $(this).parent().width() - $(this).width() ) / 2;
$(this).css({'left': w, 'top': h});
})
$('.scenariosCon>div').mouseenter(function (ev) {
var l = ev.pageX - $(this).offset().left;
var r = $(this).offset().left + $(this).width() - ev.pageX;
var b = $(this).offset().top + $(this).height() - ev.pageY;
var t = ev.pageY - $(this).offset().top;
var m = Math.min(l, r, b, t);
switch (m) {
case l:
$(this).find('.bg').css({opacity:0,left: -$(this).find('.bg').width() ,top:( $(this).height() - $(this).find('.bg').height() ) / 2}).animate({opacity:1,left:( $(this).width() - $(this).find('.bg').width() ) / 2,top:( $(this).height() - $(this).find('.bg').height() ) / 2},300);
break;
case r:
$(this).find('.bg').css({opacity:0,left: $(this).width() ,top:( $(this).height() - $(this).find('.bg').height() ) / 2}).animate({opacity:1,left:( $(this).width() - $(this).find('.bg').width() ) / 2,top:( $(this).height() - $(this).find('.bg').height() ) / 2},300);
break;
case b:
$(this).find('.bg').css({opacity:0,left:( $(this).width() - $(this).find('.bg').width() ) / 2,top: $(this).height()}).animate({opacity:1,left:( $(this).width() - $(this).find('.bg').width() ) / 2,top:( $(this).height() - $(this).find('.bg').height() ) / 2},300);
break;
case t:
$(this).find('.bg').css({opacity:0,left:( $(this).width() - $(this).find('.bg').width() ) / 2,top: - $(this).find('.bg').height() / 2}).animate({opacity:1,left:( $(this).width() - $(this).find('.bg').width() ) / 2,top:( $(this).height() - $(this).find('.bg').height() ) / 2},300);
break;
}
})
$('.scenariosCon>div').mouseleave(function (ev) {
var l = ev.pageX - $(this).offset().left;
var r = $(this).offset().left + $(this).width() - ev.pageX;
var b = $(this).offset().top + $(this).height() - ev.pageY;
var t = ev.pageY - $(this).offset().top;
var m = Math.min(l, r, b, t);
switch (m) {
case l:
$(this).find('.bg').animate({'left': -$(this).width() },300);
break;
case r:
$(this).find('.bg').animate({'left': $(this).width() },300);
break;
case b:
$(this).find('.bg').animate({'top': $(this).height() },300);
break;
case t:
$(this).find('.bg').animate({'top': -$(this).height() },300);
break;
}
})
$('.scenariosCon .img6').click(function(){
window.location = '/products/pro_intel_service.jhtml?nav=prod';
})
$('.scenariosCon .img7').click(function(){
window.location = '/products/pro_virtual_robot.jhtml?nav=prod';
})
$('.scenariosCon .img8').click(function(){
window.location = '/products/pro_smart_watch.jhtml?nav=prod';
})
$('.scenariosCon .img9').click(function(){
window.location = '/products/pro_intel_vehicle.jhtml?nav=prod';
})
$('.scenariosCon .img10').click(function(){
window.location = '/products/pro_smart_home.jhtml?nav=prod';
})css代码
.scenarios{height: 588px;background:#f9f9f9;padding-top:56px; }
.scenariosTit{width: 127px; height: 30px; margin: 0 auto 20px;background: url("../img/trIntroduce/Pages_title02.png") center no-repeat;}
.scenariosCon{width: 1000px;height: 439px;margin: 0 auto;position: relative; }
.scenariosCon div{position: absolute;top: 0; width: 200px;height: 439px;overflow: hidden;-webkit-transform-style: preserve-3d ;transform-style: preserve-3d ;-webkit-perspective:200px;perspective:200px;}
.scenariosCon div .solu{width:70px; height: 16px; line-height: 16px; text-align: center;color: #fff;position: absolute;font-size: 14px;-moz-transition: 0.3s;-webkit-transition: 0.3s;transition: 0.3s;padding: 6px;top: 20px;}
.scenariosCon .img1{background: url("../img/trIntroduce/t1.png") center no-repeat;left: 0;width: 245px; height: 303px;}
.scenariosCon .img2{background: url("../img/trIntroduce/t2.png") center no-repeat;left: 255px;width: 490px; height: 303px;}
.scenariosCon .img3{background: url("../img/trIntroduce/t3.png") center no-repeat;left: 755px;width: 245px; height: 303px;}
.scenariosCon .img4{background: url("../img/trIntroduce/t4.png") center no-repeat;left: 0px;top: 313px; width: 495px; height: 176px;}
.scenariosCon .img5{background: url("../img/trIntroduce/t5.png") center no-repeat;left: 505px;top: 313px;width: 495px;height: 176px;}
.scenariosCon .img6{background: url("../img/trIntroduce/t6.png") center no-repeat;left: 0;width: 245px; height: 303px;}
.scenariosCon .img7{background: url("../img/trIntroduce/t7.png") center no-repeat;left: 255px;width: 490px; height: 303px;}
.scenariosCon .img8{background: url("../img/trIntroduce/t8.png") center no-repeat;left: 755px;width: 245px; height: 303px;}
.scenariosCon .img9{background: url("../img/trIntroduce/t9.png") center no-repeat;left: 0px;top: 313px; width: 495px; height: 176px;}
.scenariosCon .img10{background: url("../img/trIntroduce/t10.png") center no-repeat;left: 505px;top: 313px;width: 495px;height: 176px;}
.scenariosCon div .bg{width:88%;height: 76%;background: rgba(0,0,0,0.6);border: rgba(255,255,255,0.5) solid 1px;position: absolute; opacity: 0;}
.scenariosCon div .tit{height: 80px; line-height: 80px;text-align: center;color: #fff;font-size: 24px; opacity: 1;}
.scenariosCon div .con{line-height: 24px;text-align: center;color: #fff;font-size: 14px; padding: 0 24px; opacity: 1;}
.scenariosCon div:hover .solu{opacity: 0;}