React开发的导航插件，轮播插件

最新推荐文章于 2024-08-13 19:01:02 发布

weixin_30480583

最新推荐文章于 2024-08-13 19:01:02 发布

阅读量204

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/wangkdeblogs/p/7880379.html

本文介绍了一款使用React实现的导航插件和轮播插件，详细展示了插件的JavaScript代码及CSS样式，同时提供了配置文件示例。通过这些代码，读者可以了解如何在React应用中创建平滑过渡的导航菜单和自动轮播图片效果。

导航插件：

import React, { Component } from 'react';
import './List.css';
import listData from "./data/list.config.json";
class List extends Component{
constructor(props) {
super(props);
this.state = {
listitem: [],
left:0,
width:0
};

}
removeClass(domArr){
for(var i=0;i<domArr.length;i++){
domArr[i].classList.remove("selected");
}
}

addClass(dom,classname){
dom.classList.add(classname);
}
hoverdown(e){

var _target = e.target;
var index = _target.getAttribute("index");
var left = _target.offsetLeft;
var width = _target.offsetWidth;
var Nodes = _target.parentNode.childNodes;
this.removeClass(Nodes);
e.target.classList.add("selected");
this.setState({
listitem:listData[index],
left:left,
width:width,
checkclass:"slidedown"
});
}
hoverout(e){
this.setState({
checkclass:""
});
e.stopPropagation();
}
listOut(e){
this.setState({
checkclass:"hide"
});
e.stopPropagation();

}
// listOutbreak(e){
// this.setState({
// checkclass:"hide"
// });
// var _target = e.target;
// var href = window.location.href;
// href = href.substring(0,href.indexOf("/"));
// window.location.href =href +"app"
// e.stopPropagation();
// }
render(){
const ListData = listData.navdata;
var listItem = this.state.listitem;
var _this = this;
return (
<div className="header-wrap">
<ul className="navul">
{
ListData.map(function(value,key){
return (
<li className="lipadding" key={value.key} onMouseOver={(e) => _this.hoverdown(e)} onMouseOut={(e) => _this.hoverout(e)} index = {value.key}>{value.value}</li>
)
})
}
</ul>
<div className={"listitem-wrap" + " "+ _this.state.checkclass} style={{left:_this.state.left,width:_this.state.width}} onMouseLeave={(e)=>_this.listOut(e)}>
<ul>
{
listItem.map(function(value,key){
return (<li key={key} onClick={(e)=>_this.listOut(e)}>{value}</li>)
})
}
</ul>
</div>
</div>
)
}
}
export default List;

css

.navul{
list-style: none;
display: flex;
display: -webkit-flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
font-size: 20px;
color: #010101;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
.navul li{
flex: 1;
}
.lipadding{
padding: 24px 10px;

}
.lipadding.selected{
color: #fff;
background-color: #666;
}
.header-wrap{
position: relative;
}
.listitem-wrap{
position: absolute;

z-index: 100;

}
.listitem-wrap ul{
list-style: none;
margin: 0;
padding: 0;
}
.listitem-wrap li{
box-sizing: border-box;
padding: 10px 5px;
padding-left: 20px;
text-align: left;
background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.25));
}
.listitem-wrap li:hover{
color: #fff;
background-color: #888;
}
.slidedown,.hide{
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-o-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
}
.slidedown{
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-o-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 1s ease-in-out;
-o-transition: max-height 1s ease-in-out;
-webkit-transition: max-height 1s ease-in-out;
transition: max-height 1s ease-in-out;
}
.hide{
max-height: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-o-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
}
@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-o-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}

40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-o-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}