jQuery和php图像旋转拼图

Jquery拼图

我有一个PHP脚本,从文件夹中返回随机jpg图像的名称.这很好,因为我根本不需要重命名图像;我只是把它们放在文件夹中,随机发生器工作.现在,我调用这样的脚本 – http://mydomain.com/images/rotate.php – 并在一个简单的网页重新加载,它交换图像.

但是我想让它与jQuery一起工作,因为我想让图像以十秒左右的间隔换成新图像,并且还淡入它们并淡出它们.

编辑1/23/10：

这通过交换spacer.gif来工作.可能有更优雅的解决方案,但这对我有用.蒙克通过MidnightLightning的想法弄明白了：

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

这是rotate.php：

<?php

$folder = '.';


    $extList = array();
    $extList['gif'] = 'image/gif';
    $extList['jpg'] = 'image/jpeg';
    $extList['jpeg'] = 'image/jpeg';
    $extList['png'] = 'image/png';


$img = null;

if (substr($folder,-1) != '/') {
    $folder = $folder.'/';
}

if (isset($_GET['img'])) {
    $imageInfo = pathinfo($_GET['img']);
    if (
        isset( $extList[ strtolower( $imageInfo['extension'] ) ] ) &&
        file_exists( $folder.$imageInfo['basename'] )
    ) {
        $img = $folder.$imageInfo['basename'];
    }
} else {
    $fileList = array();
    $handle = opendir($folder);
    while ( false !== ( $file = readdir($handle) ) ) {
        $file_info = pathinfo($file);
        if (
            isset( $extList[ strtolower( $file_info['extension'] ) ] )
        ) {
            $fileList[] = $file;
        }
    }
    closedir($handle);

    if (count($fileList) > 0) {
        $imageNumber = time() % count($fileList);
        $img = $folder.$fileList[$imageNumber];
    }
}

if ($img!=null) {
    $imageInfo = pathinfo($img);
    $contentType = 'Content-type: '.$extList[ $imageInfo['extension'] ];
    header ($contentType);
    readfile($img);
} else {
    if ( function_exists('imagecreate') ) {
        header ("Content-type: image/png");
        $im = @imagecreate (100, 100)
            or die ("Cannot initialize new GD image stream");
        $background_color = imagecolorallocate ($im, 255, 255, 255);
        $text_color = imagecolorallocate ($im, 0,0,0);
        imagestring ($im, 2, 5, 5,  "IMAGE ERROR", $text_color);
        imagepng ($im);
        imagedestroy($im);
    }
}

?>

解决方法:

我认为这样做的缺点是新图像会有一个加载周期,因此动画可能有点古怪.如果$_GET值等于一个东西,那么在该文件中有两个部分可能是有益的,其中返回路径,如果未设置$_GET值或等于其他值,则返回图像.这样你可以预加载一系列图像,图像之间会有更平滑的动画.

话虽如此,在我看来这样的事情应该有效.

$(document).ready(function(){
   function swapImage(){
      var time = new Date();
      $('#image').fadeOut(1000)
       .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
       .fadeIn(1000);
   }

   var imageInterval = setInterval('swapImage()',10*1000); 
});

时间使得浏览器认为它正在获得一个新的图像.

spacer.gif的

要使用黑色间隔物执行此操作,我建议将图像包装在div中,并为div提供#000背景颜色以匹配间隔：

#image-wrap{background-color:#000;}

它会使图像实际上褪色为黑色,而不是淡化到当前的背景颜色,变为黑色,然后渐渐消失.js与上面的非常类似：

function swapImage(){
  var time = new Date();
  $('#image').fadeOut(1000)
   .attr('src', 'http://mydomain.com/spacer.gif')
   .attr('src', 'http://mydomain.com/images/rotate.php?'+time.getTime())
   .fadeIn(1000);
}

var imageInterval = setInterval('swapImage()',10*1000); 

把时间留在那里可能没有必要,但是嘿,这是另一个防止浏览器缓存“图像”的安全措施.

标签：jquery,php,image,fadein,fadeout
来源： https://codeday.me/bug/20190610/1214063.html