标签:style blog http color io os 使用 java ar
我本想安静的做一个美男子,可是,老板不涨工资,反而,一月不如一月。
<div class="mbSlider"> <ul> <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;"> <a href="http://www.pushself.com"></a> </li> <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;"> <a href="http://www.pushself.com"></a> </li> <li style="background: url(http://www.pushself.com/noImage.jpg) 50% 50% no-repeat;"> <a href="http://www.pushself.com"></a> </li> </ul> </div>
.mbSlider ul { position: relative; z-index: 0; height: 120px; overflow: hidden; } .mbSlider ul li { position: absolute; top: 0; left: 0; z-index: 0; visibility: hidden; } .mbSlider ul li, .mbSlider ul a { display: block; width: 100%; height: 100%; } .mbSlider ul li:nth-child(1) { visibility: visible; }
(function(i) { var windowWidth = $(window).width(), windowHeight = $(window).height(), name = option.name, AutoMain = function() { this.mbSlider = function() { var mbSliderThis = this, directionArr = ["left","right"]; liLength = $("." + name + " ul li").length, duration = i.duration in directionArr?i.duration:"left", initVal = i.initVal && i.initVal<liLength?parseInt(i.initVal):0, mbSliderHeight = $("." + name + " ul").height(), mbSliderHeight = mbSliderHeight > 120 && mbSliderHeight < windowHeight / 3?mbSliderHeight:120; $("." + name + " ul").height(mbSliderHeight);//banner不能过大 if(liLength < 2) { return; }else if(liLength == 2) {//便于切换流畅 $("." + name + " ul").append($("." + name + " ul").html()); liLength = $("." + name + " ul li").length; } var direction = i.direction, t; mbSliderThis.run = function(direction){ Action.apply(this,{ 0: direction, 1: initVal, 2: liLength, "length" : 3 }) initVal = initVal == liLength - 1?0:++initVal; t = setTimeout(function() { mbSliderThis.run(direction); },3000); } $("." + name + " ul li").css({ "-webkit-transition-duration":i.duration + "s" }); mbSliderThis.run(direction); $("." + name + " ul li").swipeLeft(function() { var direction = "right"; clearInterval(t); mbSliderThis.run(direction); }); $("." + name + " ul li").swipeRight(function() { var direction = "left"; clearInterval(t); mbSliderThis.run(direction); }); }; }, Action = function(direction,initVal,liLength) { var liLength = liLength; if(direction == "right") { var currLiNum = initVal, prevLiNum = currLiNum == 0?liLength - 1:currLiNum - 1, nextLiNum = currLiNum == liLength - 1?0:currLiNum + 1; directionVal = 1; }else { var currLiNum = initVal == 0?0:-initVal, prevLiNum = currLiNum == 0?-liLength + 1:currLiNum + 1, nextLiNum = currLiNum == -liLength + 1?0:currLiNum - 1; directionVal = -1; } var prevLiWidth = -windowWidth * directionVal, currLiWidth = 0, nextLiWidth = windowWidth * directionVal; $("." + name + " ul li").eq(prevLiNum).css({ "-webkit-transform":"translate3d(" + prevLiWidth + "px, 0, 0)", "visibility":"hidden" }); $("." + name + " ul li").eq(currLiNum).css({ "visibility":"visible", "-webkit-transform":"translate3d(" + currLiWidth + "px, 0, 0)" }); $("." + name + " ul li").eq(nextLiNum).css({ "-webkit-transform":"translate3d(" + nextLiWidth + "px, 0, 0)", "visibility":"hidden" }); }, autoMain = new AutoMain().mbSlider(); })(option)
var option = {"name":"mbSlider","direction":"right","duration":".8","initVal":0};
一个简单的特效引发的大战之移动开发中我为什么放弃jquery mobile
标签:style blog http color io os 使用 java ar
原文地址:http://www.cnblogs.com/unofficial/p/3975924.html