React.js iPod交互动画

React Interactive iPod 使用babel-core的browser.js支持内置的Babel脚本。

React.js, device

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2829
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
    background-color: #4776E6;
    background-image: linear-gradient(to left, #4776E6, #8E54E9);
    font-family: 'Montserrat', sans-serif;
    color: #fff;
}
h2,
p {
    margin: 0;
    padding: 0;
}
ul {
    margin: 0;
    padding: 10px 0 0 0;
    list-style: none;
}
.container {
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
}
.phone-case {
    font-family: Arial;
    border-radius: 15px;
    background: #2b2b2b;
    background: linear-gradient(135deg, #2b2b2b 15%, #000000 100%);
    position: relative;
    margin: 25px auto;
    width: 350px;
    height: 550px;
    box-shadow: inset 0px 1px 4px 3px rgba(255, 255, 255, .1), 3px 3px 15px rgba(0, 0, 0, .5);
    border: 3px solid #333;
}
.phone-top {
    border: 1px solid #222;
    position: absolute;
    width: 100px;
    height: 35px;
    border-radius: 10px;
    top: 15px;
    left: 75px;
    box-shadow: inset 1px 1px 2px rgba(0, 0, 0, .08);
}
.camera {
    position: relative;
    background: #222;
    border-radius: 50%;
    height: 15px;
    width: 15px;
    left: 15px;
    top: 10px;
    box-shadow: inset 0px 1px 10px 3px rgba(255, 255, 255, .1), 1px 0px 1px rgba(0, 0, 0, .5);
}
#screen {
    position: absolute;
    width: 230px;
    height: 200px;
    top: 80px;
    left: 60px;
    border-radius: 4px;
    box-shadow: 0px 0px 15px #fff;
    font-family: 'PT Sans', sans-serif;
    font-size: 18px;
    letter-spacing: 1px;
}
li {
    padding: 3px 0 3px 5px;
}
.active {
    background-color: #fff;
    color: #000;
}
.button {
    background-color: #000;
    border-radius: 50%;
    height: 200px;
    width: 200px;
    position: absolute;
    bottom: 40px;
    left: 75px;
    box-shadow: 0 0 3px 0px rgba(255, 255, 255, .1);
}
.inner-button {
    position: absolute;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: #000;
    top: 40%;
    left: 84px;
    box-shadow: inset 0 0 1px 2px rgba(255, 255, 255, .1);
}
.menu {
    position: absolute;
    left: 78px;
    top: 30px;
    color: #C0C0C0;
    cursor: pointer;
}
.next {
    position: absolute;
    top: 90px;
    left: 156px;
    color: #C0C0C0;
    cursor: pointer;
}
.prev {
    position: absolute;
    top: 90px;
    left: 30px;
    color: #C0C0C0;
    cursor: pointer;
}
.pause {
    position: absolute;
    bottom: 30px;
    left: 86px;
    color: #C0C0C0;
    cursor: pointer;
}
.pause i {
    padding: 2px;
}

HTML

var App = React.createClass({
        displayName: 'App',

getInitialState: function getInitialState() {

return {
                active: 0,
                artists: ['Michael Jackson', 'Bob Dylan', 'Coldplay', 'Elvis Presley', 'Blur', 'Oasis'],
                songData: [],
                songs: [],
                playing: false,
                homeScreen: true,
                activeSong: 0
            };
        },

increaseIndex: function increaseIndex() {
            if (this.state.active === this.state.artists.length - 1) {
                this.setState({
                    active: 0
                });
            } else {
                this.setState({
                    active: this.state.active + 1
                });
            }
        },

decreaseIndex: function decreaseIndex() {
            if (this.state.active === 0) {
                this.setState({
                    active: this.state.artists.length - 1
                });
            } else {
                this.setState({
                    active: this.state.active - 1
                });
            }
        },

increaseSongIndex: function increaseSongIndex() {
            if (this.state.activeSong === this.state.songs.length - 1) {
                this.setState({
                    activeSong: 0
                });
            } else {
                this.setState({
                    activeSong: this.state.activeSong + 1
                });
            }
        },

decreaseSongIndex: function decreaseSongIndex() {
            if (this.state.activeSong === 0) {
                this.setState({
                    activeSong: 4
                });
            } else {
                this.setState({
                    activeSong: this.state.activeSong - 1
                });
            }
        },

getItunesData: function getItunesData() {
            var self = this;
            $.ajax({
                url: 'https://itunes.apple.com/search?term=' + this.state.artists[this.state.active] + '&limit=5',
                method: 'GET',
                dataType: 'jsonp',
                success: function(data) {
                    this.setState({
                        songData: data.results,
                        songs: []
                    });
                    data.results.map(function(song, index) {
                        self.state.songs.push(song.previewUrl);
                    });
                }.bind(this)
            });
        },

musicScreen: function musicScreen() {
            this.setState({
                homeScreen: false
            });
        },

homeScreen: function homeScreen() {
            this.setState({
                homeScreen: true
            });
        },

audio: new Audio(),

playSong: function playSong() {
            this.setState({
                playing: true
            });
            this.audio.src = this.state.songs[this.state.activeSong];
            this.audio.play();
        },

pauseSong: function pauseSong() {
            this.audio.pause();
        },

nextSong: function nextSong() {
            this.audio.src = this.state.songs[this.state.activeSong];
            this.audio.play();
        },

previousSong: function previousSong() {
            this.audio.src = this.state.songs[this.state.activeSong];
            this.audio.play();
        },

componentWillUpdate: function componentWillUpdate(nextProps, nextState) {
            if (nextState.activeSong !== this.state.activeSong) {
                this.audio.src = this.state.songs[nextState.activeSong];
                this.audio.play();
            }
        },

render: function render() {
            var screen, button;
            if (this.state.homeScreen === true) {
                screen = React.createElement(ArtistList, {
                    active: this.state.active,
                    artists: this.state.artists,
                    playing: this.state.playing
                });
                button = React.createElement(HomeButton, {
                    active: this.state.active,
                    increment: this.increaseIndex,
                    decrement: this.decreaseIndex,
                    pauseSong: this.pauseSong,
                    playing: this.state.playing,
                    musicScreen: this.musicScreen,
                    getItunesData: this.getItunesData
                });
            } else {
                screen = React.createElement(SongList, {
                    activeSong: this.state.activeSong,
                    songData: this.state.songData
                });
                button = React.createElement(MusicListButton, {
                    active: this.state.active,
                    increment: this.increaseSongIndex,
                    decrement: this.decreaseSongIndex,
                    playSong: this.playSong,
                    pauseSong: this.pauseSong,
                    playing: this.state.playing,
                    homeScreen: this.homeScreen
                });
            }
            return React.createElement(
                'div',
                null,
                React.createElement(
                    'div', {
                        id: 'screen'
                    },
                    screen
                ),
                button
            );
        }

});

var ArtistList = React.createClass({
        displayName: 'ArtistList',

render: function render() {
            var self = this;
            var listItems = this.props.artists.map(function(value, index) {
                return React.createElement(
                    'li', {
                        key: value,
                        className: self.props.active === index ? 'active' : ''
                    },
                    value
                );
            });
            return React.createElement(
                'ul',
                null,
                listItems
            );
        }

});

var SongList = React.createClass({
        displayName: 'SongList',

render: function render() {
            var self = this;
            var songItems = this.props.songData.map(function(song, index) {
                return React.createElement(
                    'li', {
                        key: index,
                        className: self.props.activeSong === index ? 'active' : ''
                    },
                    song.trackCensoredName
                );
            });
            return React.createElement(
                'ul',
                null,
                songItems
            );
        }
    });

var HomeButton = React.createClass({
        displayName: 'HomeButton',

onClick: function onClick() {
            this.props.playSong();
        },

getMusicAndNavigate: function getMusicAndNavigate() {
            this.props.getItunesData();
            this.props.musicScreen();
        },

render: function render() {

return React.createElement(
                'div', {
                    className: 'button'
                },
                React.createElement(
                    'div', {
                        className: 'menu'
                    },
                    'MENU'
                ),
                React.createElement(
                    'div', {
                        className: 'next',
                        onClick: this.props.increment
                    },
                    React.createElement('i', {
                        className: 'fa fa-fast-forward',
                        'aria-hidden': 'true'
                    })
                ),
                React.createElement(
                    'div', {
                        className: 'pause'
                    },
                    React.createElement('i', {
                        onClick: this.getMusicAndNavigate,
                        className: 'fa fa-play',
                        'aria-hidden': 'true'
                    }),
                    React.createElement('i', {
                        className: 'fa fa-pause',
                        'aria-hidden': 'true'
                    })
                ),
                React.createElement(
                    'div', {
                        className: 'prev',
                        onClick: this.props.decrement
                    },
                    React.createElement('i', {
                        className: 'fa fa-fast-backward',
                        'aria-hidden': 'true'
                    })
                ),
                React.createElement('div', {
                    onClick: this.getMusicAndNavigate,
                    className: 'inner-button'
                })
            );
        }
    });

var MusicListButton = React.createClass({
        displayName: 'MusicListButton',

render: function render() {

return React.createElement(
                'div', {
                    className: 'button'
                },
                React.createElement(
                    'div', {
                        onClick: this.props.homeScreen,
                        className: 'menu'
                    },
                    'MENU'
                ),
                React.createElement(
                    'div', {
                        className: 'next',
                        onClick: this.props.increment
                    },
                    React.createElement('i', {
                        className: 'fa fa-fast-forward',
                        'aria-hidden': 'true'
                    })
                ),
                React.createElement(
                    'div', {
                        className: 'pause'
                    },
                    React.createElement('i', {
                        onClick: this.props.playSong,
                        className: 'fa fa-play',
                        'aria-hidden': 'true'
                    }),
                    React.createElement('i', {
                        onClick: this.props.pauseSong,
                        className: 'fa fa-pause',
                        'aria-hidden': 'true'
                    })
                ),
                React.createElement(
                    'div', {
                        className: 'prev',
                        onClick: this.props.decrement
                    },
                    React.createElement('i', {
                        className: 'fa fa-fast-backward',
                        'aria-hidden': 'true'
                    })
                ),
                React.createElement('div', {
                    onClick: this.props.homeScreen,
                    className: 'inner-button'
                })
            );
        }
    });

ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
    //# sourceURL=pen.js
</script>

React Interactive iPod 使用babel-core的browser.js支持内置的Babel脚本。

React.js, device

编辑器支持Emmet

快捷键

React Interactive iPod 使用babel-core的browser.js支持内置的Babel脚本。

React.js, device

React.js GIF动画图片搜索

React.js 日/夜动态转换式开关效果

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：