echart图表制作bug

1.min-width与min-height
min-width顾名思义就是最小宽度
在新版的浏览器内可用，在ie浏览器不能用数值表示。
举个使用的方法：

<div style="width:100%; height:20px; background:#f00; min-width:800px;"></div>

这个div是全屏的,浏览器不会产生滚动条，但是你把浏览器宽度缩小到800像素的时候，这个div不会再缩小，而浏览器就会产生滚动条（纵向）
echart图表制作bug

echart图表制作bug

2.点击切换隐藏
echart图表制作bug

$(function(){
var tmp,tmp0,tmp1;
var timeid
    $(".arrow-left").click(function(){
//获取某一类的样式
        tmp = $(".content0").attr("class");
//如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组
        tmp0 = tmp.match(/hidden/);
//如果样式存在并且样式为hidden
if(tmp0  && tmp0[0] == "hidden"){
            $(".content0").removeClass("hidden");
            $(".content1").addClass("hidden");
            clearInterval(timeid)
        }else{
            $(".content1").removeClass("hidden");
            $(".content0").addClass("hidden");
//右边按钮功能与左边按钮功能相同
            $(".arrow-right").click(function(){
        $(".arrow-left").click();
    })

match()用法
如果没有找到任何匹配的文本， match() 将返回 null。否则，它将返回一个数组。
echart图表制作bug

$.each(results, function(index, domEle) {}

遍历处理data，可以是数组、DOM、json等，取决于直接给定或者ajax返回的类型
function (index, value)中index是当前元素的位置，value是值。

 // each处理一维数组
var arr1 = [ "aaa", "bbb", "ccc" ];      
  $.each(arr1, function(i,val){      
      alert(i);   
      alert(val);
  });
// 处理json数据，例如ajax的返回值 
var obj = { one:1, two:2, three:3};      
　$.each(obj, function(key, val) {      
      alert(key); 
      alert(val); 
  });

3.input框
echart图表制作bug

echart图表制作bug

#header .search-part{
position: relative;
width: 17%;
height: 26px;
border: 1px solid #03FBFF;
float: right;
margin-top:25px;
}
.search-part img{
position: absolute;
right: 5px;
top:10px;
}
#header .search-part input{
height: 100%;
width: 100%;
line-height: 26px;
color:#ffffff;
text-indent: 14px;
background:transparent;
}
#header .search-part ul{
position: absolute;
width: 101%;
background-color: #ffffff;
top:26px;
left: -1px;
display: none;
z-index: 100;
}
#header .search-part:hover ul{
display: block;
}
#header .search-part ul li{
width: 100%;
height: 25px;
line-height: 25px;
color: #404040;
text-indent: 7px;
cursor: pointer;
}
#header .search-part ul li:hover{
color: #EDCF0A;
}

var tmpli;
    $(".search-part li").click(function(){
        tmpli = $(this).text();
        $(this).parent().siblings("input").val(tmpli);
    })

5.滚动条样式设计

/*滚动条 start*/  
::-webkit-scrollbar { 
width: 5px; 
height: 4px; 
background-color: #F5F5F5; 
}  
/*定义滚动条轨道 内阴影+圆角*/  
::-webkit-scrollbar-track { 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
background: #fff ; 
}  
/*定义滑块 内阴影+圆角*/  
::-webkit-scrollbar-thumb { 
border-radius: 3px; 
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3); 
background-color:#0f6286; 
}

/*根据屏幕分辨率大小 自适应字体*/
@media (min-width: 2px) {
.title-size{
font-size: 22px;
/*width: 260px;*/
}
.fontSize1{
font-size: 15px;
}
.fontSize2{
font-size: 14px;
}
.fontSize3{
font-size: 12px;
}
.num-size1{
font-size: 18px;
font-weight: Arial;
}
}
@media (min-width: 1600px) {
.title-size{
font-size: 25px;
/* width: 300px;*/
}
.fontSize1{
font-size: 18px;
}
.fontSize2{
font-size: 15px;
}
.fontSize3{
font-size: 13px;
}
.num-size1{
font-size: 22px;
font-weight: Arial;
}
}

6.html js 或者css怎么做到隐藏滚动条，但是依旧可以滚动？
法一：给你个思路。一个外部div里设置宽高设置overflow:hidden，然后里面插入一个div 设置
宽度width: 102%;height: 100%;overflow-x: hidden;overflow-y: auto;padding-right:30px;/*这个padding可以自己调整*/
然后在再插入的div里插入内容就可以了，这样滚动条就会超出视线范围而被隐藏了。

法二：::-webkit-scrollbar{width:0px}
目前本方法只在webkit内核浏览器中有效(Chrome,Safari)。可以用JS做渐变的隐藏滚动条特效，依旧可以滚动。

法三：既然已经用了JS可以考虑另外一个方案
一个div固定高度，超出部分影藏，在嵌套一个DIV，这个div没有固定高度，然后用JS获取到鼠标在里面这个DIV高度的移动值，吧这个值给里面DIV做一个Y轴的移动，这样就没有滚动条显示，在鼠标移动的时候也会上下滚动

秒客网

echart图表制作bug

相关文章