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

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

 2147  21  查看评论 (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>
相关插件-弹出层,选择框

jquery网站功能介绍步骤

网站功能介绍步骤,可以引导用户该怎么操作,或者应该做什么
  弹出层
 15208  135

漂亮实用的提示框插件SweetAlert

漂亮实用的提示框插件SweetAlert
  弹出层
 26983  346

jquery鼠标悬停滑动切换特效

jquery鼠标悬停滑动切换特效
  弹出层
 9684  82

四种简单弹窗 — 自己配置弹窗

四种弹出方式,可以非常简单的通过修改css来定义自己喜欢的样式。
  弹出层
 21125  107

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

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