<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js"></script>
<script src="jsScroll.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
ul li{list-style:none;}
.showMoreNChildren{width:195px;margin:0 auto;overflow:hidden;padding-right:10px;}
.showMoreNChildren li {width:100%;position: relative;padding: 8px 0 8px;display:block;}
.icon-putong {width: 34px;height: 34px;background: 0;display:inline-block;}
.showMoreNChildren li span {width: 120px;margin: 0 0 0 10px;display:inline-block;font-size: 13px;cursor: default;padding-top: 1px;}
.groupIcon {background: 0;position: absolute;left: 163px;}
.groupIcon img {max-height: 30px;max-width: 30px;}
.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}
.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}
.divScrollBar div{background-color:#aaa; position:absolute; left:0px; top:0px;}
.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}
.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}
.divScrollBar div{background-color:#aaa; position:absolute; left:0px; top:0px;}
.showMorehandle{text-align:center;font-size:14px;color:#09F;}
</style>
</head>
<body>
<div id="user_list_bar" style="width:204px;margin:0 auto;overflow-y:scroll;height:800px;">
<ul id="users" class="showMoreNChildren" pagesize="2">
</ul>
<div class="showMorehandle">更多..</div>
</div>
<script>
$(function(){
$.ajax({
type: "POST",
url: "/hhh.php",
dataType: "json",
data:"123",
success: function(data) {
var json=eval(data);
for(var n=0;n<json.length;n++){
jQuery("#users").append("<li class=\"login-user\" ><i class=\"icon-putong\"><img src=\""+json[n].perimg+"\" width=\"24px\" height=\"24px\" /></i><span>"+json[n].name+"</span><i class=\"groupIcon\"><img src=\""+json[n].iconimg+"\" /></i></li>");
}
jsScroll(document.getElementById('user_list_bar'),6, 'divScrollBar');
}
});
$(".showMorehandle").click(function(){
$.ajax({
type: "POST",
url: "/hhh.php",
dataType: "json",
data:"123",
success: function(data) {
var json=eval(data);
for(var n=0;n<json.length;n++){
jQuery("#users").append("<li class=\"login-user\" ><i class=\"icon-putong\"><img src=\""+json[n].perimg+"\" width=\"24px\" height=\"24px\" /></i><span>"+json[n].name+"</span><i class=\"groupIcon\"><img src=\""+json[n].iconimg+"\" /></i></li>");
}
jsScroll(document.getElementById('user_list_bar'),6, 'divScrollBar');
}
});
});
});
</script>
</body>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.min.js"></script>
<script src="jsScroll.js"></script>
<style type="text/css">
*{margin:0;padding:0;}
ul li{list-style:none;}
.showMoreNChildren{width:195px;margin:0 auto;overflow:hidden;padding-right:10px;}
.showMoreNChildren li {width:100%;position: relative;padding: 8px 0 8px;display:block;}
.icon-putong {width: 34px;height: 34px;background: 0;display:inline-block;}
.showMoreNChildren li span {width: 120px;margin: 0 0 0 10px;display:inline-block;font-size: 13px;cursor: default;padding-top: 1px;}
.groupIcon {background: 0;position: absolute;left: 163px;}
.groupIcon img {max-height: 30px;max-width: 30px;}
.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}
.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}
.divScrollBar div{background-color:#aaa; position:absolute; left:0px; top:0px;}
.divScrollBar{background-color:#ddd;position:absolute;opacity:0.5; filter:Alpha(opacity=50);}
.divScrollBar:hover{opacity:1; filter:Alpha(opacity=100);}
.divScrollBar div{background-color:#aaa; position:absolute; left:0px; top:0px;}
.showMorehandle{text-align:center;font-size:14px;color:#09F;}
</style>
</head>
<body>
<div id="user_list_bar" style="width:204px;margin:0 auto;overflow-y:scroll;height:800px;">
<ul id="users" class="showMoreNChildren" pagesize="2">
</ul>
<div class="showMorehandle">更多..</div>
</div>
<script>
$(function(){
$.ajax({
type: "POST",
url: "/hhh.php",
dataType: "json",
data:"123",
success: function(data) {
var json=eval(data);
for(var n=0;n<json.length;n++){
jQuery("#users").append("<li class=\"login-user\" ><i class=\"icon-putong\"><img src=\""+json[n].perimg+"\" width=\"24px\" height=\"24px\" /></i><span>"+json[n].name+"</span><i class=\"groupIcon\"><img src=\""+json[n].iconimg+"\" /></i></li>");
}
jsScroll(document.getElementById('user_list_bar'),6, 'divScrollBar');
}
});
$(".showMorehandle").click(function(){
$.ajax({
type: "POST",
url: "/hhh.php",
dataType: "json",
data:"123",
success: function(data) {
var json=eval(data);
for(var n=0;n<json.length;n++){
jQuery("#users").append("<li class=\"login-user\" ><i class=\"icon-putong\"><img src=\""+json[n].perimg+"\" width=\"24px\" height=\"24px\" /></i><span>"+json[n].name+"</span><i class=\"groupIcon\"><img src=\""+json[n].iconimg+"\" /></i></li>");
}
jsScroll(document.getElementById('user_list_bar'),6, 'divScrollBar');
}
});
});
});
</script>
</body>
</html>
<?php
$arr = array(
array ('perimg' => 'images/01.png','name' => '游客_342333','iconimg' => 'images/用户 - 小-(9).png'),
array ('perimg' => 'images/01.png','name' => '游客_342333','iconimg' => 'images/用户 - 小-(9).png'),
);
$jsonstr = json_encode($arr);
echo $jsonstr;
?>
100
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
