博客漂浮的小人
时间:2019-08-21
本文章向大家介绍博客漂浮的小人,主要包括博客漂浮的小人使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
css样式
.spig{ width:130px; height:170px; position:absolute; bottom: 300px; left:160px; z-index:99999; background:transparent } #message{ border: 1px solid #c4c4c4; border-radius:5px; min-height:1em; top:-45px; position:absolute; text-align:center; width:auto !important; z-index:90000; border-color:#eeeeee; box-shadow:0 0 15px #eeeeee; outline:none; } .mumu{width:130px;height:170px;cursor: move;background:url(http://images.cnblogs.com/cnblogs_com/gaoht/1257689/o_boy.png) no-repeat;}
js文件
//右键菜单 jQuery(document).ready(function ($) { $(document.body).append( `<div id="spig" class="spig"><div id="message">加载中……</div><div id="mumu" class="mumu"></div></div>` ); $("#spig").mousedown(function (e) { if (e.which == 3) { showMessage( "秘密通道:<br /> <a style='color: #5bf71d' href=\"https://github.com/ght5935\" title=\"gitHub\">gitHub</a> ", 10000); } }); $("#spig").bind("contextmenu", function (e) { return false; }); }); //鼠标在消息上时 jQuery(document).ready(function ($) { $("#message").hover(function () { $("#message").fadeTo("100", 1); }); }); // 文本复制提示 try { document.body.oncopy = function () { alert("复制成功!若要转载请务必保留原文链接,申明来源,谢谢合作!") } } catch (e) {} //鼠标在上方时 jQuery(document).ready(function ($) { $(".mumu").mouseover(function () { $(".mumu").fadeTo("300", 0.3); msgs = ["我隐身了,你看不到我", "我会隐身哦!嘿嘿!", "别动手动脚的,把手拿开!", "把手拿开我才出来!"]; var i = Math.floor(Math.random() * msgs.length); showMessage(msgs[i]); }); $(".mumu").mouseout(function () { $(".mumu").fadeTo("300", 1) }); }); //开始 var visitor = $('#tbCommentAuthor').val(); jQuery(document).ready(function ($) { if (visitor == 'echo丶若梦') { //如果是主页 isindex showMessage('主人你来啦...', 6000); } else { showMessage('欢迎' + visitor + '来到若梦博客阅读 ' + ' ', 6000); } var now = (new Date()).getHours(); if (now > 0 && now <= 6) { showMessage(visitor + ' 你是夜猫子呀?还不睡觉,明天起的来么你?', 6000); } else if (now > 6 && now <= 11) { showMessage(visitor + ' 早上好,早起的鸟儿有虫吃噢!早起的虫儿被鸟吃,你是鸟儿还是虫儿?嘻嘻!', 6000); } else if (now > 11 && now <= 14) { showMessage(visitor + ' 中午了,吃饭了么?不要饿着了,饿死了谁给我玩呀!', 6000); } else if (now > 14 && now <= 18) { showMessage(visitor + ' 真是忙碌的一个下午!还好有你在!', 6000); } else if (now > 18 && now <= 22) { 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 ($) { $('.postTitle a').click(function () { //标题被点击时 showMessage('正在用吃奶的劲加载《<span style="color:#0099cc;">' + $(this).text() + '</span>》请稍候'); }); $('.postTitle a').mouseover(function () { showMessage('要看看《<span style="color:#0099cc;">' + $(this).text() + '</span>》这篇文章么?'); }); $('.pager').mouseover(function () { showMessage('是要翻页了吗?'); }); $('#nav_next_page').mouseover(function () { showMessage('要翻到下一页吗?'); }); $('#sidebar_postcategory li a').mouseover(function () { showMessage('去 <span style="color:#0099cc;">' + $(this).text() + '</span> 逛逛'); }); $('.comment_textarea').mouseover(function () { showMessage('<span style="color:#0099cc;">' + visitor + '</span> 向评论栏出发吧!'); }); $('#btn_comment_submit').mouseover(function () { showMessage('确认提交了么?'); }); $('#sidebar_shortcut').mouseover(function () { showMessage('点击跳到想看的链接哈'); }); $('#sidebar_toptags').mouseover(function () { showMessage('点击查看此标签下的所有文章了'); }); $('#sidebar_categories').mouseover(function () { showMessage('点击查看此分类下得所有文章'); }); $('#sideCatalogBtn').mouseover(function () { showMessage('我是目录啊...'); }); $('#q').focus(function () { showMessage('输入你想搜索的关键词再按Enter(回车)键就可以搜索啦!'); $(".spig").animate({ top: $("#q").offset().top - 70, left: $("#q").offset().left - 170 }, { queue: false, duration: 1000 }); }); }); //无聊讲点什么 jQuery(document).ready(function ($) { window.setInterval(function () { msgs = ["我得意地飘!~飘!~", "看我筋斗云...哎呀,翻过了~~", "你抓不到我喔,你这个傻瓜!~"]; var i = Math.floor(Math.random() * msgs.length); showMessage(msgs[i], 10000); }, 35000); }); //无聊动动 jQuery(document).ready(function ($) { window.setInterval(function () { msgs = ["你是不是无聊呀!", "不和若梦玩了么~", "是不是不喜欢我呀...", "天行健君子...", "摸摸头,摸摸头...", ]; 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 ($) { $("#author").click(function () { showMessage("留下你的尊姓大名!"); $(".spig").animate({ top: $("#author").offset().top - 70, left: $("#author").offset().left - 170 }, { queue: false, duration: 1000 }); }); $("#email").click(function () { showMessage("留下你的邮箱,不然就是无头像人士了!"); $(".spig").animate({ top: $("#email").offset().top - 70, left: $("#email").offset().left - 170 }, { queue: false, duration: 1000 }); }); $("#url").click(function () { showMessage("快快告诉我你的家在哪里,好让我去参观参观!"); $(".spig").animate({ top: $("#url").offset().top - 70, left: $("#url").offset().left - 170 }, { queue: false, duration: 1000 }); }); $("#tbCommentBody").mouseover(function () { showMessage("认真填写哦!不然会被认作垃圾评论的!我的乖乖~"); $(".spig").animate({ top: $("#tbCommentBody").offset().top - 70, left: $("#tbCommentBody").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); } else { msgs = ["筋斗云!~我飞!", "别摸我,有什么好摸的!", "惹不起你,我还躲不起你么?", "不要摸我了,我会咬你你的! 哼哼", "喜欢我的话,就告诉我呀 ~~"]; 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: 500, complete: showMessage(msgs[i]) }); } else { ismove = false; } }); }); //显示消息函数 function showMessage(a, b) { if (b == null) b = 10000; jQuery("#message").hide().stop(); jQuery("#message").html(a); jQuery("#message").fadeIn(); jQuery("#message").fadeTo("1", 1); jQuery("#message").fadeOut(b); jQuery("#message").css({ "opacity": "0.5", "color": '#1fec0c', "background": '#333', "padding": '10px', "box-sizing": "border-box", "border-radius": '10px', "text-shadow": '1px 1px #3305f8' }); }; //拖动 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; }); }); (function ($) { $.fn.extend({ Scroll: function (opt, callback) { if (!opt) { var opt = {} } var _this = this.eq(0).find("ul:first"); var lineH = _this.find("li:first").height(), line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), speed = opt.speed ? parseInt(opt.speed, 10) : 7000, timer = opt.timer ? parseInt(opt.timer, 10) : 7000; if (line == 0) { line = 1 } var upHeight = 0 - line * lineH; scrollUp = function () { _this.animate({ marginTop: upHeight }, speed, function () { for (i = 1; i <= line; i++) { _this.find("li:first").appendTo(_this) } _this.css({ marginTop: 0 }) }) }; _this.hover(function () { clearInterval(timerID) }, function () { timerID = setInterval("scrollUp()", timer) }).mouseout() } }) })(jQuery); $(document).ready(function () { $(".bulletin").Scroll({ line: 1, speed: 1000, timer: 5000 }) }); try { if (window.console && window.console.log) { console.log("%c欢迎访问若梦的博客!", "color:green"); } } catch (e) {} var sweetTitles = { x: 10, y: 20, tipElements: "a", noTitle: true, init: function () { var noTitle = this.noTitle; $(this.tipElements).each(function () { // 获取所有的a标签console.log(this) $(this).mouseover(function (e) { if (noTitle) { isTitle = true } else { isTitle = $.trim(this.title) != "" } if (isTitle) { this.title = this.innerText; this.myTitle = this.title; this.myHref = this.href; this.myHref = (this.myHref.length > 30 ? this.myHref.toString().substring(0, 30) + "..." : this.myHref); this.title = ""; showMessage(this.myTitle) } }).mouseout(function () { if (this.myTitle != null) { this.title = this.myTitle; } }).mousemove(function (e) { }) }) } }; $(function () { sweetTitles.init() });
引入方式
js文件的所在位置
css部分可以 页面定制CSS代码
注: 如果按照上述操作,没有出来的小伙伴,请检查一下是否引入的有jq.
原文地址:https://www.cnblogs.com/gaoht/p/11388785.html
- Linux文件管理
- 为什么区块链会成为消除数字化营销障碍的解决方案
- TinyOS和Deluge的安装模拟(二)
- Kubernetes的服务网格(第4部分):通过流量切换持续部署
- QTableView表格视图的列宽设置
- OpenProcess打开进程返回错误的问题
- Python标准库01 正则表达式 (re包)
- 剑指OFFER之栈的压入、弹出序列(九度OJ1366)
- Python标准库03 路径与文件 (os.path包, glob包)
- AI人工智能时代已经到来 “北斗即时判”实现纯语音交互
- 剑指OFFER之链表中倒数第k个节点(九度OJ1517)
- 用Qt写软件系列四:定制个性化系统托盘菜单
- Linux简介与厂商版本
- 用Qt写软件系列三:一个简单的系统工具之界面美化
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 玩转Kotlin 彻底弄懂Lambda和高阶函数
- leetcode之仅仅反转字母
- 3分钟短文:Laravel的“南天门”,过滤掉七七八八的数据
- 【1024,Serverless】maimai_DX 查分器
- TRTC/MLVB/IM案例:SDK用户日志提取与管理的一种实现方案
- 从 1 到 0 构建博客项目(3) --LNMP--WordPress
- 4. Validator校验器的五大核心组件,一个都不能少
- leetcode之罗马数字转整数
- B站签到-云函数
- echarts常用功能封装|抽象为mixin
- TCB系列学习文章——云开发的云托管(八)
- TCB系列学习文章——云开发登录篇(九)
- 字符串操作的全面总结
- C 语言 C++ 中 assert 的用法
- kubernetes之StatefulSet控制器