Heim > Web-Frontend > js-Tutorial > So implementieren Sie ein 3D-Fotoalbum mit HTML+CSS+JS

So implementieren Sie ein 3D-Fotoalbum mit HTML+CSS+JS

藏色散人
Freigeben: 2020-04-12 14:29:41
nach vorne
2390 Leute haben es durchsucht

Verwenden Sie HTML+CSS+JS, um ein 3D-Fotoalbum zu erstellen, kommen Sie und laden Sie die Fotos hoch

Empfohlen: „JS Basic Tutorial

Rendering:

So implementieren Sie ein 3D-Fotoalbum mit HTML+CSS+JS

Der Code lautet wie folgt, kopieren Sie ihn und verwenden Sie ihn:

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

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        html,

        body {

            margin: 0;

            padding: 0;

            background-color: #29454d;

            /*禁止文字被选中*/

            -moz-user-select: none;

            /*火狐*/

            -webkit-user-select: none;

            /*webkit浏览器*/

            -ms-user-select: none;

            /*IE10*/

            -khtml-user-select: none;

            /*早期浏览器*/

            user-select: none;

            overflow: hidden;

        }

 

        .box {

            position: relative;

            height: 500px;

            width: 500px;

            margin: 100px auto;

            transform-style: preserve-3d;

            perspective: 2000px;

        }

 

        .di {

            position: absolute;

            left: 50%;

            top: 50%;

            height: 200px;

            width: 200px;

            transform: translate(-50%, -50%) rotatex(90deg);

            transform-style: preserve-3d;

        }

 

        .z {

            position: relative;

            height: 200px;

            width: 200px;

            border-radius: 50%;

            transform-style: preserve-3d;

            /*transform: rotatez(1deg);*/

        }

 

        p {

            margin: 0;

            position: absolute;

            top: 0;

            /*为了保证圆心在父盒子中心,父盒子旋转时圆心稳定,所以设置left*/

            left: 25px;

            height: 200px;

            width: 150px;

            border: 2px solid #fd7068;

            box-sizing: border-box;

            background-color: #ffffff;

            background-size: cover;

            background-position: center;

            background-repeat: no-repeat;

            /*opacity: .7;*/

            font-size: 10px;

            line-height: 200px;

            text-align: center;

            /*box-shadow: 0 0 100px #16ff8b;*/

            /*倒影,不兼容*/

            -webkit-box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));

            box-reflect: below 10px -webkit-linear-gradient(top, rgba(250, 250, 250, 0), rgba(250, 250, 250, .0) 30%, rgba(250, 250, 250, 0.5));

            /*backface-visibility: hidden;*/

        }

    </style>

</head>

 

<body>

<div>

    <div>

        <div>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

            <p>可以拖拽图片文件进来</p>

        </div>

    </div>

</div>

<script>

    window.onload = function () {

        setPs();

        move();

        drop();

    }

        //给每个p标签设置位置

    function setPs() {

        var ps = document.getElementsByTagName(&#39;p&#39;);

        for (var i = 0; i < ps.length; i++) {

            ps[i].style.transform = &#39;rotatex(-90deg) rotatey(&#39; + i * 30 + &#39;deg) translatez(400px)&#39;

        }

    }

    //鼠标拖动旋转

    function move() {

        var zBox = document.querySelector(&#39;.z&#39;);

        var xBox = document.querySelector(&#39;.di&#39;);

        //声明计算鼠标移动速度用的变量

        var speedTimer = null;

        var speedX = 0;

        var speedY = 0;

        //声明记录旋转角度的两个变量

        var xDegNow = 90;

        var zDegNow = 0;

        //声明变量记录要旋转的角度

        var xDegDistance = 0;

        var zDegDistance = 0;

        //声明变量记录是否发生鼠标移动事件

        var isMove = false;

        window.onmousedown = function (e) {

            //鼠标按下

            //清除过渡属性

            xBox.style.transition = &#39;&#39;;

            zBox.style.transition = &#39;&#39;;

            //记录按下的坐标以及计算速度的初始坐标

            var xstart = e.clientX;

            var speedX_start = xstart;

            var ystart = e.clientY;

            var speedY_start = ystart;

            //记录用来计算速度的初始时间

            var tstart = new Date().getTime();

            var tnow = tstart;

            //设置计时器更新计算速度的当时时间

            speedTimer = setInterval(function () {

                tnow = new Date().getTime();

            },10)

            window.onmousemove = function (e) {

                //鼠标移动

                isMove = true;

                //记录当时的坐标计算距离

                var xnow = e.clientX;

                var ynow = e.clientY;

                var xDistance = xnow - xstart;

                var yDistance = ynow - ystart;

                //如果计时超过一定时间(10毫秒),计算速度

                if (tnow - tstart >= 10) {

                    //速度=(现在的坐标-初始坐标)/(现在时间-初始时间)

                    speedX = (xnow - speedX_start) / (tnow - tstart);

                    speedY = (ynow - speedY_start) / (tnow - tstart);

                    //让初始时间和坐标等于现在的时间和坐标

                    tstart = tnow;

                    speedX_start = xnow;

                    speedY_start = ynow;

                }

                //把鼠标移动距离计算成角度后设置到页面上

                zDegDistance = zDegNow - (xDistance / 10);

                zBox.style.transform = &#39;rotatez(&#39; + zDegDistance + &#39;deg)&#39;;

                xDegDistance = xDegNow - (yDistance / 10);

                xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;

                xBox.style.transform = &#39;translate(-50%,-50%) rotatex(&#39; + xDegDistance + &#39;deg)&#39;;

            };

        };

        window.onmouseup = function (e) {

            //鼠标松开

            //清除计时器 清除鼠标移动事件

            clearTimeout(speedTimer);

            window.onmousemove = null;

            //判断如果发生移动

            if (isMove) {

                //添加过渡属性

                xBox.style.transition = &#39;all 0.5s ease-out&#39;;

                zBox.style.transition = &#39;all 0.5s ease-out&#39;;

                //根据速度计算目标角度,设置到页面上

                zDegDistance = zDegDistance - (speedX * 10);

                zBox.style.transform = &#39;rotatez(&#39; + zDegDistance + &#39;deg)&#39;;

                xDegDistance = xDegDistance - (speedY * 10);

                xDegDistance = xDegDistance > 179 ? 179 : xDegDistance < 1 ? 1 : xDegDistance;

                xBox.style.transform = &#39;translate(-50%,-50%) rotatex(&#39; + xDegDistance + &#39;deg)&#39;;

                //记录当前角度的值更新

                xDegNow = xDegDistance;

                zDegNow = zDegDistance;

                //用到的变量重置

                isMove = false;

                speedX = 0;

                speedY = 0;

                xDegDistance = 0;

                zDegDistance = 0;

            }

        };

 

    }

    //鼠标拖拽文件

    function drop() {

        //取消鼠标拖拽文件进入窗口的默认行为

        window.ondragover = function (e) {

            e.preventDefault();

        }

        window.ondrop = function (e) {

            e.preventDefault();

        }

        //添加拖拽到p标签的事件

        var ps = document.getElementsByTagName(&#39;p&#39;);

        for (var i = 0; i < ps.length; i++) {

            ps[i].index = i;

            ps[i].ondrop = function (e) {

                var w = new FileReader();

                w.index = this.index;

                w.readAsDataURL(e.dataTransfer.files[0]);

                w.onload = function () {

                    ps[this.index].style.backgroundImage = &#39;url(&#39; + w.result + &#39;)&#39;;

                    ps[this.index].innerHTML = &#39;&#39;;

                }

            }

        }

    }

</script>

</body>

</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonSo implementieren Sie ein 3D-Fotoalbum mit HTML+CSS+JS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage