Javascript JFlip jQuery插件-不加载图像_Javascript_Jquery_Html

Javascript JFlip jQuery插件-不加载图像

javascript jquery html

Javascript JFlip jQuery插件-不加载图像,javascript,jquery,html,Javascript,Jquery,Html,我想在一些图像上创建一个书籍风格的翻页效果，所以我决定使用JQuery插件JFlip。除了显示图像，插件似乎正在做它应该做的事情。我已经检查了“网络”选项卡，正在加载图像。此外，我可以看到已经创建了Canvas元素JFlip，但它只是一个空白我有一些代码： <ul id="g1"> <li> <img src="img/proforma.jpg"> </li> <li> <img

我想在一些图像上创建一个书籍风格的翻页效果，所以我决定使用JQuery插件JFlip。除了显示图像，插件似乎正在做它应该做的事情。我已经检查了“网络”选项卡，正在加载图像。此外，我可以看到已经创建了Canvas元素JFlip，但它只是一个空白

我有一些代码：

<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>


$（“#g1”）.jFlip（700230，{背景：“绿色”，cornersTop:false}）；

事实证明，这个脚本太旧了（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>

还要确保将正在执行的代码包装在一个文件夹中，以便图像得到要渲染的更改

<script>
$(document).ready(function() {
    $("#g1").jFlip(700,230,{background:"green",cornersTop:false});
});
</script>


$（文档）.ready（函数（）{
$（“#g1”）.jFlip（700230，{背景：“绿色”，cornersTop:false}）；
});

它确实有效，只是插件有点旧。请参见下面的我的代码：

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-Bin

JS:

<!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>

jFlip（700230，{背景：“绿色”，cornersTop:false}）

请参阅此处的完整解决方案：。记住在jsbin中使用js运行


干杯
 已经试过了，但似乎不起作用。图像仍然是隐藏的，不会显示在页面上，因此我假设插件正在执行其工作，只是没有呈现图像。更新答案，您还需要将插件执行包装在DOM就绪的包装器上。如果这不起作用，那一定是你的图片有问题，因为两个答案都起作用了。谢谢你，先生！！很好。当然，很乐意帮忙。我在另一个问题中有一个图像问题，你也应该检查一下。在这里发布链接。我会看看我能做些什么。