<html>
<title>index</title>
<head>
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<meta content="text/html;charset=utf-8" http-equiv="content-type"/>
<link rel="stylesheet" href="resources/css/flexslider.css" type="text/css" media="screen" />
<link href="resources/css/jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css" />
<script src="resources/js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="resources/js/jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="resources/js/jquery.flexslider.js"></script>
<link rel="stylesheet" href="resources/css/demo.css" type="text/css" media="screen" />
<style>
*{padding: 0;margin: 0}
.left{ float: left;width: 50%;position: relative; }
.right{ float: right; width: 50%;position: relative;}
.left img{position: absolute; width: 100%;height: 100%}
.right img{position: absolute;width: 100%;height: 100%}
.parent{background: #000000;padding: 0px!important;}
</style>
</head>
<body>
<div id="container" data-content="header">
<div class="flexslider">
<ul class="slides">
<li>
<img src="resources/images/inacup_donut.jpg" />
<p class="flex-caption">Captions and cupcakes. Winning combination.</p>
</li>
<li>
<a href="http://flex.madebymufffin.com"><img src="resources/images/inacup_pumpkin.jpg" /></a>
<p class="flex-caption">This image is wrapped in a link!</p>
</li>
<li>
<img src="resources/images/inacup_donut.jpg" />
</li>
<li>
<img src="resources/images/inacup_vanilla.jpg" />
</li>
</ul>
</div>
</div>
<div class="parent">
</div>
<script type="text/javascript">
var allwidth = $(window).width();
var current_img;
$(window).load(function() {
current_img = allwidth/2;
$('.flexslider').flexslider();
for (var i=0; i < 6; i++) {
if(i%2===0){
$('.parent').append('<div class="left" style="height:'+current_img+'px"></div>');
$('.parent').append('<div class="right" style="height:'+current_img/2+'px"></div>');
}else{
$('.parent').append('<div class="right" style="height:'+current_img+'px"></div>');
$('.parent').append('<div class="left" style="height:'+current_img/2+'px"></div>');
}
};
$('.left').each(function(index) {
$(this).append('<img id="hihi" src="resources/images/fullscreen.JPG" />');
});
$('.right').each(function(index) {
$(this).append('<img id="hihi" src="resources/images/fullscreen.JPG" />');
});
});
$(window).resize(function() {
$('.left').each(function(index) {
current_img = $(this).width();
var current_background = $(this).css("background-color");
if(index%2==0){
$(this).css("height",current_img);
}else{
$(this).css("height",current_img/2);
}
$(this).css("background",current_background);
});
$('.right').each(function(index) {
var current = $(this).width();
current_background = $(this).css("background-color");
if(index%2==0){
$(this).css("height",current_img/2);
$(this).css("background",current_background);
}else{
$(this).css("height",current_img);
$(this).css("background",current_background);
}
});
});
$('#hihi').click(function(){
console.log(current_img);
$(this).animate({
height:current_img*0.75,width:current_img*0.75,
left:$(this).width()/8,
top:$(this).height()/8
},1000);
});
</script>
</body>
</html>
点击执行动画没有效果？请问是什么原因