[英]JFlip jQuery plugin - not loading images
我想在某些图像上创建书籍样式的页面转向效果,因此我决定使用JQuery插件JFlip。 该插件似乎正在执行它应该做的事情,除了显示图像。 我已经检查了“网络”选项卡,并且正在加载图像。 另外,我可以看到JFlip创建的Canvas元素,但这只是一个空白。
我有一些代码:
<ul id="g1">
<li>
<img src="img/proforma.jpg">
</li>
<li>
<img src="img/proforma2.jpg">
</li>
</ul>
和一些JavaScript:
<script src="http://code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
<script type="text/javascript">
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
</script>
原来该脚本太旧了(2008),您需要包括jQuery迁移脚本。
剧本
<script src="http://code.jquery.com/jquery.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.jFlip.js"></script>
的HTML
<ul id="g1">
<li>
<img src="http://placehold.it/300x300"/>
</li>
<li>
<img src="http://placehold.it/300x300" />
</li>
</ul>
还要确保将执行代码包装在document.ready中,以便图像可以进行渲染。
JS
<script>
$(document).ready(function() {
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>
它确实有效,只是插件有些旧。 请参阅下面的代码:
HTML:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="http://twitter.github.io/bootstrap/assets/css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
<script src="http://twitter.github.io/bootstrap/assets/js/bootstrap.js"></script>
<!--[if IE]><script type="text/javascript" src="http://www.jquery.info/scripts/jFlip/excanvasX.js"></script><![endif]-->
<script src="http://www.jquery.info/scripts/jFlip/jquery.jflip-0.3.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.1.0.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<ul id="g1">
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
<li>
<img src="http://keith-wood.name/img/calendar.gif">
</li>
</ul>
</body>
</html>
JS:
$("#g1").jFlip(700,230,{background:"green",cornersTop:false});
在此处查看完整的解决方案: http : //jsbin.com/iqaran/1/edit 。 记住要在jsbin中run with js
干杯!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.