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

查看演示立即下载

插件描述：一款简单实用的头像更换插件内附有ajax无刷新代码

使用方法

发布时间：2018-1-25 23:41

首先引入jquery:

1	`<script` `src="/"></script>`

<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>

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：类星球高科技旋转动画(原创)
下一个特效： jQuery滑块验证（原创）