###手机H5页面
###文字滚动
使用li标签,通过改变margin-top实现向上滚动。
代码:
js:
carousel: function() {
var items = $('.roll').find('li');
console.log(items);
var $itemOne = items.eq(0);
var margin_top = 0;
var margin_top_height = $itemOne.height();
var lastitems = margin_top_height * items.length;
var stay_time = 2000; //停留时间
var current_time = 0;
if (items.length > 0) {
setInterval(function() {
if (margin_top % margin_top_height == 0) {
//停留
current_time += 50;
if (current_time <= stay_time) {
return;
}
current_time = 0;
}
margin_top += 1;
if (margin_top == lastitems) {
margin_top = 0;
}
$itemOne.css('margin-top', '-' + margin_top + 'px');
}, 50);
}
},
html:
<ul class="roll_width">
<li>
<span class="><img class="" src="images/img.png" alt=""></span>
<span class="">张三</span>
<span class="">男</span>
<span class="">25</span>
</li>
<li>
<span class=""><img class="" src="images/img.png" alt=""></span>
<span class="setwidth">李四</span>
<span class="setwidth3">男</span>
<span class="setwidth2">25</span>
</li>
<li>
<span class=""><img class="" src="images/img.png" alt=""></span>
<span class="">王五</span>
<span class="">男</span>
<span class="">35</span>
</li>
</ul>
###手机页面适配各种屏幕
使用手淘团队的flexible:
<script src="https://s4.ssl.qhres.com/!9259ca14/flexible.js"></script>
<script src="https://lib.baomitu.com/zepto/1.2.0/zepto.min.js"></script>
###jQuery ajax包含cookie
$.ajax({
url: url,
data: ret,
type: "GET",
async: true,
xhrFields: {
withCredentials: true
},
crossDomain: true,
dataType: 'json',
timeout: 2000,
success: function(ret) {
},
error: function(xhr, type) {
}
});