fzkdhotel/obj/Release/Package/PackageTmp/js/myfocus/自定义风格/kendoui/demo.html

这里只显示每个文件的开头 60 行。登录后可以解锁完整代码。

微信扫码关注公众号，代码整理好后第一时间通知你。

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>myFocus v2.0</title>
<script type="text/javascript" src="http://myfocus-js.googlecode.com/svn/trunk/myfocus-2.0.0.min.js"></script>
<style type="text/css">
body { background:#fff; padding:20px; }
#myFocus{width:600px;height:300px; border:1px solid #666; position:relative;background:#F37E19;background:-webkit-linear-gradient(#DC5216,#F37E19);background:-moz-linear-gradient(#DC5216,#F37E19);background:-o-linear-gradient(#DC5216,#F37E19);}
#myFocus a{ text-decoration:none; color:#333;}
#myFocus .pic{ position:absolute; top:20px;right:20px; width:200px; height:200px; overflow:visible;}
#myFocus .pic li{ width:100%; height:100%; position:absolute;left:260px;}
#myFocus .txt1{ position:absolute; top:20px; left:20px; }
#myFocus .txt1 a{font-size:24px; color:#fff; text-shadow:0 1px 0 rgba(0, 0, 0, 0.4);}
#myFocus .txt2{ position:absolute; top:96px; left:20px;}
#myFocus .txt2 a{color:#fff;}
#myFocus .txt3{ position:absolute; top:180px; left:20px;}
#myFocus .txt1 li,#myFocus .txt2 li{ position:absolute; left:600px; width:336px;}
#myFocus .txt3 li{ position:absolute;top:0;left:0; display:none;}
#myFocus .txt3 li a{ display:block; background:#333; color:#fff; border-radius:3px;}
#myFocus .dot{position:absolute; z-index:3;bottom:8px;left:0;width:100%;text-align:center;}
#myFocus .dot li{ display:inline-block;margin:0 3px;*display:inline;*zoom:1; width:16px;height:6px; background:#ccc; cursor:pointer;}
#myFocus .dot li.current{background:#000;}
</style>
<script type="text/javascript">
//扩充myFocus风格
myFocus.pattern.extend({
	'mF_sd_kendoui':function(settings,$){
		var $focus=$(settings),
			$picList=$focus.find('.pic li'),
			$txtList1=$focus.find('.txt1 li'),
		    $txtList2=$focus.find('.txt2 li'),
			$txtList3=$focus.find('.txt3 li'),
			$dotList=$focus.addList('dot').find('li');
		//PLAY
		var param={isRunning:false};
		$focus.play(null,function(i,n,l){
			param.isRunning=true;
			$txtList1.eq(l).slide({left:-settings.width},800,'easeInBack',function(){
				$txtList1.eq(i).css({left:settings.width}).slide({left:0},500).fadeIn();
			}).fadeOut(800,'easeInBack');
			fx(i,l);//延迟执行部分
			$txtList3.eq(l).fadeOut();
		});
		function fx(i,l){
			setTimeout(function(){
				if(i!==l) $picList.eq(l).slide({left:-settings.width},600,'easeIn').fadeOut(800,'easeInBack');
				$txtList2.eq(l).slide({left:-settings.width},500,'easeInBack',function(){
					$txtList2.eq(i).css({left:settings.width}).slide({left:0},400).fadeIn();
					$picList.eq(i).css({left:settings.width}).slide({left:0},500,function(){
						$txtList3.eq(i).fadeIn();
						$dotList[l].className='';
						$dotList[i].className='current';
						param.isRunning=false;
					}).fadeIn();
				}).fadeOut(800,'easeInBack');
			},400);
		}
		//Control
		$focus.bindControl($dotList,param);