仿jquery插件官网头像更换(原创)

所属分类:UI,输入-弹出层,选择框

 5433  36  查看评论 (3)
仿jquery插件官网头像更换(原创) ie兼容8

使用方法

发布时间: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>
相关插件-弹出层,选择框

漂亮实用的提示框插件SweetAlert

漂亮实用的提示框插件SweetAlert
  弹出层
 29880  363

jQuery html5爆裂式登录效果

HTML5爆裂式关闭窗口动画登录模板,关闭窗口撕开动画效果。
  弹出层
 17982  200

移动端弹出层jquery插件简易

移动端弹出层jquery插件简易
  弹出层
 23041  35

一款简单实用的弹窗插件JMask(原创)

JMask是一款遮罩插件,其小巧灵活,在项目开发中方便实用。使用方式也特别简单,只需要引入一个js文件,该插件基于JQuery开发,所以使用之前需要引入JQuery文件。
  弹出层
 15340  76

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币

    呆觉@ 0
    2018/2/6 15:14:28
    回复一下,是自己的问题,很好用的
    回复
    呆觉@ 0
    2018/2/6 11:47:20
    使用不了啊
        深渊0
        2018/2/25 9:41:42
        哪方面用不了
    回复
取消回复