给网站添加一个动态小人代码-蜡笔小新

给自己的网站加一个动态可点击的蜡笔小新的一个小人,为了防止用户无聊,让他多点点蜡笔小新,你可以换自己的GIF动态,喜欢什么自己换什么

代码部署

一共分为三个部分,JS代码,CSS代码,HTML代码,这三个部分放到一个HTML页面里面,然后其他页面引用,或者把他放到你的全局代码里面,比如header或者footer里面即可

CSS代码

/*QQ沐编程----蜡笔小新*/
.mumu {
width:80px;
height:80px;
cursor:move;
background:url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN019ne3h11QbIltvPjB8_!!2210123621994.gif) no-repeat;
}
.spig {
  display:block;
  width:150px;
  height:auto;
  position:absolute;
  top:-200px;
  left:160px;
  z-index:9999;
}
#newmessage{
  color:#191919;
  border:1px solid #c4c4c4;
  background:#ddd;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  min-height:1em;
  padding:5px;
  top:-30px;
  position:absolute;
  text-align:center;
  width:auto !important;
  z-index:10000;
  -moz-box-shadow:0 0 15px #eeeeee;
  -webkit-box-shadow:0 0 15px #eeeeee;
  border-color:#eeeeee;
  box-shadow:0 0 15px #eeeeee;
  outline:none;
}

JS代码

<!--蜡笔小新-->
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript">
var right_click = '你想干啥呀?';
var onoff_move = '1';
var touch_array = ["不要摸我",  "再摸我,我就杀掉你!", "干嘛老摸我啊?", "非礼呀!!!!!", "我可以告你性侵犯吗?", "色狼啊啊!"];
var bored_array = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "啦啦啦!!!", "我可爱吧!嘻嘻!~^_^!~~", "求抱抱,么么!!"];
var move_array = ["我在飞,啦啦啦啦!", "看,我在玩凌波微步!","快去凑热闹哦", "站住,不要跑!@_@", "围观去咯!", "跑不动啦!累死我了!"];
var over_array = ["我隐身了,你看不到我", "我会隐身哦!嘿嘿!", "别动手动脚的,把手拿开!", "把手拿开我才出来!", "真忍术隐!"];
var visitor = '欢迎光临';
//右键菜单
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage(right_click, 10000);
}
});
$("#spig").bind("contextmenu", function(e) {
    return false;
});
});

//鼠标在消息上时
jQuery(document).ready(function ($) {
    $("#newmessage").hover(function () {
       $("#newmessage").fadeTo("100", 1);
     });
});


//鼠标在上方时
jQuery(document).ready(function ($) {
    $(".mumu").mouseover(function () {
       $(".mumu").fadeTo("300", 0.3);
       //msgs = ["我隐身了,你看不到我", "我会隐身哦!嘿嘿!", "别动手动脚的,把手拿开!", "把手拿开我才出来!"];
       msgs = over_array;
	   var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i]);
    });
    $(".mumu").mouseout(function () {
        $(".mumu").fadeTo("300", 1)
    });
});

//开始
jQuery(document).ready(function ($) {
        var now = (new Date()).getHours();
        if (now > 0 && now <= 5) {
            showMessage(visitor + ' 夜猫还不睡觉,明天起的来么你?', 6000);
        } else if (now > 5 && now <= 6) {
            showMessage(visitor + ' 新的一天开始了哦!', 6000);
        } else if (now > 6 && now <= 10) {
            showMessage(visitor + ' 早上好,你是鸟儿还是虫儿?嘻嘻!', 6000);
        } else if (now > 10 && now <= 13) {
            showMessage(visitor + ' 中午了,吃饭了么?不要饿着唔!', 6000);
        } else if (now > 13 && now <= 16) {
            showMessage(visitor + ' 下午的时光真难熬!还好有你在!', 6000);
        } else if (now > 16 && now <= 17) {
            showMessage(visitor + ' 终于等到你了!', 6000);
        } else if (now > 21 && now <= 23) {
            showMessage(visitor + ' 夜深了,还不睡嘛?', 6000);
        } else {
            showMessage(visitor + ' 快来逗我玩吧!', 6000);
        }
    $(".spig").animate({
        top: $(".spig").offset().top + 300,
        left: document.body.offsetWidth - 160
    },
	{
	    queue: false,
	    duration: 1000
	});
});

//鼠标在某些元素上方时
jQuery(document).ready(function ($) {
    $('h2 a').click(function () {//标题被点击时
        showMessage('正在用吃奶的劲加载《<span style="color:#0099cc;">' + $(this).text() + '</span>》请稍候');
    });
	
	//移动到新发表的标题链接时
    $('.fl_by div a.xi2').mouseover(function () {
        showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》这篇主题么?');
    });
	
	//移动到评论框时
    $('#fastpostmessage').mouseover(function(){
        showMessage('说点什么吧!');
    });
	
	//移动到发表新主题的按钮时
    $('#newspecial').mouseover(function(){
        showMessage('发吧,发吧,发吧!');
    });
});


//无聊讲点什么
jQuery(document).ready(function ($) {

    window.setInterval(function () {
       // msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "…@……!………", "^%#&*!@*(&#)(!)(", "我可爱吧!嘻嘻!~^_^!~~","谁淫荡呀?~谁淫荡?,你淫荡呀!~~你淫荡!~~","从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];
        msgs = bored_array;
		var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i], 10000);
    }, 35000);
});

//无聊动动
jQuery(document).ready(function ($) {
    window.setInterval(function () {
        //msgs = ["乾坤大挪移!", "我飘过来了!~", "我飘过去了", "我得意地飘!~飘!~"];
        msgs = move_array;
        //判断是否开启左右移动
        if (onoff_move!=0){
    		var i = Math.floor(Math.random() * msgs.length);
            s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
            var i1 = Math.floor(Math.random() * s.length);
            var i2 = Math.floor(Math.random() * s.length);
                $(".spig").animate({
                left: document.body.offsetWidth/2*(1+s[i1]),
                top:  document.body.offsetHeight/2*(1+s[i1])
            },
    			{
    			    duration: 2000,
    			    complete: showMessage(msgs[i])
    			});
        }
    }, 45000);
});

//搜索的时候
jQuery(document).ready(function ($) {
    $("#scbar_txt").click(function () {
        showMessage('搜你想要的哦!');
        $(".spig").animate({
            top: $("#author").offset().top - 70,
            left: $("#author").offset().left - 170
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
});

var spig_top = 50;
//滚动条移动
jQuery(document).ready(function ($) {
    var f = $(".spig").offset().top;
    $(window).scroll(function () {
        $(".spig").animate({
            top: $(window).scrollTop() + f +300
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
});

//鼠标点击时
jQuery(document).ready(function ($) {
    var stat_click = 0;
    $(".mumu").click(function () {
        if (!ismove) {
            stat_click++;
            if (stat_click > 4) {
                msgs = ["你有完没完呀?", "你已经摸我" + stat_click + "次了", "非礼呀!救命!"];
                var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            } else {
                msgs = touch_array;
				var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            }
            //判断是否开启左右移动
            if (onoff_move!=0){
                s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
                var i1 = Math.floor(Math.random() * s.length);
                var i2 = Math.floor(Math.random() * s.length);
                    $(".spig").animate({
                    left: document.body.offsetWidth/2*(1+s[i1]),
                    top:  document.body.offsetHeight/2*(1+s[i1])
                    },
        			{
        			    duration: 500,
        			    complete: showMessage(msgs[i])
        			});
            }
        } else {
            ismove = false;
        }
    });
});
//显示消息函数 
function showMessage(a, b) {
    if (b == null) b = 10000;
    jQuery("#newmessage").hide().stop();
    jQuery("#newmessage").html(a);
    jQuery("#newmessage").fadeIn();
    jQuery("#newmessage").fadeTo("1", 1);
    jQuery("#newmessage").fadeOut(b);
};

//拖动
var _move = false;
var ismove = false; //移动标记
var _x, _y; //鼠标离控件左上角的相对位置
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        _move = true;
        _x = e.pageX - parseInt($("#spig").css("left"));
        _y = e.pageY - parseInt($("#spig").css("top"));
     });
    $(document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x; 
            var y = e.pageY - _y;
            var wx = $(window).width() - $('#spig').width();
            var dy = $(document).height() - $('#spig').height();
            if(x >= 0 && x <= wx && y > 0 && y <= dy) {
                $("#spig").css({
                    top: y,
                    left: x
                }); //控件新位置
            ismove = true;
            }
        }
    }).mouseup(function () {
        _move = false;
    });
});
</script>

HTML代码

<div id="spig" class="spig">
    <div id="newmessage">Loading...</div>
    <div id="mumu" class="mumu"></div>
</div>

效果预览

图片[1]-给网站添加一个动态小人代码-蜡笔小新-QQ沐编程

另外除了鼠标拖动,蜡笔小新也会一段时间自己移动的,源码由HTML+CSS+JS组成,适合所有web网站,喜欢的朋友拿去使用吧

测试代码

将三个部分代码放到一个HTML页面里面,然后电脑本地双击HTML文件即可查看效果,效果如上图,更多好看的特效代码可以搜索QQ沐编程,觉得有帮助的话可以CTRL+D收藏一下本站

<!DOCTYPE html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
/*-蜡笔小新*/
.mumu {
width:80px;
height:80px;
cursor:move;
background:url(https://img.alicdn.com/imgextra/i2/2210123621994/O1CN019ne3h11QbIltvPjB8_!!2210123621994.gif) no-repeat;
}
.spig {
  display:block;
  width:150px;
  height:auto;
  position:absolute;
  top:-200px;
  left:160px;
  z-index:9999;
}
#newmessage{
  color:#191919;
  border:1px solid #c4c4c4;
  background:#ddd;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  min-height:1em;
  padding:5px;
  top:-30px;
  position:absolute;
  text-align:center;
  width:auto !important;
  z-index:10000;
  -moz-box-shadow:0 0 15px #eeeeee;
  -webkit-box-shadow:0 0 15px #eeeeee;
  border-color:#eeeeee;
  box-shadow:0 0 15px #eeeeee;
  outline:none;
}
</style>
<!--蜡笔小新-->
<script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>



<script type="text/javascript">
var right_click = '你想干啥呀?';
var onoff_move = '1';
var touch_array = ["不要摸我",  "再摸我,我就杀掉你!", "干嘛老摸我啊?", "非礼呀!!!!!", "我可以告你性侵犯吗?", "色狼啊啊!"];
var bored_array = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "啦啦啦!!!", "我可爱吧!嘻嘻!~^_^!~~", "求抱抱,么么!!"];
var move_array = ["我在飞,啦啦啦啦!", "看,我在玩凌波微步!","快去凑热闹哦", "站住,不要跑!@_@", "围观去咯!", "跑不动啦!累死我了!"];
var over_array = ["我隐身了,你看不到我", "我会隐身哦!嘿嘿!", "别动手动脚的,把手拿开!", "把手拿开我才出来!", "真忍术隐!"];
var visitor = '欢迎光临';
//右键菜单
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        if(e.which==3){
        showMessage(right_click, 10000);
}
});
$("#spig").bind("contextmenu", function(e) {
    return false;
});
});

//鼠标在消息上时
jQuery(document).ready(function ($) {
    $("#newmessage").hover(function () {
       $("#newmessage").fadeTo("100", 1);
     });
});


//鼠标在上方时
jQuery(document).ready(function ($) {
    $(".mumu").mouseover(function () {
       $(".mumu").fadeTo("300", 0.3);
       //msgs = ["我隐身了,你看不到我", "我会隐身哦!嘿嘿!", "别动手动脚的,把手拿开!", "把手拿开我才出来!"];
       msgs = over_array;
	   var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i]);
    });
    $(".mumu").mouseout(function () {
        $(".mumu").fadeTo("300", 1)
    });
});

//开始
jQuery(document).ready(function ($) {
        var now = (new Date()).getHours();
        if (now > 0 && now <= 5) {
            showMessage(visitor + ' 夜猫还不睡觉,明天起的来么你?', 6000);
        } else if (now > 5 && now <= 6) {
            showMessage(visitor + ' 新的一天开始了哦!', 6000);
        } else if (now > 6 && now <= 10) {
            showMessage(visitor + ' 早上好,你是鸟儿还是虫儿?嘻嘻!', 6000);
        } else if (now > 10 && now <= 13) {
            showMessage(visitor + ' 中午了,吃饭了么?不要饿着唔!', 6000);
        } else if (now > 13 && now <= 16) {
            showMessage(visitor + ' 下午的时光真难熬!还好有你在!', 6000);
        } else if (now > 16 && now <= 17) {
            showMessage(visitor + ' 终于等到你了!', 6000);
        } else if (now > 21 && now <= 23) {
            showMessage(visitor + ' 夜深了,还不睡嘛?', 6000);
        } else {
            showMessage(visitor + ' 快来逗我玩吧!', 6000);
        }
    $(".spig").animate({
        top: $(".spig").offset().top + 300,
        left: document.body.offsetWidth - 160
    },
	{
	    queue: false,
	    duration: 1000
	});
});

//鼠标在某些元素上方时
jQuery(document).ready(function ($) {
    $('h2 a').click(function () {//标题被点击时
        showMessage('正在用吃奶的劲加载《<span style="color:#0099cc;">' + $(this).text() + '</span>》请稍候');
    });
	
	//移动到新发表的标题链接时
    $('.fl_by div a.xi2').mouseover(function () {
        showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》这篇主题么?');
    });
	
	//移动到评论框时
    $('#fastpostmessage').mouseover(function(){
        showMessage('说点什么吧!');
    });
	
	//移动到发表新主题的按钮时
    $('#newspecial').mouseover(function(){
        showMessage('发吧,发吧,发吧!');
    });
});


//无聊讲点什么
jQuery(document).ready(function ($) {

    window.setInterval(function () {
       // msgs = ["陪我聊天吧!", "好无聊哦,你都不陪我玩!", "…@……!………", "^%#&*!@*(&#)(!)(", "我可爱吧!嘻嘻!~^_^!~~","谁淫荡呀?~谁淫荡?,你淫荡呀!~~你淫荡!~~","从前有座山,山上有座庙,庙里有个老和尚给小和尚讲故事,讲:“从前有座……”"];
        msgs = bored_array;
		var i = Math.floor(Math.random() * msgs.length);
        showMessage(msgs[i], 10000);
    }, 35000);
});

//无聊动动
jQuery(document).ready(function ($) {
    window.setInterval(function () {
        //msgs = ["乾坤大挪移!", "我飘过来了!~", "我飘过去了", "我得意地飘!~飘!~"];
        msgs = move_array;
        //判断是否开启左右移动
        if (onoff_move!=0){
    		var i = Math.floor(Math.random() * msgs.length);
            s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
            var i1 = Math.floor(Math.random() * s.length);
            var i2 = Math.floor(Math.random() * s.length);
                $(".spig").animate({
                left: document.body.offsetWidth/2*(1+s[i1]),
                top:  document.body.offsetHeight/2*(1+s[i1])
            },
    			{
    			    duration: 2000,
    			    complete: showMessage(msgs[i])
    			});
        }
    }, 45000);
});

//搜索的时候
jQuery(document).ready(function ($) {
    $("#scbar_txt").click(function () {
        showMessage('搜你想要的哦!');
        $(".spig").animate({
            top: $("#author").offset().top - 70,
            left: $("#author").offset().left - 170
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
});

var spig_top = 50;
//滚动条移动
jQuery(document).ready(function ($) {
    var f = $(".spig").offset().top;
    $(window).scroll(function () {
        $(".spig").animate({
            top: $(window).scrollTop() + f +300
        },
		{
		    queue: false,
		    duration: 1000
		});
    });
});

//鼠标点击时
jQuery(document).ready(function ($) {
    var stat_click = 0;
    $(".mumu").click(function () {
        if (!ismove) {
            stat_click++;
            if (stat_click > 4) {
                msgs = ["你有完没完呀?", "你已经摸我" + stat_click + "次了", "非礼呀!救命!"];
                var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            } else {
                msgs = touch_array;
				var i = Math.floor(Math.random() * msgs.length);
                //showMessage(msgs[i]);
            }
            //判断是否开启左右移动
            if (onoff_move!=0){
                s = [0.1, 0.2, 0.3, 0.4, 0.5, 0.6,0.7,0.75,-0.1, -0.2, -0.3, -0.4, -0.5, -0.6,-0.7,-0.75];
                var i1 = Math.floor(Math.random() * s.length);
                var i2 = Math.floor(Math.random() * s.length);
                    $(".spig").animate({
                    left: document.body.offsetWidth/2*(1+s[i1]),
                    top:  document.body.offsetHeight/2*(1+s[i1])
                    },
        			{
        			    duration: 500,
        			    complete: showMessage(msgs[i])
        			});
            }
        } else {
            ismove = false;
        }
    });
});
//显示消息函数 
function showMessage(a, b) {
    if (b == null) b = 10000;
    jQuery("#newmessage").hide().stop();
    jQuery("#newmessage").html(a);
    jQuery("#newmessage").fadeIn();
    jQuery("#newmessage").fadeTo("1", 1);
    jQuery("#newmessage").fadeOut(b);
};

//拖动
var _move = false;
var ismove = false; //移动标记
var _x, _y; //鼠标离控件左上角的相对位置
jQuery(document).ready(function ($) {
    $("#spig").mousedown(function (e) {
        _move = true;
        _x = e.pageX - parseInt($("#spig").css("left"));
        _y = e.pageY - parseInt($("#spig").css("top"));
     });
    $(document).mousemove(function (e) {
        if (_move) {
            var x = e.pageX - _x; 
            var y = e.pageY - _y;
            var wx = $(window).width() - $('#spig').width();
            var dy = $(document).height() - $('#spig').height();
            if(x >= 0 && x <= wx && y > 0 && y <= dy) {
                $("#spig").css({
                    top: y,
                    left: x
                }); //控件新位置
            ismove = true;
            }
        }
    }).mouseup(function () {
        _move = false;
    });
});
</script>
</head>
<body>
    <h1 class="ilogo ititle">
      QQ沐编程 www.qqmu.com
    </h1>
	<div id="spig" class="spig">
    <div id="newmessage">Loading...</div>
    <div id="mumu" class="mumu"></div>
</div>
</body>
</html>

 

© 版权声明
THE END
喜欢就支持一下吧
点赞8赞赏 分享