滚动播报

代码：

搜索框：

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
<!doctype html>
<html>
   <head>
       <meta charset="utf-8">
       <title>jQuery 文字逐行向上滚动代码</title>
       <style>
           *{padding:0;margin:0;}
           li{list-style:none;}
           .apple{width:90%;height:50px;overflow:hidden;margin:50px auto;border:1px solid red;}
           .apple a{display:block;text-decoration:none;width:100%; height:50px; line-height:50px; text-indent:20px; color:#1B96EE;}
       </style>
       <script src="jquery.min.js"></script>  
   </head>
   <body>
       <div class="apple">
           <ul>
               <li><a href="#">快使用双截棍</a></li>
               <li><a href="#">哼哼哈嘿</a></li>
               <li><a href="#">习武之人切记</a></li>
               <li><a href="#">仁者无敌</a></li>
           </ul>
       </div>
       <script>
           function autoScroll(obj){
               $(obj).find("ul").animate({
                   marginTop:"-39px"
               },500,function(){
                   $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
               })
           }
           $(function(){
               setInterval('autoScroll(".apple")',2000);
           })
       </script>
   </body>
</html>

substring截取

一

substring() 方法用于提取字符串中介于两个指定下标之间的字符

例如： $(‘.title’).html() –> ‘如何培养小学生之我的笔记’；

IE8 下的 RGBA 兼容问题

问题表述：

1
2
background:rgba(0,0,0,.5);  /*支持rgba的浏览器*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7f000000,endColorstr=#7f000000); /*IE8支持*/

下图为 rgba 和 IE filter 的转换

SUI打包WEBAPP后IOS的position:fixed 白屏

表述

主要是IOS有这问题

部分Android也有这问题

解决

解决方法:absolute模拟fixed效果.

上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: hidden;}
fixed{
    position: absolute;
    top: 0;
    left: 0;
    width: 30%;
    background: #def4ff;
}

或者html/body设置100%

1
2
3
4
5
6
7
8
9
10
html { height:100%; overflow:hidden;}
body { height:100%; overflow:hidden;}
.fixed { position:absolute; top:10px; left:10px; width:200px; height:350px; background:#fc0; }
.wrapper { height:100%; overflow:auto;}
<html>
    <body>
        <div class="fixed">左边无论怎么滚动这个窗口它都不会动的</div>
        <div class="wrapper">
    </body>
</html>

其他：

另外：官方的issues也有类似的解决方案
如果是ios,则使用position:sticky来布局

▲ ▼