用于翻转图像的Html/CSS/Javascript函数不起作用
我必须在我的项目中翻转一个图像,我使用了一个与css结合的函数来实现它。当它被翻转时,当再次翻转到原始div时,它会显示另一个div en。当然,当我单击时,什么也不会发生。所以还是有点不对劲,但不知道是什么 Javascript:用于翻转图像的Html/CSS/Javascript函数不起作用,javascript,html,css,image,flip,Javascript,Html,Css,Image,Flip,我必须在我的项目中翻转一个图像,我使用了一个与css结合的函数来实现它。当它被翻转时,当再次翻转到原始div时,它会显示另一个div en。当然,当我单击时,什么也不会发生。所以还是有点不对劲,但不知道是什么 Javascript: <script type="text/javascript"> $(document).ready(function () { /* The following code is executed once the DOM is loade
<script type="text/javascript">
$(document).ready(function () {
/* The following code is executed once the DOM is loaded */
$('.sponsorFlip').bind("click", function () {
// $(this) point to the clicked .sponsorFlip element (caching it in elem for speed):
var elem = $(this);
// data('flipped') is a flag we set when we flip the element:
if (elem.data('flipped')) {
// If the element has already been flipped, use the revertFlip method
// defined by the plug-in to revert to the default state automatically:
elem.revertFlip();
// Unsetting the flag:
elem.data('flipped', false);
}
else {
// Using the flip method defined by the plugin:
elem.flip({
direction: 'lr',
speed: 350,
onBefore: function () {
// Insert the contents of the .sponsorData div (hidden from view with display:none)
// into the clicked .sponsorFlip div before the flipping animation starts:
elem.html(elem.siblings('.sponsorData').html());
}
});
// Setting the flag:
elem.data('flipped', true);
}
});
});
我已经包括了jquery插件:
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
问候我想您已经添加了Jquery,还可以添加
以前
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
在右边,它提到这个插件依赖于Jquery和jQueryUI
希望它能起作用。你在使用flip插件吗?你可以创建一个JSFIDLE。这应该会有帮助,但仍然不起作用。还有其他想法吗?我在我的计算机上尝试了你的代码,添加了js包。js包的顺序:先是jquery,然后是jquery ui,最后是flip。我已经在chrome、ie9和firefox上进行了测试。注意IE,脚本可能被禁止。
<script type="text/javascript" src="js/jquery.flip.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.flip.min.js"></script>