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. UNIX环境高级编程------apue.h找不到

    运行1-3代码时,出现问题:apue.h 没有找到问题 1.去此网址下载源码: http://www.apuebook.com/code3e.html 压缩包名为:src.3e.tar.gz 2.解压 ...

  2. Python全栈开发:装饰器实例

    #!/usr/bin/env python # -*- coding;utf-8 -*- """ 1.将outer函数放入内存 2.遇见@ + 函数名,则将该函数转换为装 ...

  3. 动软DbHelperSQL

    using System; using System.Collections; using System.Data; using System.Data.SqlClient; using System ...

  4. Data Dependency

    https://en.wikipedia.org/wiki/Data_dependency (There’s some misleading expression on the flow/data d ...

  5. duilib教程之duilib入门简明教程1.前言

    关于duilib的介绍就不多讲了,一来不熟,二来小伙伴们想必已经对比了多个界面库,也无需赘述.下面进入正题:    不看广告看疗效! 已有众多知名公司采用duilib做为界面库,如华为网盘.PPS(P ...

  6. vue如何关闭sourceMap

    Vue打包后出现一些map文件的解决办法: 问题: 可能很多人在做vue项目打包,打包之后js中,会自动生成一些map文件,那我们怎么把它去掉不要呢? 1,运行  cnpm run build  开始 ...

  7. git 命令行(三)-删除文件

    在Git中,删除也是一个修改操作,我们实战一下,有一个多余的文件:src/common/Util2.js 我们需要删除这个文件, 一般情况下,你通常直接在文件管理器中把没用的文件删了,或者用 rm命令 ...

  8. <每日一题>题目10:求斐波拉契数列

    def func(x): m,n = 0,1 i = 0 while i < x: yield m m,n = n,m+n i += 1 fib = [] get_func = func(100 ...

  9. 【牛客挑战赛31D】 雷的打字机

    题目 首先看到这个出现长度至少为\(2\)的回文子串 这就等价于不能出现两个连续且相同的字符 于是我们用概率生成函数来搞 设\(g_i\)表示\(i\)次操作后游戏没有结束的概率,\(f_{i,j}\ ...

  10. Netty TCP粘包/拆包问题《二》

    1.DelimiterBasedFrameDecoder:是以分隔符作为结束标志进行解决粘包/拆包问题 代码: EchoClient:客户端 /* * Copyright 2012 The Netty ...