发布时间:2018-1-25 23:41
首先引入jquery:
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
js
<script type="text/javascript"> $(".close,.gb").click(function(){ $(".pic_box").animate({ 'top':'-1000px' },500); }), $(".my_box").click(function(){ $(".pic_box").animate({ 'top':'15px', },300); }), $(".queren").click(function(){ var src = $(".jide").val(); //$.ajax与index.php交互,在php中判断文件,保存至数据库即可 /*if(src != ""){ $.ajax({ url:"index.php", type:'post', data:{'imgsrc':src}, success:function(data){ $(".my_pic").attr('src',src); $(".pic_box").animate({ 'top':'-1000px' },500); console.log(data); } }) }else{ return false; }*/ /** * 后台我是用Thinkphp框架写的代码如下 $show=M('user')->getByusername($_SESSION['_username']); if(!empty($_POST['imgsrc'])){ $_POST['id']=$show['id']; $x=$info->create(); $res=$info->save(); if($res){ echo json_encode($_POST['imgsrc']); } } */ //效果展示,在服务器中把这一段删除,用上面那一段 if(src != ""){ $(".my_pic").attr('src',src); $(".pic_box").animate({ 'top':'-1000px' },500); }else{ return false; } }); var $box = document.getElementById('pic_box'); var $li = $box.getElementsByTagName('li'); var index = 0; for(var i=0;i<$li.length;i++){ $li[i].index=i; $li[i].onclick=function(){ $li[index].style.borderRadius="15%"; this.style.borderRadius="50%"; index = this.index; } } $(".pic_box li img").click(function(){ var src=$(this).attr("src"); $(".jide").val(src); }) </script>