Javascript 向图像更改添加动画
我刚刚在opencart中实现了一个扩展,它允许我点击一个缩略图来更改主图像,唯一的问题是,只是更改了一个根本没有动画或过渡效果的图像,我想让它这样图像滑入,是否有任何方法可以添加到我已经拥有的代码中,以便我可以这样做 以下是mod的代码:Javascript 向图像更改添加动画,javascript,php,html,image,thumbnails,Javascript,Php,Html,Image,Thumbnails,我刚刚在opencart中实现了一个扩展,它允许我点击一个缩略图来更改主图像,唯一的问题是,只是更改了一个根本没有动画或过渡效果的图像,我想让它这样图像滑入,是否有任何方法可以添加到我已经拥有的代码中,以便我可以这样做 以下是mod的代码: <file name="catalog/controller/product/product.php"> <operation> <search position="after">&
<file name="catalog/controller/product/product.php">
<operation>
<search position="after"><![CDATA['popup' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_popup_width'), $this->config->get('config_image_popup_height')),]]></search>
<add><![CDATA[// BOF om_Thumb_image_swap.xml
'addthumb' => $this->model_tool_image->resize($result['image'], $this->config->get('config_image_thumb_width'), $this->config->get('config_image_thumb_height')),
// EOF om_Thumb_image_swap.xml]]></add>
</operation>
</file>
<file name="catalog/view/theme/nthwondr_2013/template/product/product.tpl">
<operation>
<search position="before"><![CDATA[<?php echo $footer; ?>]]></search>
<add><![CDATA[<!-- BOF om_Thumb_image_swap.xml -->
<?php if ($images) { ?>
<script type="text/javascript"><!--
$(function(){
var imgs = <?php echo json_encode($images); ?>;
var html = '';
$.each(imgs,function(i,image){
html += '<div class="image" style="display:none;"><a href="' + image.popup + '" title="<?php echo $heading_title; ?>" class="colorbox">';
html += '<img src="' + image.addthumb + '" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" /></a></div>';
$('.image-additional').before(html);
html = '';
})
html = '<a href="<?php echo $popup; ?>" title="<?php echo $heading_title; ?>">';
html += '<img src="<?php echo $thumb; ?>" width="<?php echo $this->config->get('config_image_additional_width'); ?>" height="<?php echo $this->config->get('config_image_additional_height'); ?>" title="<?php echo $heading_title; ?>" alt="<?php echo $heading_title; ?>" style="padding-left: 2px;" /></a>';
$('.image-additional').prepend(html);
var images = $('div.left .image');
var thumbs = $('.image-additional a');
thumbs.removeClass('cboxElement').removeClass('colorbox');
images.children('a').colorbox({rel:'colorbox'});
thumbs.on('click',function(e){
e.preventDefault();
images.hide();
images.eq(thumbs.index(this)).show();
});
});
//--></script>
<!-- EOF om_Thumb_image_swap.xml -->
<?php } ?>]]></add>
</operation>
</file>
$this->model\u tool\u image->resize($result['image'],$this->config->get('config\u image\u popup\u width'),$this->config->get('config\u image\u popup\u height'),]>
';
$('.image additional')。在(html)之前;
html='';
})
html='';
$('.image-additional').prepend(html);
var images=$('div.left.image');
变量thumbs=$('.image附加a');
thumbs.removeClass('cboxElement').removeClass('colorbox');
images.children('a').colorbox({rel:'colorbox'});
拇指打开('点击',功能(e){
e、 预防默认值();
image.hide();
image.eq(thumbs.index(this)).show();
});
});
//-->
]]>
非常感谢大家的帮助。你们可以用这个
thumbs.on('click',function(e){
e.preventDefault();
images.hide('slide', {direction: 'left'}, 1000);
images.eq(thumbs.index(this)).show('slide', {direction: 'left'}, 1000);
});
我试过了,但当图像开始到处跳跃时,它们确实会滑动,但只是不在正确的位置,它还会增加一个我不想要的额外缩略图。