0

我正在为我的网站制作图像滚动条，我有两张图片。我希望用户单击下一个按钮，图像在 250 毫秒内旋转 180 度，更改图片，然后在 250 毫秒内再次旋转 180 度到位。有没有办法做到这一点？

back.node.onclick=function(){


kitaimage1.animate({
transform : "r180",
kitaimage1.hide();
testimg1.show();
testimg1.animate({ transform : "r180"   });

},250);

}

是我到目前为止所拥有的，但它不起作用。提前致谢，诺姆·哈伯

4

1 回答 1

0

这绝对是可能的，尽管有很多方法可以构建它。这是许多可能的解决方案之一。我假设存在一个paper通篇命名的拉斐尔纸对象。

位置和尺寸

            var cx = 180, cy = 125; /* These are the coordinates of the center point of your image(s) inside the paper */
            var dx = 320, dy = 240; /* dx and dy describe the dimensions of the desired image interface. */

图像信息

我假设您希望通过 ajax 动态加载此信息（取决于您的画廊的结构）或能够重新使用它。此示例使用一个对象数组来描述列表中每个项目的url、width和height。例如...

            var imageList =
            [
                {
                    url: '/tests/images/sunset1.jpg',
                    width: 1600,
                    height: 900,
                },
                {
                    url: '/tests/images/moonrise1.jpg',
                    width: 1024,
                    height: 768,
                },
                {
                    url: '/tests/images/cityscape.jpg',
                    width: 1920,
                    height: 1080,
                },
                {
                    url: '/tests/images/forest03.jpg',
                    width: 500,
                    height: 325,
                },
            ];

编码

最后但并非最不重要的一点是，在您的 DOM 准备就绪时（或在您的图像已加载或任何其他应该触发它的事件之后）运行此代码。这只是创建一个函数来进行转换，然后调用它来获取第一张图像。

            var imageIndex = 0;
            var rotationMultiplier = 1;
            var currentImage = null;

            function rotateTransitionNext()
            {
                rotationMultiplier *= -1;
                imageIndex++;
                if ( imageIndex >= imageList.length )
                    imageIndex = 0;

                if ( currentImage )
                {
                    currentImage.animate( { transform: ["...r", 180 * rotationMultiplier, cx, cy], opacity: 0.0 }, 1000, '<>', function()
                        {
                            this.remove();
                        } );
                }
                var newImage = paper.image( imageList[imageIndex].url, cx - dx / 2, cy - dy / 2, dx, dy )
                                    .attr( { transform: [ "r", -180 * rotationMultiplier, cx, cy], opacity: 0.0 } )
                                    .animate( { transform: [ "...r", 180 * rotationMultiplier, cx, cy ], opacity: 1.0 }, 1000, '<>', function()
                                        {
                                            currentImage = this;
                                            this.click( rotateTransitionNext );
                                        } );
            }

            rotateTransitionNext();

松散的结局 作为一个粗略的起点，应该做一些事情来结束它：

  1. 看在上帝的份上，将这些东西包装在它自己的命名空间中，以避免用碎屑弄乱全局范围（我的错）

  2. 保留不同图像的纵横比。现在，所有图像都被迫符合全局定义的尺寸（dx 和 dy）

快乐编码。

更新：这是此代码在工作中的分阶段示例。只需单击图像即可使其旋转到下一个。

于 2013-09-04T18:55:55.733 回答