不得不说，这个效果虽然比较简单，实现起来却一步一个坑。
一开始我是采用yoman脚手架搭建react项目，之后安装Redux 和 Syled-components ，它却报错React.createContext is not a function 经过一段时间的百度后，我发现 yoman脚手架安装的react是15.0.0版本，这个版本没有React.createContext 这个方法。之后我修改package.json 的react版本号，重新安装依赖包。
安装好依赖包后 开启项目 又报错because its MIME type ('text/html') is not executable, and strict MIME type
又花了我大量的时间去百度，发现yoman脚手架搭建的服务器js文件设置了一个响应头，导致无法请求到js文件。 没法 我放弃了yoman脚手架，使用官方推荐的create-react-app 来搭建项目。ok 一切都正常了 开始编写代码
redux index.js 文件
import {
createStore
} from 'redux';
import reducer from './reducer.js';
const store = createStore(reducer);
export default store;
redux reducer.js 文件
const defaultState = {
active: 1,
bgactive: 1
};
export default (state = defaultState, action) => {
if (action.type == 'header_interval') {
if (state.active == 3) {
return {
active: 1,
bgactive: state.bgactive
}
} else {
return {
active: state.active + 1,
bgactive: state.bgactive
}
}
}
if (action.type == 'background_interval') {
if (state.bgactive == 3) {
return {
active: state.active,
bgactive: 1
}
} else {
return {
active: state.active,
bgactive: state.bgactive + 1
}
}
}
return state;
}
header.js文件
import React, {
Component,
} from 'react';
import {
connect
} from 'react-redux';
import {
HeaderContainer,
HeaderMiddle,
HeaderLeft,
HeaderLogo,
HeaderLogoImg,
HeaderNews,
News,
New,
HeaderNav,
HeaderNavUl,
HeaderNavLi,
NavContainer,
NavUl,
NavLi
} from './headerStyle.js';
class Header extends React.Component {
componentDidMount() {
this.props.setHeaderInterval();
}
render() {
return (
<HeaderContainer>
<HeaderMiddle>
<HeaderLeft>
<HeaderLogo>
<HeaderLogoImg />
</HeaderLogo>
<HeaderNews>
<i className="iconfont"></i>
<News>
<New className={this.props.active==1? 'active':''}>彼爱(BiiB): http://www.biib.cn</New>
<New className={this.props.active==2? 'active':''}>官方Email: biib@biib.cn</New>
<New className={this.props.active==3? 'active':''}>客服QQ: 43105579</New>
</News>
</HeaderNews>
</HeaderLeft>
<HeaderNav>
<HeaderNavUl>
<HeaderNavLi>彼爱</HeaderNavLi>
<HeaderNavLi>说说</HeaderNavLi>
<HeaderNavLi>
读读
<i className="iconfont"></i>
<NavContainer className="navChild1">
<NavUl>
<NavLi>谈天说地</NavLi>
<NavLi>彼爱无岸</NavLi>
<NavLi>人在旅途</NavLi>
<NavLi>完美生活</NavLi>
</NavUl>
</NavContainer>
</HeaderNavLi>
<HeaderNavLi>
找找
<i className="iconfont"></i>
<NavContainer className="navChild2">
<NavUl>
<NavLi>美图欣赏</NavLi>
<NavLi>岁月留声</NavLi>
<NavLi>光影时代</NavLi>
</NavUl>
</NavContainer>
</HeaderNavLi>
<HeaderNavLi>收收</HeaderNavLi>
<HeaderNavLi>问问</HeaderNavLi>
<HeaderNavLi>链链</HeaderNavLi>
<HeaderNavLi>想想</HeaderNavLi>
</HeaderNavUl>
</HeaderNav>
</HeaderMiddle>
</HeaderContainer>
)
}
}
const mapStateToProps = (state) => {
return {
active: state.active
}
}
const mapDispathToProps = (dispath) => {
return {
setHeaderInterval() {
setInterval(() => {
const action = {
type: 'header_interval'
}
dispath(action);
}, 2500)
}
}
}
export default connect(mapStateToProps, mapDispathToProps)(Header);
headerStyled.js 文件
import styled from 'styled-components';
import logoImgUrl from '../../img/logo.png';
export const HeaderContainer = styled.div position: fixed; top: 0; left: 0; width: 100%; height: 70px; background: ecf8fd; box-shadow: 0 0 5px #6dbcdf; box-sizing: border-box; background: #f3f5f6;
export const HeaderMiddle = styled.div margin: 0 auto; width: 1200px; height: 100%; position: relative;
export const HeaderLeft = styled.div position: relative; width: 40%; height: 100%;
export const HeaderLogo = styled.div width: 33%; height: 100%; display: flex; justify-content:center;
export const HeaderLogoImg = styled.a margin-left: 35px; margin-top: 10.5px; height: 43px; width: 105px; display: inline-block; background-image: url(${logoImgUrl}); background-size: 100% 100%;
export const HeaderNews = styled.div left: 34%; top: 25px; position: absolute; width: 67%; height: 25px; i{ position: absolute; cursor: pointer; margin-top: 4.5px; }
export const News = styled.ul position: absolute; left: 20px; top: 0; height: 25px; overflow:hidden; width: 80%;
export const New = styled.li transition: all 0.5s; width: 100%; height: 25px; line-height: 25px; color: #777; font-size: 12px; position: absolute; top: 25px; &.active{ top: 0; }
export const HeaderNav = styled.nav position: absolute; right: 0; top: 0; width: 60%; height 100%;
export const HeaderNavUl = styled.ul width: 100%; height: 70px; display: flex;
export const HeaderNavLi = styled.li flex: 1; line-height: 70px; text-align: center; color: #ff6700; font-size: 16px; transition: all 0.3s; cursor: pointer; &:hover{ font-size: 20px; color:#fff; background: #03a9f4; } &:hover .iconfont{ transform: rotate(-90deg); } &:hover .navChild1{ left: 180px; opacity: 1; display: block; } &:hover .navChild2{ left: 270px; opacity: 1; display: block; } .iconfont{ margin-left: 5px; display:inline-block; transform: rotate(90deg); transition: all 0.3s; }
export const NavContainer = styled.div transition: all 0.8s; display: none; top: 70px; left: -200px; opacity: 0; position: absolute; width: 150px; border: 1px solid #ddd; box-sizing: border-box; border-top:none; background: #fff; box-shadow: 2px 2px 8px #ccc;
export const NavUl = styled.ul `
export const NavLi = styled.li
width: 150px;
text-align: center;
line-height: 40px;
color: #ff6700;
font-size: 14px;
transition: all 0.3s;
box-sizing: border-box;
padding: 10px 0;
border-bottom: 1px solid #eee;
&:hover{
background: #03a9f4;
color: #fff;
font-size: 16px;
}
`
background.js 文件
import React, {
Component
} from 'react';
import {
connect
} from 'react-redux';
import {
ImgContainer,
ImgLi
} from './backgroundStyle.js'
class Background extends Component {
componentDidMount() {
this.props.setBgInterval();
}
render() {
return (
<ImgContainer>
<ImgLi className={this.props.bgactive==1? 'active bg1' : 'bg1'}/>
<ImgLi className={this.props.bgactive==2? 'active bg2' : 'bg2'}/>
<ImgLi className={this.props.bgactive==3? 'active bg3' : 'bg3'}/>
</ImgContainer>
)
}
}
const mapStateToProps = (state) => {
return {
bgactive: state.bgactive
}
}
const mapDispathToProps = (dispath) => {
return {
setBgInterval() {
setInterval(() => {
const action = {
type: 'background_interval'
}
dispath(action)
}, 5000)
}
}
}
export default connect(mapStateToProps, mapDispathToProps)(Background);
backgroundStyle.js 文件
import styled from 'styled-components';
import bg1 from '../../img/bg0.jpg';
import bg2 from '../../img/bg1.jpg';
import bg3 from '../../img/bg2.jpg';
export const ImgContainer = styled.ul width: 100%; height: 100%; position: relative;
export const ImgLi = styled.li width: 100%; height: 100%; position: absolute; left: 0; top: 0; &.bg1{ transition: all 0.8s; background-image: url(${bg1}); background-size: 100% 100%; opacity: 0; } &.bg2{ transition: all 0.8s; background-image: url(${bg2}); background-size: 100% 100%; opacity: 0; } &.bg3{ transition: all 0.8s; background-image: url(${bg3}); background-size: 100% 100%; opacity: 0; } &.active{ opacity: 1; }
