html
<!--<div class="Hiketang clearfix">-->
<!--<div class="Hiketang1 FL">-->
<!--<ul>-->
<!--<h2>普通大班课</h2>-->
<!--<li><h3><span></span>注意力不集中</h3>-->
<!--<p>老师顾不上孩子，上课老走神</p></li>-->
<!--<li><h3><span></span>没针对性</h3>-->
<!--<p>讲的都会，不会的老师都不讲</p></li>-->
<!--<li><h3><span></span>补习路程远</h3>-->
<!--<p>补习路上往返3小时浪费时间</p></li>-->
<!--</ul>-->
<!--</div>-->
<!--<span class="Vs" style="float: left;">VS</span>-->
<!--<div class="Hiketang1 FR">-->
<!--<ul>-->
<!--<h2>1对1 昂立嗨课堂</h2>-->
<!--<li><h3 class="color_red"><span></span>随时互动效果</h3>-->
<!--<p>每分钟老师真人互动</p></li>-->
<!--<li><h3 class="color_red"><span></span>课程专属定制效果</h3>-->
<!--<p>针对性补习薄弱科目</p></li>-->
<!--<li><h3 class="color_red"><span></span>在家上课效果翻倍</h3>-->
<!--<p>在家辅导，省下时间及时复习</p></li>-->
<!--</ul>-->
<!--</div>-->
<!--</div>-->
css
//#J_getED {
// text-align: center;
// display: inline-block;
// margin: 0 auto;
// li {
// border-radius: 4px;
// position: relative;
// overflow: hidden;
// font-size: 14px;
// margin: 0 10px;
// width: 343px;
// height: 223px;
// padding-top: 20px;
// -webkit-transition: all 0.5s ease ;
// -moz-transition: all 0.5s ease;
// -ms-transition: all 0.5s ease;
// -o-transition: all 0.5s ease;
// transition: all 0.5s ease;
// &:hover{
// -webkit-transform: translateY(-2px);
// -moz-transform: translateY(-2px);
// -ms-transform: translateY(-2px);
// -o-transform: translateY(-2px);
// transform: translateY(-2px);
// //box-shadow: -2px 2px 10px 2px rgba(245, 245, 245, 1);
// &.FL1{
// box-shadow: 0px 3px 5px #FB8E6B;
// }
//
// &.FL2{
// box-shadow: 0px 3px 5px #F3D56B;
// }
//
// &.FL3{
// box-shadow: 0px 3px 5px #75C6D9;
// }
// }
// .span_icon {
// margin-top: 15px;
// display: inline-block;
// border-radius: 48px;
// }
// p {
// line-height: 25px;
// color: #FFF;
// margin-top: 20px;
// }
// .J_Sliders {
// color: #333;
// text-align: center;
// position: absolute;
// left: -999px;
// top: -999px;
// width: 100%;
// height: 100%;
// background-color: rgba(245, 245, 245, 1);
// .J_Sliders1{
// //display: inline-block;
// position: absolute;
// top:50%;
// left:50%;
// -webkit-transform: translate(-50%,-50%);
// -moz-transform: translate(-50%,-50%);
// -ms-transform: translate(-50%,-50%);
// -o-transform: translate(-50%,-50%);
// transform: translate(-50%,-50%);
// }
// }
// }
////}
js
function Kissy() {
KISSY.add('ged', function (S) {
var D = S.DOM, E = S.Event;
function GED(cfg) {
this.eles = S.all(cfg.eles);
this.ss = cfg.slider;
this.init();
}
GED.prototype = {
_getData: function (node) {
var pos = D.offset(node);
var size = {};
size.w = D.innerWidth(node);
size.h = D.innerHeight(node);
var point = {};
point.lt = {x: pos.left, y: pos.top};
point.rt = {x: pos.left + size.w, y: pos.top};
point.lb = {x: pos.left, y: pos.top + size.h};
point.rb = {x: pos.left + size.w, y: pos.top + size.h};
var center = {x: pos.left + size.w / 2, y: pos.top + size.h / 2};
var corner = {}, deg = 180 / Math.PI;
corner.clt = Math.atan2(center.y - point.lt.y, point.lt.x - center.x) * deg;
corner.crt = Math.atan2(center.y - point.rt.y, point.rt.x - center.x) * deg;
corner.clb = Math.atan2(center.y - point.lb.y, point.lb.x - center.x) * deg;
corner.crb = Math.atan2(center.y - point.rb.y, point.rb.x - center.x) * deg;
return {pos: pos, size: size, point: point, center: center, corner: corner};
},
_getDir: function (e, data) {
var dir = "l";
var enterPoint = {x: e.clientX + D.scrollLeft(window), y: e.clientY + D.scrollTop(window)};
var cen = Math.atan2(data.center.y - enterPoint.y, enterPoint.x - data.center.x) * 180 / Math.PI;
if (cen >= data.corner.crb && cen < data.corner.crt) {
dir = "r";
} else if (cen >= data.corner.crt && cen < data.corner.clt) {
dir = "t";
} else if (cen >= data.corner.clb && cen < data.corner.crb) {
dir = "b";
}
return dir;
},
_render: function (node) {
var _this = this;
var data = _this._getData(node);
var ss = D.get(_this.ss, node);
E.on(node, 'mouseenter', function (e) {
var dir = _this._getDir(e, data);
var left = -data.size.w, top = 0;
switch (dir) {
case "l":
// D.html(ss, "左方进入");
break;
case "t":
// D.html(ss, "上方进入");
left = 0;
top = -data.size.h;
break;
case "r":
// D.html(ss, "右方进入");
left = data.size.w;
top = 0;
break;
case "b":
// D.html(ss, "下方进入");
left = 0;
top = data.size.h;
break;
default:
}
D.css(ss, {"left": left, "top": top});
if (node.anim && node.anim.isRunning()) {
node.anim.stop();
}
node.anim = new S.Anim(ss, {"left": 0, "top": 0}, 0.2, "easeIn", function () {
});
node.anim.run();
});
E.on(node, 'mouseleave', function (e) {
var dir = _this._getDir(e, data);
var left = -data.size.w, top = 0;
switch (dir) {
case "l":
break;
case "t":
left = 0;
top = -data.size.h;
break;
case "r":
left = data.size.w;
top = 0;
break;
case "b":
left = 0;
top = data.size.h;
break;
default:
}
if (node.anim && node.anim.isRunning()) {
node.anim.stop();
}
node.anim = new S.Anim(ss, {"left": left, "top": top}, 0.2, "easeIn", function () {
});
node.anim.run();
});
},
init: function () {
var _this = this;
S.each(_this.eles, function (n) {
_this._render(n);
});
}
};
S.GED = GED;
});
}
//调用
// Kissy();// KISSY.ready(function (S) {// S.use('ged', function (S) {// var ged = new S.GED({// eles: "#J_getED li",// slider: ".J_Sliders"// });// });// });
