给自己的网站加一个动态可点击的蜡笔小新的一个小人,为了防止用户无聊,让他多点点蜡笔小新,你可以换自己的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>
效果预览
另外除了鼠标拖动,蜡笔小新也会一段时间自己移动的,源码由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