开发者社区> 古镇月影> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

html5 jquery 拼图游戏

简介: 引用:http://www.douban.com/note/159200656/ 研究方向 jquery html5 css3 豆瓣 body{line-height:1;width:960px;margin:0px auto;font-family:Arial, Helv...
+关注继续查看

引用:http://www.douban.com/note/159200656/

研究方向 jquery html5 css3

<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>豆瓣</title>
<style type="text/css">
body{line-height:1;width:960px;margin:0px auto;font-family:Arial, Helvetica, sans-serif;background-color:#660000;}
ul,ol,dl { list-style-type:none; }
table { border-collapse:collapse; border-spacing:0; }
em { font-style:normal; }
img { border:0; }
.clear { clear:both; overflow:hidden; font-size:0; height:0; line-height:0; }
.hidden { display:none; }
header{border:solid 2px #ccc;margin:10px;text-align:center;width:960px;height:100px;padding:10px;}
header h1{font-size:20px;}
fieldset{margin:10px 10px;float:right;width:285px;height:240px;}
.cls { width:100px; height:85px; float:left;z-index:1;}
article{border:2px #000 solid;padding:10px;margin:10px;width:960px;height:320px;clear:both;}
section{border:5px #000 solid;position:absolute;margin:10px;line-height:0px;width:600px;height:255px;}
.section2{border:5px #000 solid;position:relative;margin:10px;line-height:0px;width:600px;height:255px;margin:10px 70px;}
.tijiao{margin:0px 150px 50px 100px;}
.a{float:right;border-width:1px 0; border-color:#bbb; border-style:solid;}
.b{height:22px; border-width:0 1px; border-color:#bbb; border-style:solid; margin:0 -1px; background:#e3e3e3; position:relative; float:right;}
.c{line-height:10px; color:#; background:#f9f9f9; border-bottom:2px solid #eeeeee;}
.d{padding:0 8px; line-height:22px;font-size:16px; color:#000000; clear:both; margin-top:-12px; cursor:pointer;}
button,.btn {border:#666 1px solid;padding:2px;width:60px;filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#ffffff, EndColorStr=#ECE9D8);}
figure{border:2px #000 solid;padding:10px;margin:10px;width:960px;height:299px;clear:both;}				
</style>

</head>
<body>
<header> 
        <h1>玩拼图!赢大奖!</h1> 
		
</header>
  <div style="display:none"> 
		<audio id="sourcevid" autoplay="true" loop> 
			<source src="BigBuckBunny_640x360.mp4" type="audio/mp4"/> 
			<source src="BigBuckBunny_640x360.ogv" type="audio/ogg"/> 
		</audio> 
 </div> 
<article>
<section>
    		<a href="" title="Contra dolor" rel="external"><img src="p1.jpg" alt="" /></a>
</section>
     
     <fieldset>
	   <legend>游戏规则</legend>
				<p>
					1、玩家需要按左边给出的样品图片,拖动右下方的图片进行拼图<br/>
                    2、在限定时间内将拼图完成,则能观看电影,赢大奖<br/>
				</p>
	</fieldset> 
</article>
<article>
<div class="section2">	
<div class="cls" id="2"><img  src="2.jpg" /></div>
<div class="cls" id="3"><img  src="3.jpg" /></div>
<div class="cls" id="1"><img  src="1.jpg" /></div>
<div class="cls" id="5"><img  src="5.jpg" /></div>
<div class="cls" id="7"><img  src="7.jpg" /></div>
<div class="cls" id="9"><img  src="9.jpg" /></div>
<div class="cls" id="10"><img  src="10.jpg" /></div>
<div class="cls" id="16"><img  src="16.jpg" /></div>
<div class="cls" id="13"><img  src="13.jpg" /></div>
<div class="cls" id="11"><img  src="11.jpg" /></div>
<div class="cls" id="12"><img  src="12.jpg" /></div>
<div class="cls" id="14"><img  src="14.jpg" /></div>
<div class="cls" id="15"><img  src="15.jpg" /></div>
<div class="cls" id="17"><img  src="17.jpg" /></div>
<div class="cls" id="18"><img  src="18.jpg" /></div>
<div class="cls" id="4"><img  src="4.jpg" /></div>
<div class="cls" id="6"><img  src="6.jpg" /></div>
<div class="cls" id="8"><img  src="8.jpg" /></div>
</div>
<div class="tijiao">
<div class="a" onClick="fn_check()">
<div class="b">
   <div class="c">&nbsp;&nbsp;</div>
   <div class="d">提交</div>
</div>
</div>
</div>
<input id="btnSubmit" type="button" value="提交" onclick="fn_check()" class="btn" />
 
</article>

<script type="text/javascript" src="jquery-1.4.2.js"></script>
<script>

var $DragDom;
var $ReplaceDom;//定义两个全局变量 $表示全局变量
$(".cls").each(function(i, obj)
{
	$(this).attr('draggable', 'true');//定义可拖动
	$(this).bind("dragstart", function(e)//绑定开始时间
	{
		$DragDom = $(this);// 读取携带的参数到变量中去
		return true;
	});

	$(this).bind('dragover', function(ev) //绑定元素在目标元素中移动事件
	{
            ev.stopPropagation();
            ev.preventDefault();//把默认的事件去掉
            return false;
    });

	$(this).bind("drop", function(e)//绑定元素落在目标元素中事件
	{
		$ReplaceDom = $(this);读取落在目标元素的参数到变量中去
		
		fn_replace();		//replace
		fn_check();			//

	
		return false;
	});
});



function fn_replace()
{
	
	var drag_url = $DragDom.find("img:first").attr("src");//找到被拖元素的img的src
	var drag_id = $DragDom.attr("id");//  找到被拖元素第一个img的id
	var replace_url = $ReplaceDom.find("img:first").attr("src");//找到目标元素的img的src
	var replace_id = $ReplaceDom.attr("id");//  找到目标元素的img的src

	$ReplaceDom.find("img:first").attr("src", drag_url);//交换url
	$ReplaceDom.attr("id", drag_id);//交换id

	$DragDom.find("img:first").attr("src", replace_url);//交换url
	$DragDom.attr("id", replace_id);//交换url
};

function fn_check()
{
	var sort = true;//默认是排序的
	var div = [];//读取数组,读取每张图片到数组中去
	$(".cls").each(function(i, obj)
	{
		div.push($(obj));
	});

	for(var i=0; i<div.length; i++)//循环遍历
	{
		if(i + 1 != div[i].attr("id"))//因为id是1,i从0开始。。。
		{
			sort = false;
			break;
		};
	}

	if(sort == true)
	{
		alert("对了");
	}
	else
	{
		alert("错了");
	}
};
</script>

</body>
</html>

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
『jQuery』.html(),.text()和.val()的使用
『jQuery』.html(),.text()和.val()的使用 2013-04-21 10:25 by 我是文东, 8335 阅读, 0 评论, 收藏, 编辑 本节内容主要介绍的是如何使用jQuery中的.html(),.text()和.val()三种方法,用于读取,修改元素的html结构,元素的文本内容,以及表单元素的value值的方法。
929 0
Groundwork:响应式 HTML5,CSS & JavaScript 工具包
  Groundwork 是基于强大的 CSS 预处理器 Sass & Compass 的响应式 HTML5,CSS & JavaScript 工具包。使用 Groundwork,您可以快速构建 Web 应用程序。
520 0
HTML5实践 -- 如何使用css创建三角形,使用CSS3创建3d四面体
  今天读了篇关于如何使用css3创建3d四面体的文章,觉的相当不错,所以拿出来和大家分享一下。原文地址:http://www.paulrhayes.com/2010-10/css-tetrahedron/。
815 0
jquery的html,text,val
.html()用为读取和修改元素的HTML标签 .text()用来读取或修改元素的纯文本内容 .val()用来读取或修改表单元素的value值。 这三个方法功能上的对比 .html(),.text(),.val()三种方法都是用来读取选定元素的内容;只不过.html()是用来读取元素的HTML内容(包括其Html标签),.text()用来读取元素的纯文本内容,包括其后代元素,.val()是用来读取表单元素的"value"值。
706 0
jQuery中的.html() .text() .val() .attr()获取元素内容、值、属性
本文目录 1. 元素 2. 内容、值、属性 3. html() text() val() attr()用法
0 0
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
_HTML5期末大作业——HTML+CSS+JavaScript平遥古城旅游景点介绍(6页)
0 0
前端静态页面html5样式设置css页面渲染
前端静态页面html5样式设置css页面渲染
0 0
+关注
文章
问答
文章排行榜
最热
最新
相关电子书
更多
天猫 HTML5 互动技术实践
立即下载
FLINK在大规模实时无效广告流量检测中的应用
立即下载
《企业全面上云成功路径与实践》
立即下载