雅荷心语
心之所向便是光

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作

首页
前端之旅
后端之路
软件工具
心灵鸡汤
心路历程
视频资料
关于我们
- 关于我
- 关于我
微信平台
- 业务合作
关注本站
- 微信
- 微博
- 腾讯微博
- Twitter
- Facebook
- RSS订阅

让你的照片动起来

2024-10-31 分类：前端之旅阅读(46) 评论(0)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D Image Slider with SpriteSpin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/spritespin/4.0.0/spritespin.min.css">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #333;
    }
    #spritespin {
      width: 600px;
      height: 400px;
    }
  </style>
</head>
<body>
<div id="spritespin"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://unpkg.com/spritespin@4.0.3/release/spritespin.js"></script>
<script>
  window.onload = () => {
    $('#spritespin').spritespin({
      source: Array.from({ length: 12 }, (_, i) => `360/2/环物_${i + 1}.jpg`),
      width: 600,
      height: 400,
      frameTime: 60,
      animate: false,
      loop: false,
      stopFrame: 0,
      sense: -1,
      wrap: true
    });
  }
</script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>3D Image Slider with SpriteSpin</title>

<style>

body {

display: flex;

justify-content: center;

align-items: center;

height: 100vh;

background-color: #333;

}

#spritespin {

width: 600px;

height: 400px;

}

</style>

</head>

<body>

window.onload = () => {

$('#spritespin').spritespin({

source: Array.from({ length: 12 }, (_, i) => `360/2/环物_${i + 1}.jpg`),

width: 600,

height: 400,

frameTime: 60,

animate: false,

loop: false,

stopFrame: 0,

sense: -1,

wrap: true

});

}

</script>

</body>

</html>

分享到：更多 ()

碎碎念):(来自公众号)

左邻右舍

Brian's Blog
易水寒
楼教主
贤心
阿米龙

雅荷心语博客 -心之所向便是光

联系我们关于我们

一	二	三	四	五	六	日
« 十
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30

相关推荐

雅荷心语博客 -心之所向便是光