所有质量和其他人的编码员都好!
我正在使用一个jquery脚本(作者:Marco Kuiper - www.marcofolio.net),它将图像随机放置在一个已定义的空间内。使用鼠标可以在屏幕上拖动图像,然后单击放大。
问题是当在iphone上查看页面时,无法拖动图像,因此如果任何图像重叠,则无法轻松点击和放大。我的想法是创建一个随机坐标数组,这些坐标至少是每个图像彼此远离的宽度,同时仍然适合封闭div的范围。图像都是相同的尺寸。创建该数组后,使用它的值来定位图像。
以下是放置图像的当前脚本:
$(".polaroid").each
(function ()
{
var tempVal = Math.round(Math.random());
if(tempVal == 1)
{ var rotDegrees = randomXToY(330, 360); } // rotate left
else
{ var rotDegrees = randomXToY(0, 30); } // rotate right
var position = $(this).parent().offset();
var wiw = $(this).parent().width(); // width of div enclosing object
var wih = $(this).parent().height(); // heiht of div enclosing object
var leftpos = Math.random()*(wiw - $(this).width()) + position.left;
var toppos = Math.random()*(wih - $(this).height()) + position.top;
var cssObj =
{
'left' : leftpos,
'top' : toppos,
'-webkit-transform' : 'rotate('+ rotDegrees +'deg)', // safari only
'-moz-transform' : 'rotate('+ rotDegrees +'deg)', // firefox only
'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
};
$(this).css(cssObj);
}
);
我的脚本技能还不够,所以任何帮助都会受到赞赏。
谢谢!
答案 0 :(得分:0)
我需要看看你的HTML和CSS来帮助网格布局,但是就javascript而言,如果随机旋转就足够了,你可以删除关于定位的位:
$(".polaroid").each
(function ()
{
var tempVal = Math.round(Math.random());
if(tempVal == 1)
{ var rotDegrees = randomXToY(330, 360); } // rotate left
else
{ var rotDegrees = randomXToY(0, 30); } // rotate right
var cssObj =
{
'-webkit-transform' : 'rotate('+ rotDegrees +'deg)', // safari only
'-moz-transform' : 'rotate('+ rotDegrees +'deg)', // firefox only
'tranform' : 'rotate('+ rotDegrees +'deg)' // if CSS3 is standard
};
$(this).css(cssObj);
}
);