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. [JZOJ4649] 【NOIP2016提高A组模拟7.17】项链

    题目 描述 题目大意 给你一堆小串,每个小串都有一定的分数. 让你构造一个字符串,若子串中出现了之前的小串,就可以得到对应的分数(可以重复) 问最大分数. 思考历程 一看这题就知道是什么字符串方面的算 ...

  2. 2016.8.19上午初中部NOIP普及组比赛总结

    2016.8.19上午初中部NOIP普及组比赛总结 链接:https://jzoj.net/junior/#contest/home/1338 这次总结发得有点晚啊!我在这里解释一下, 因为浏览器的问 ...

  3. 并发和多线程(二)--启动和中断线程(Interrupt)的正确姿势

    启动线程: 从一个最基本的面试题开始,启动线程到底是start()还是run()? Runnable runnable = () -> System.out.println(Thread.cur ...

  4. C++ 判断是否为邮箱格式

    总结了一下合法的email地址格式如下: 1. 首字符必须用字母,而且其它的字符只能用26个大小写字母.0~9及_-.@符号 2. 必须包含一个并且只有一个符号“@” 3. @后必须包含至少一个至多三 ...

  5. php链表笔记:链表的检测

    <?php /** * Created by PhpStorm. * User: huizhou * Date: 2018/12/2 * Time: 11:48 */ /** * 链表的检测 * ...

  6. Consul 集群搭建

    搭建集群:.启动node1机器上的Consul (node1机器上执行) consul agent -data-dir /tmp/node1 -node=node1 -bind=192.168.0.1 ...

  7. jeecms v9 vue环境搭建

    一.安装NODEJS运行环境 前往nodejs官网下载nodejs,https://nodejs.org/en/ ,建议下载最新稳定版的,下载后安装即可,下载选择类似如下 安装完毕之后,在cmd中输入 ...

  8. Linux CentOS CapsLock 大小写反转问题 解决

    虚拟机centos7,输入大小写字母反了,开启capslock的时候变成小写字母了,关闭则变成大写了... 只需要执行 setleds +caps 或 setleds -caps 即可,如图:

  9. Vuejs之Component slot 插槽详解

    Vuejs的component的数据进行了沙箱隔离,除js全局变量如Math, Date之类外无法访问用户自定义的变量,所以使用component写组件或嵌套组件时明白变量的访问非常重要 编译作用域 ...

  10. linux与window文件传输(使用ssh+putty)

    linux与window文件传输(使用ssh+putty) https://blog.csdn.net/Imagine_Dragon/article/details/78303241