文章目录

博客地址: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博客)的更多相关文章

  1. hexo个人博客添加宠物/鼠标点击效果/博客管理

    1.添加宠物 博客宠物模型:https://github.com/xiazeyu/live2d-widget-models 模型对应的动画效果:https://huaji8.top/post/live ...

  2. Hexo+yilia博客首页不显示全文,显示more,截断文章。

    个人主页:https://www.yuehan.online hexo new “xxx” 在md文档中 插入<!--more-->即可. 现在博客:www.wangyurui.top

  3. wdcp 打开网页显示 Apache 2 Test Page powered by CentOS -- 来自辉哥博客

    是因为更新过系统,安装并更新了系统自带的apache 执行这个命令即可 #ln -sf /www/wdlinux/init.d/httpd /etc/rc.d/init.d/httpd#reboot ...

  4. 鼠标划过用户名时在鼠标右下角显示div展示用户资料

    最近做一个网站论坛,为了方便会员之间相互了解,又不想再做一个页面展示用户资料,就想到了鼠标划过用户名时在鼠标右下角显示div展示用户资料这个效果, 这里要注意的该方法不是给每个用户名的旁边都绑定一个d ...

  5. easyui datagrid里的toobar按钮隐藏、显示、禁用等方式的实现

    easyui datagrid里的toobar按钮隐藏.显示.禁用等方式的实现 //隐藏第一个按钮 $('div.datagrid-toolbar a').eq(0).hide(); //隐藏第一条分 ...

  6. 如何在CSS中映射的鼠标位置,并实现通过鼠标移动控制页面元素效果

    映射鼠标位置或实现拖拽效果,我们可以在 JavaScript 中做到这一点.但实际上,在CSS中有更加简洁的方法,我们可以在不使用JavaScript 的情况下,仍然可以实现相同的功能! 只使用CSS ...

  7. django博客项目8:文章详情页

    首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按钮,应该跳转到文章的详情页面来阅读文章的详细内容.现在让我们来开发博客的详情页面,有了前面的基础,开发流程都是一样 ...

  8. 使用Word2010发布博客文章

    发布博客可以直接在web页面上面编辑,也可以使用客户端编辑,其中客户端支持windows live writer以及word本身的发布博客功能.个人试用后倾向于使用word发布博客文章. 下面的内容转 ...

  9. HelloDjango 第 08 篇:开发博客文章详情页

    作者:HelloGitHub-追梦人物 文中涉及的示例代码,已同步更新到 HelloGitHub-Team 仓库 首页展示的是所有文章的列表,当用户看到感兴趣的文章时,他点击文章的标题或者继续阅读的按 ...

随机推荐

  1. php中的list()

    list()在php中上一个语言结构,并不是一个函数.类似array(),不过array()这个东西我们现在一般很少使用了,因为从php5.4版本开始,我们会直接使用[]来定义数组. 那么,list( ...

  2. ubuntu15.4、16.4、17.4设置nginx自启动

    ubuntu15.4.16.4.17.4设置nginx自启动记录个小问题,备忘录.花了大半天的时间研究这个,网上大多ubuntu.centos的配置nginx开机自启的都是之前的 Upstart/Sy ...

  3. 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就好了

  4. shell编程:expr的数学运算

    运算符两种方式 方式一:expr $num1 operator $num2 方式二:$(($num1 operator $num2)) (方式二在运算符“=”时候会出错) 1+2.sh 这个代码有点问 ...

  5. MySQL数据库安装与启动(Linux)

    1.用yum安装 用root权限打开命令行界面,执行以下yum指令: yum安装MySQL yum install mysql mysql-server mysql-devel -y 在最终提示Com ...

  6. 后端大佬给我配置的deploy serves文件以便学习

    serves apiVersion: v1 kind: Service metadata: labels: com.wise2c.service: ui-ll-2 com.wise2c.stack: ...

  7. apache的commons-fileupload中FileItem类和ServletFileUpload

    FileItem类的常用方法      1.boolean  isFormField().isFormField方法用来判断FileItem对象里面封装的数据是一个普通文本表单字段,还是一个文件表单字 ...

  8. linux基础重定向,用户,组,以及权限管理

    一.重定向 标准输出standard output1>,>> 标准错误输出standard error output22>,2>> 标准输出设备::显示器 标准输入 ...

  9. 深入理解java虚拟机JVM(上)

    深入理解java虚拟机JVM(上) 链接:https://pan.baidu.com/s/1c6pZjLeMQqc9t-OXvUM66w 提取码:uwak 复制这段内容后打开百度网盘手机App,操作更 ...

  10. Android项目中实现native调用

    转载自搜狗测试公众号,本人学习使用,侵权删 最近小编在做公司输入法项目中java与native交互部分的测试,先简单学习了java代码调用native代码的实现原理,本次与大家一起分享jni协议,了解 ...