1.侧边栏划出一个信息框

通常鼠标浮动侧边栏都会划出一个信息框,每个信息框距离侧边栏的距离是相等的,所以处理此问题的方法就是

量取信息框距离侧边栏的距离,信息框设置绝对定位,父元素设置相对定位之后,信息框就会相对于父元素的相对定位进行绝对定位,取父元素的width:100%,然后加上距离信息框距离侧边栏的距离,right: calc(100% + 30px);

2.查找当前直系父级的直系父级的同胞元素的孩子进行slideUp().

 $(this).parent().parent().siblings().find(".ul2").slideUp();
 
 

3.鼠标浮动下拉(stop()意为停止所有与当前无关的动画)

$('.navli ').hover(function () {
    $(this).find('.an_navxiala').stop().fadeIn();
},function(){
    $(this).find('.an_navxiala').stop().fadeOut();
})
 
 

4.鼠标滚动(右侧滚动条距离顶部的距离)

$(".navli").hover(function () {
    if ($(window).scrollTop() > $(".navbox").height()) {
 
}else{
 
}

h5+css3+Jq的更多相关文章

  1. h5、jq 移动端评论点攒功能

    h5.jq 移动端评论点攒功能 平时做的项目中大部分都会涉及到评论的功能,之前用angular写的项目,功能写起来很方便,但是对于一个单页来说,angular有点大材小用了,所有今天分享一个关于jq制 ...

  2. H5+CSS3知识点

    概要:CSS3美化样式.自定义字体图标.滤镜设置.CSS3选择器.transform2D转换.新增表单控件.vaild表单验证.表单样式美化等. 属性选择器: E[attr]只使用属性名,但没有确定任 ...

  3. html 布局;css3+jq 下拉菜单;table分页动态添加行;html5本地存储;简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  4. 什么是CSS盒模型及利用CSS对HTML元素进行定位的实现(含h5/css3新增属性)

    大家好,很高兴又跟大家见面了!本周更新博主将给大家带来更精彩的HTML5技术分享,通过本周的学习,可实现大部分的网页制作.以下为本次更新内容. 第四章 css盒模型 <!DOCTYPE html ...

  5. H5+CSS3简单动画 知识点 汇总

    乱入几个:  1.h5的一个语义化标签   figure :用于规定独立的流内容(图像 图表 照片 代码等)   figcapition:与figure配套使用,用于标签定义figure元素标题 2. ...

  6. h5&css3

    HTML5 HTML5简介 万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.作为新HTML语言,具有新的元素,属性和行为 它具有更大的技术集,允许更多样化和强 ...

  7. H5+CSS3做图片轮播滚动效果

    HTML代码部分: <div id="wrap"> <ul id="list"> <li>10</li> < ...

  8. H5+CSS3实现手指滑动切换图片

    包含3个文件:html.slider-H5.js.jquery.js(自行下载).在html中可配置滑动参数.具体代码如下: HTML代码: <!DOCTYPE HTML> <htm ...

  9. 关于H5+css3的一些简单知识

    最近在一个群里看到,有人在探讨H5,也看到自己关注的大神使用过H5的画布(canvas),于是心血来潮,看了点教程,也算对的起自己吧. 一.H5的新特性: 1.用于绘画的canvas元素 2.用于媒介 ...

随机推荐

  1. MySQL系列(十二)--如何设计一个关系型数据库(基本思路)

    设计一个关系型数据库,也就是设计RDBMS(Relational Database Management System),这个问题考验的是对RDBMS各个模块的划分, 以及对数据库结构的了解.只要讲述 ...

  2. Eclipse连接android模拟器

    1.打开eclipse 2.打开MuMu模拟器 3.去到MuMu模拟器 adb_server.exe 文件所在目录:(我的:I:\Android\mumu\emulator\nemu\vmonitor ...

  3. 二分图匹配——poj1469

    关于本题二分图的匹配关系始终是加单向边用左边去匹配右边,match表示的是右边的人匹配的对应的左边的点 /* 关于本题二分图的匹配 链接的关系始终是单向边 用左边去匹配右边,match表示的是右边的人 ...

  4. pb_ds(平板电视)简介

    据说NOI赛制可以用pbds,故整理常用方法: 1.splay 所需声明及头文件: #include <ext/pb_ds/tree_policy.hpp> #include <ex ...

  5. Spring中的Junit

    Spring中的Junit package com.imooc.test.base; import org.junit.After; import org.junit.Before; import o ...

  6. Docker系列(十三):Kubernetes Service的负载均衡和网络路由的秘密

    Kubernetes Service设计分析 什么是单体程序?所有的模块都在一个进程中 微服务,每一个服务是一个进程的模式 kubernetes中的service其实只是一个概念,是一组相同lable ...

  7. Hack Tools

    Tools 2011-03-17 13:54:36|  分类: Security|举报|字号 订阅     Packet Shaper:Nemesis: a command line packet s ...

  8. PKU--2184 Cow Exhibition (01背包)

    题目http://poj.org/problem?id=2184 分析:给定N头牛,每头牛都有各自的Si和Fi 从这N头牛选出一定的数目,使得这些牛的 Si和Fi之和TS和TF都有TS>=0 F ...

  9. c# asp.net 修改webconfig文件 配置

    #region 修改config文件 /// <summary> /// 修改config文件(AppSetting节点) /// </summary> /// <par ...

  10. 动态规划——DP算法(Dynamic Programing)

    一.斐波那契数列(递归VS动态规划) 1.斐波那契数列——递归实现(python语言)——自顶向下 递归调用是非常耗费内存的,程序虽然简洁可是算法复杂度为O(2^n),当n很大时,程序运行很慢,甚至内 ...