CSS3图片拖拽碰撞感应特效js代码

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

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

以下是 CSS3图片拖拽碰撞感应特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>CSS3图片拖拽碰撞感应特效</title>
        <link rel="stylesheet" href="css/styles.css" />
        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <ul id="gallery">
        <li><a target="_blank" href="htttp://13141618.taobao.com"><img src="img/9ef5fa04570311e399171299608a0df3_6.jpg"></a></li>
		<li><a target="_blank" href="htttp://13141618.taobao.com"><img src="img/aa14d04a570311e385200ad71506ef7a_6.jpg"></a></li>
		<li><a target="_blank" href="htttp://13141618.taobao.com"><img src="img/f69f1674570211e3a1e712e06ab35897_6.jpg"></a></li>
		<li><a target="_blank" href="htttp://13141618.taobao.com"><img src="img/9cd61baa570311e39cba12cd8050d0e7_6.jpg"></a></li>
		<li><a target="_blank" href="htttp://13141618.taobao.com"><img src="img/23535d98570211e3b1a41225198f21ef_6.jpg"></a></li>
		<li><a target="_blank" href="htttp://13141618.taobao.com"><img src="img/2adde974570311e3a67212773ddcd17e_6.jpg"></a></li>
		</ul>
        
        <a href="#" id="gravityButton">开始</a>
        <!-- JavaScript includes -->
        <script src="js/jquery-1.8.2.min.js"></script>
        <script src="js/spectragram.min.js"></script>
        <script src="js/jGravity-min.js"></script>
        <script src="js/script.js"></script>
</body>
</html>

JS代码(script.js):

jQuery.fn.spectragram.accessData ={
	accessToken:'YOUR-ACCESS-TOKEN',clientID:'CLIENT-ID'}
;
	// Run a search about 'coffee' on instagram// and display the results$('#gallery').spectragram('getRecentTagged',{
	query:'coffee',max:6}
);
	$('#gravityButton').click(function(e){
	e.preventDefault();
	// Turn on the gravity!$('body').jGravity({
	target:'#gallery li',ignoreClass:'ignoreMe',weight:25,depth:5,drag:true}
);
	// Disabling clicking on the photos (so they can// be dragged without redirecting the browser)$('#gallery li').click(function(e){
	e.preventDefault()}
);
	// Remove some of the elements as they get in the way$('footer,#gravityButton').remove();
}
);

CSS代码(styles.css):

/*-------------------------Simple reset--------------------------*/
*{margin:0;padding:0;}
/*-------------------------General Page Styles--------------------------*/
html{background:url('../img/bg.png') #070707;position:relative;}
body{font:14px/1.3 'Segoe UI',Arial,sans-serif;height:100%;overflow:hidden;padding-bottom:10px;}
a,a:visited{text-decoration:none;outline:none;color:#54a6de;}
a:hover{text-decoration:underline;}
section,footer,nav{display:block;}
img{border:none;}
/*----------------------------The Gallery-----------------------------*/
h1{font:36px 'Cookie',cursive;color:white;width:210px;margin:20px auto 50px;white-space:nowrap;text-align:center;}
#gallery{width:500px;height:340px;overflow:hidden;margin:0 auto;}
#gallery li{list-style:none;float:left;margin:6px 8px;width:146px;height:146px;}
#gallery a{display:block;background-color:#fff;padding:3px;box-shadow:0 2px #7a7a7a;}
#gallery a img{display:block;width:140px;height:140px;}
#gravityButton{display:block;background:#8728d3;background:-moz-linear-gradient(top,#8728d3 0%,#461474 100%);background:-webkit-linear-gradient(top,#8728d3 0%,#461474 100%);background:-o-linear-gradient(top,#8728d3 0%,#461474 100%);background:linear-gradient(to bottom,#8728d3 0%,#461474 100%);color:#fff;font:22px 'Cookie',cursive;text-align:center;margin:25px auto 50px;width:120px;border-radius:3px;padding:10px;text-decoration:none !important;box-shadow:0 0 1px rgba(255,255,255,0.3) inset,0 1px 0 rgba(255,255,255,0.3) inset;text-shadow:1px 1px 0px rgba(40,40,40,0.6);opacity:0.9;}
#gravityButton:hover{opacity:1;}
/* This class is automatically added to the photos when the physics simulation starts */
.box2d a{/*box-shadow:none !important;*/
cursor:move;}
/*----------------------------The Footer-----------------------------*/
footer{background-color:#111111;bottom:0;box-shadow:0 -1px 2px #111111;height:45px;left:0;position:fixed;width:100%;z-index:100000;}
footer h2{color:#EEEEEE;font-size:14px;font-weight:normal;left:50%;margin-left:-400px;padding:13px 0 0;position:absolute;width:540px;}
footer h2 i{font-style:normal;color:#888;}
footer a.tzine,a.tzine:visited{color:#999999;font-size:12px;left:50%;margin:16px 0 0 110px;position:absolute;text-decoration:none;top:0;}
footer a i{color:#ccc;font-style:normal;}
footer a i b{color:#c92020;font-weight:normal;}

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