jQuery图片位置随机显示代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片位置随机显示代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<meta name="format-detection" content="telephone=no" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title>jQuery图片位置随机显示代码</title>
<link rel="stylesheet" href="c/index.css" media="all"/>
</head>
<body>
<div class="wrap">
	<div class="grab">
		<div class="grab-top"></div>
		<div class="grab-main">
			<div class="gold-juns" data-uid="1"></div>
		</div>
	</div>
</div>
<script type="text/javascript" src="j/lib/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="j/index.js"></script>
</body>
</html>

JS代码(index.js):

(function($){
	var ui ={
	$grabMain:$('.grab-main')}
;
	var oConfig = window.oPageConfig;
	var interval = null;
	var move = null;
	var oPage ={
	init:function(){
	this.view();
}
,view:function(){
	var self = this;
	var time = 1;
	var m = 0;
	var i = 0;
	var left1 = 0;
	move = setInterval(function(){
	if (i < 10){
	var left = Math.ceil(Math.random() * (9 - 0) + 0) * 65;
	var top = Math.ceil(Math.random() * (9 - 0) + 0) * 18;
	var shu = Math.ceil(Math.random() * (7 - 1) + 1);
	var cha = Math.abs(left - left1);
	if (cha >= 300){
	left = left;
	left1 = left;
}
else{
	if (left < 310){
	left = left + 300;
	left1 = left;
}
else{
	left = left - 300;
	left1 = left;
}
}
$("<div class='gold-juns' data-uid='1'>").css({
	'left':left,'top':top,'background-image':'url(i/' + shu + '.png)'}
).appendTo(ui.$grabMain);
	$('.gold-juns').eq(0).fadeOut(400);
	setTimeout(function(){
	$('.gold-juns').eq(0).remove();
}
,500) i++}
else{
}
}
,600)}
}
;
	oPage.init();
}
)($)

CSS代码(index.css):

@charset 'UTF-8';html{font-size:47%;zoom:1;}
body{overflow:hidden;height:100%;}
.grab-main{position:relative;width:780px;height:390px;background-color:#fff;-webkit-tap-highlight-color:rgba(255,0,0,0);}
.gold-juns{position:absolute;left:0px;top:0px;width:220px;height:225px;background-color:none;z-index:200;background-image:url(../i/1.png);background-repeat:no-repeat;background-position:center;}

附件:下载该文件资源,减少时间成本(增值服务)