jQuery和php图像旋转拼图

2019-06-10 21:18:15 阅读：314 来源： 互联网

我有一个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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

jQuery和php图像旋转拼图