本人做的是留言板页面第一次加载正常显示 随机位置 可拖动 但是定时2秒请求之后 显示出来的数据都会 固定在左上角 并且不能拖动下面帖源码$(function(){
$('#cv img').load(function() {
var ig = ($(this).height());
var gaoa = $(window).height();
/* var gaob = gaoa-ig; */
var gaob = gaoa-ig-20;
$('#container').css('height',gaob);
});});
var container;
// 可选颜色
var colors = ['url(/addons/amp_web/template/pingmu/img/1.png)', 'url(/addons/amp_web/template/pingmu/img/2.png)','url(/addons/amp_web/template/pingmu/img/3.png)', 'url(/addons/amp_web/template/pingmu/img/4.png)', 'url(/addons/amp_web/template/pingmu/img/5.png)', 'url(/addons/amp_web/template/pingmu/img/6.png)', 'url(/addons/amp_web/template/pingmu/img/7.png)', 'url(/addons/amp_web/template/pingmu/img/8.png)'];
//创建许愿页
var createItem = function(text){
var color = colors[parseInt(Math.random() * 5, 10)]
$('<div class="item">'+ text +'</div>').css({ 'background': color }).appendTo(container).drag();
};
/*<a href="#">关闭</a>*/
// 定义拖拽函数
$.fn.drag = function () {
var $this = $(this);
var parent = $this.parent();
var pw = parent.width();
var ph = parent.height();
var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10) + parseInt($this.css('padding-right'), 10);
var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10) + parseInt($this.css('padding-bottom'), 10); var x, y, positionX, positionY;
var isDown = false;
$('#cv img').load(function() {
var ig = $(this).height();
var gaoa = $(window).height();
var gaob = gaoa-ig-20;
$('#container').css('height',gaob);
var h = $('#container').height();
var randY = parseInt(Math.random() * (h - thisHeight), 10); var randX = parseInt(Math.random() * (pw - thisWidth), 10);
parent.css({
"position": "relative",
"overflow": "hidden"
});
$this.css({
"cursor": "move",
"position": "absolute"
}).css({
top: randY,
left: randX
}).mousedown(function (e) {
parent.children().css({
"zIndex": "0"
});
$this.css({
"zIndex": "1"
});
isDown = true;
x = e.pageX;
y = e.pageY;
positionX = $this.position().left;
positionY = $this.position().top;
return false;
});
});
$(document).mouseup(function (e) {
isDown = false;
}).mousemove(function (e) {
var xPage = e.pageX;
var moveX = positionX + xPage - x; var yPage = e.pageY;
var moveY = positionY + yPage - y;
var h = $('#container').height();
var ch = h - thisHeight;
if (isDown == true) {
$this.css({
"left": moveX,
"top": moveY
});
} else {
return;
}
if (moveX < 0) {
$this.css({
"left": "0"
});
}
if (moveX > (pw - thisWidth)) {
$this.css({
"left": pw - thisWidth
});
}
if (moveY < 0) {
$this.css({
"top": "0"
});
}
if (moveY > ch) {
$this.css({
"top": ch
});
}
});
};
// 初始化
var init = function () {
container = $('#container');
// 绑定关闭事件
/*container.on('click','a',function () {
$(this).parent().remove();
}).height($(window).height() -204);*/
/* alert(1) */
/* function ajaxt(){ */
$.ajaxSettings.async = false;
var id = $('#shopids').val();
var url = $('#url').val();
var finid = $('#finid').val();
$.post(url , {id:id,finid:finid} , function(date){
if(date != 1){
$('#finid').val(date[0].finid)
/* alert($('#finid').val()) */
var str='';
$.each(date,function(k,v){
str+="'"+'<span class="zz"><span class="nc">'+v.openid+'</span><span class="sj">10:11:00</span></span><p>'+v.content+'</p>'+"',"
})
var basic = str.substr(0, str.length - 1);
var tests = "["+basic+"]";
var obj = eval('(' + tests + ')');
$.each(obj, function (i,v) {
createItem(v);
});
}
},'json')
$.ajaxSettings.async = true;
/* } */
/*超出部分...显示*/
$(document).ready(function() {
$('#container p').ellipsis({row: 7});
})
};
$(function() {
init();
});
setInterval(function() {
init();
}, 2000);
$('#cv img').load(function() {
var ig = ($(this).height());
var gaoa = $(window).height();
/* var gaob = gaoa-ig; */
var gaob = gaoa-ig-20;
$('#container').css('height',gaob);
});});
var container;
// 可选颜色
var colors = ['url(/addons/amp_web/template/pingmu/img/1.png)', 'url(/addons/amp_web/template/pingmu/img/2.png)','url(/addons/amp_web/template/pingmu/img/3.png)', 'url(/addons/amp_web/template/pingmu/img/4.png)', 'url(/addons/amp_web/template/pingmu/img/5.png)', 'url(/addons/amp_web/template/pingmu/img/6.png)', 'url(/addons/amp_web/template/pingmu/img/7.png)', 'url(/addons/amp_web/template/pingmu/img/8.png)'];
//创建许愿页
var createItem = function(text){
var color = colors[parseInt(Math.random() * 5, 10)]
$('<div class="item">'+ text +'</div>').css({ 'background': color }).appendTo(container).drag();
};
/*<a href="#">关闭</a>*/
// 定义拖拽函数
$.fn.drag = function () {
var $this = $(this);
var parent = $this.parent();
var pw = parent.width();
var ph = parent.height();
var thisWidth = $this.width() + parseInt($this.css('padding-left'), 10) + parseInt($this.css('padding-right'), 10);
var thisHeight = $this.height() + parseInt($this.css('padding-top'), 10) + parseInt($this.css('padding-bottom'), 10); var x, y, positionX, positionY;
var isDown = false;
$('#cv img').load(function() {
var ig = $(this).height();
var gaoa = $(window).height();
var gaob = gaoa-ig-20;
$('#container').css('height',gaob);
var h = $('#container').height();
var randY = parseInt(Math.random() * (h - thisHeight), 10); var randX = parseInt(Math.random() * (pw - thisWidth), 10);
parent.css({
"position": "relative",
"overflow": "hidden"
});
$this.css({
"cursor": "move",
"position": "absolute"
}).css({
top: randY,
left: randX
}).mousedown(function (e) {
parent.children().css({
"zIndex": "0"
});
$this.css({
"zIndex": "1"
});
isDown = true;
x = e.pageX;
y = e.pageY;
positionX = $this.position().left;
positionY = $this.position().top;
return false;
});
});
$(document).mouseup(function (e) {
isDown = false;
}).mousemove(function (e) {
var xPage = e.pageX;
var moveX = positionX + xPage - x; var yPage = e.pageY;
var moveY = positionY + yPage - y;
var h = $('#container').height();
var ch = h - thisHeight;
if (isDown == true) {
$this.css({
"left": moveX,
"top": moveY
});
} else {
return;
}
if (moveX < 0) {
$this.css({
"left": "0"
});
}
if (moveX > (pw - thisWidth)) {
$this.css({
"left": pw - thisWidth
});
}
if (moveY < 0) {
$this.css({
"top": "0"
});
}
if (moveY > ch) {
$this.css({
"top": ch
});
}
});
};
// 初始化
var init = function () {
container = $('#container');
// 绑定关闭事件
/*container.on('click','a',function () {
$(this).parent().remove();
}).height($(window).height() -204);*/
/* alert(1) */
/* function ajaxt(){ */
$.ajaxSettings.async = false;
var id = $('#shopids').val();
var url = $('#url').val();
var finid = $('#finid').val();
$.post(url , {id:id,finid:finid} , function(date){
if(date != 1){
$('#finid').val(date[0].finid)
/* alert($('#finid').val()) */
var str='';
$.each(date,function(k,v){
str+="'"+'<span class="zz"><span class="nc">'+v.openid+'</span><span class="sj">10:11:00</span></span><p>'+v.content+'</p>'+"',"
})
var basic = str.substr(0, str.length - 1);
var tests = "["+basic+"]";
var obj = eval('(' + tests + ')');
$.each(obj, function (i,v) {
createItem(v);
});
}
},'json')
$.ajaxSettings.async = true;
/* } */
/*超出部分...显示*/
$(document).ready(function() {
$('#container p').ellipsis({row: 7});
})
};
$(function() {
init();
});
setInterval(function() {
init();
}, 2000);
解决方案 »
免费领取超大流量手机卡,每月29元包185G流量+100分钟通话, 中国电信官方发货