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. 如何将存储在MongoDB数据库中的数据导出到Excel中?

    将MongoDB数据库中的数据导出到Excel中,只需以下几个步骤: (1)首先,打开MongoDB安装目录下的bin文件夹,(C:\Program Files (x86)\MongoDB\Serve ...

  2. It's a Mod, Mod, Mod, Mod World (类欧几里得模板题

    https://vjudge.net/contest/317000#problem/F #include <iostream> #include <cstdio> #inclu ...

  3. [JZOJ5232] 【NOIP2017模拟A组模拟8.5】带权排序

    题目 题目大意 有一个数列AAA,数列上的每个数都是在[li,ri][l_i,r_i][li​,ri​]范围内随机的数. 将这个数列进行稳定排序,得到每个位置在排序后的排名pip_ipi​. f(A) ...

  4. E. Present for Vitalik the Philatelist 反演+容斥

    题意:给n个数\(a_i\),求选一个数x和一个集合S不重合,gcd(S)!=1,gcd(S,x)==1的方案数. 题解:\(ans=\sum_{i=2}^nf_ig_i\),\(f_i\)是数组中和 ...

  5. 微信公众号 SVG长按互动

    <section class="" style="display: block;width: 100%;height:667px;overflow:hidden;m ...

  6. PHP面向对象魔术方法基本了解

    简单介绍 (1) 魔术方法都是系统提供,程序员使用即可. (2) 所有的魔术方法,前面都是以  __ 开头的 _是两个下划线. (3) 我们在自定义函数时,就不要使用 __开头了. (4) 魔术方法是 ...

  7. 如何应用AxureRP做原型设计

    什么是原型呢?这个在之前介绍为什么需要进行原型设计当中有提到,原型是产品的最初形态,确认用户对产品界面和操作功能可用性的需求,高保真的原型接近于产品的最终形态,但仍只是原型.产品原型简单的说就是产品设 ...

  8. 【机器学习】机器学习入门08 - 聚类与聚类算法K-Means

    时间过得很快,这篇文章已经是机器学习入门系列的最后一篇了.短短八周的时间里,虽然对机器学习并没有太多应用和熟悉的机会,但对于机器学习一些基本概念已经差不多有了一个提纲挈领的了解,如分类和回归,损失函数 ...

  9. HBase 面向列的存储

  10. Css if hack条件语法

    Css if hack条件语法  <!--[if !IE]><!--> 除IE外都可识别 <!--<![endif]--><!--[if IE]> ...