屏幕左侧鼠标常驻,隐藏部分显示,文章鼠标常驻,隐藏部分隐藏(我的hexo next博客)
博客地址:https://mmmmmm.me
源码:https://github.com/dataiyangu?tab=repositories
如图
功能
最左侧添加透明的div长条,页面加载左侧三个小东西延迟两秒自动隐藏,之后开两个定时器,如果鼠标在透明div长条常驻1秒,三个小东西出现,如果鼠标在右侧文章上常驻1秒,三个小东西消失。
代码
<div class="hover_sidebar"> </div>
//hover 3 秒自动出现的盒子
.hover_sidebar{
width : 8px;
height: 666px;
//background-color : red ;
position : fixed;
left:0px;
bottom: 0px;
z-index: 10;
border-top-right-radius : 20px
border-bottom-right-radius :20px
}
// 为了将左侧的小乖乖们自动隐藏出现
function outArticle() {
$(".eye").animate({left: 0},
{duration:500, easing:"easeOutBounce",complete:function () {
}}
);
// $(".eye").css("left",0)
$(".header_left").animate({left: 0},
{duration:500, easing:"easeOutBounce",complete:function () {
}}
);
// $(".header_left").css("left",0)
$(".aplayer-body").animate({left: "-66px"},
{duration:80, easing:"easeOutBounce",complete:function () {
}}
);
// $(".aplayer-body").css("left","-66px")
}
function inArticle(){
$(".eye").animate({left: "-18px"},
{duration:500, easing:"easeOutBounce",complete:function () {
}}
);
// $(".eye").css("left","-18px")
$(".header_left").animate({left: "-18px"},
{duration:500, easing:"easeOutBounce",complete:function () {
}}
);
// $(".header_left").css("left","-18px")
if (($(".header_left").css("width")).indexOf("80")!= -1) {
$(".header_sidebar").click()
}
if ($(".eye1").css("display")=="block"){
$(".eye2").click()
}
if ($(".aplayer-body").css("left").indexOf("-84") == -1 | $(".aplayer-body").css("left").indexOf("-66") == -1){
if ($(".aplayer-narrow").length!=1){
$(".aplayer-miniswitcher").click()
$(".aplayer-body").animate({left: "-84px"},
{duration:80, easing:"easeOutBounce",complete:function () {
}}
);
// $(".aplayer-body").css("left","-84px")
}
}
$(".aplayer-body").animate({left: "-84px"},
{duration:80, easing:"easeOutBounce",complete:function () {
}}
);
// $(".aplayer-body").css("left","-84px")
}
function hover_sidebar() {
var out_id = 0;
$( ".hover_sidebar" ).hover( function() {
out_id = setTimeout( function() {
//当触发hover就开始自动在1秒后执行相应代码
outArticle()
}, 1000 );
}, function() {
clearTimeout( out_id );//当在1秒内退出了hover事件就取消计时代码
} );
var in_id = 0;
$( "#posts").hover( function() {
in_id = setTimeout( function() {
//当触发hover就开始自动在1秒后执行相应代码
inArticle()
}, 1000 );
}, function() {
clearTimeout( in_id );//当在1秒内退出了hover事件就取消计时代码
} );
}
hover_sidebar()
$(function () {
setTimeout(inArticle,2000)
});
屏幕左侧鼠标常驻,隐藏部分显示,文章鼠标常驻,隐藏部分隐藏(我的hexo next博客)的更多相关文章
- hexo个人博客添加宠物/鼠标点击效果/博客管理
1.添加宠物 博客宠物模型:https://github.com/xiazeyu/live2d-widget-models 模型对应的动画效果:https://huaji8.top/post/live ...
- Hexo+yilia博客首页不显示全文,显示more,截断文章。
个人主页:https://www.yuehan.online hexo new “xxx” 在md文档中 插入<!--more-->即可. 现在博客:www.wangyurui.top
- wdcp 打开网页显示 Apache 2 Test Page powered by CentOS -- 来自辉哥博客
是因为更新过系统,安装并更新了系统自带的apache 执行这个命令即可 #ln -sf /www/wdlinux/init.d/httpd /etc/rc.d/init.d/httpd#reboot ...
- 鼠标划过用户名时在鼠标右下角显示div展示用户资料
最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...
- easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现
easyui datagrid里的toobar按钮隐藏.显示.禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分 ...
- 如何在CSS中映射的鼠标位置,并实现通过鼠标移动控制页面元素效果
映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...
- django博客项目8:文章详情页
首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...
- 使用Word2010发布博客文章
发布博客可以直接在web页面上面编辑,也可以使用客户端编辑,其中客户端支持windows live writer以及word本身的发布博客功能.个人试用后倾向于使用word发布博客文章. 下面的内容转 ...
- HelloDjango 第 08 篇:开发博客文章详情页
作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...
随机推荐
- php中的list()
list()在php中上一个语言结构,并不是一个函数.类似array(),不过array()这个东西我们现在一般很少使用了,因为从php5.4版本开始,我们会直接使用[]来定义数组. 那么,list( ...
- ubuntu15.4、16.4、17.4设置nginx自启动
ubuntu15.4.16.4.17.4设置nginx自启动记录个小问题,备忘录.花了大半天的时间研究这个,网上大多ubuntu.centos的配置nginx开机自启的都是之前的 Upstart/Sy ...
- python:TypeError: main() takes 0 positional arguments but 1 was given
TypeError: main() takes 0 positional arguments but 1 was given def main(self): 括号里加上self就好了
- shell编程:expr的数学运算
运算符两种方式 方式一:expr $num1 operator $num2 方式二:$(($num1 operator $num2)) (方式二在运算符“=”时候会出错) 1+2.sh 这个代码有点问 ...
- MySQL数据库安装与启动(Linux)
1.用yum安装 用root权限打开命令行界面,执行以下yum指令: yum安装MySQL yum install mysql mysql-server mysql-devel -y 在最终提示Com ...
- 后端大佬给我配置的deploy serves文件以便学习
serves apiVersion: v1 kind: Service metadata: labels: com.wise2c.service: ui-ll-2 com.wise2c.stack: ...
- apache的commons-fileupload中FileItem类和ServletFileUpload
FileItem类的常用方法 1.boolean isFormField().isFormField方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段,还是一个文件表单字 ...
- linux基础重定向,用户,组,以及权限管理
一.重定向 标准输出standard output1>,>> 标准错误输出standard error output22>,2>> 标准输出设备::显示器 标准输入 ...
- 深入理解java虚拟机JVM(上)
深入理解java虚拟机JVM(上) 链接:https://pan.baidu.com/s/1c6pZjLeMQqc9t-OXvUM66w 提取码:uwak 复制这段内容后打开百度网盘手机App,操作更 ...
- Android项目中实现native调用
转载自搜狗测试公众号,本人学习使用,侵权删 最近小编在做公司输入法项目中java与native交互部分的测试,先简单学习了java代码调用native代码的实现原理,本次与大家一起分享jni协议,了解 ...