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

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

 30728  360  查看评论 (9)
分享到微信朋友圈
X
仿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弹窗插件

支持拖拽,放大,缩小,最小化窗口的符合jquery语法规范的插件
  弹出层
 38328  330

jQuery多功能图片弹窗插件pirobox

点击图片列表中的图片会放大,并可以随意切换
  弹出层
 38086  380

超简单实用的弹窗jquery插件

兼容到ie8,简洁,实用,美观,可以自由更改弹窗样式。可以在弹窗中加上ajax请求的数据!
  弹出层
 99650  451

带动画效果jQuery+CSS3实现的弹出框弹出层效果

带动画效果jQuery+CSS3实现的弹出框弹出层效果
  弹出层
 90241  453

讨论这个项目(9)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    Kiki-demo 0
    2020/1/7 15:46:11
    这个网站换头像,用的就是这个 回复
    KL 0
    2019/6/27 17:14:20
    哲顿 0
    2018/11/26 10:06:11
    很棒 很漂亮 感谢 回复
    Leo 0
    2018/11/19 14:24:49

    做的很漂亮 简直天才 回复
    呆觉@ 0
    2018/2/6 15:14:28
    回复一下,是自己的问题,很好用的
    回复
    呆觉@ 0
    2018/2/6 11:47:20
    使用不了啊
        深渊0
        2018/2/25 9:41:42
        哪方面用不了
        【离线请留言】0
        2018/11/29 16:48:48
        点击换头像换不了
        深渊0
        2018/12/25 15:32:33
        能换啊,用谷歌浏览器试试,不应该不兼容的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复