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. shell 版本号比较_用shell如何比较软件版本号的大小

    比如你想写个脚本来比较两个版本号 (如"1.2.30" 和"1.3.0")来辨认哪个版本是最新的,有可以比较两个版本号字符串的shell脚本吗? 当你写了一个s ...

  2. Mr. Young's Picture Permutations

    Mr. Young's Picture Permutations 给出一个有k列的网格图,以及每列图形的高度\(n_i\),下端对齐,保证高度递减,设有n个网格,询问向其中填1~n保证每行每列单调递增 ...

  3. Python---求100以内的质数

    1.首先什么是质数: 一个大于1的正整数,如果除了1和它本身以外,不能被其他正整数整除,就叫质数,也叫素数.如2,3,5,7,11,13,17…. 2.代码如下: 这里做个解析:①Python的for ...

  4. ElasticSearch _bulk批量处理报错The bulk request must be terminated by a newline

    在JSON数据最后回车换行,代码中可以

  5. @Component 和 @Bean 的区别

    Spring帮助我们管理Bean分为两个部分,一个是注册Bean,一个装配Bean.完成这两个动作有三种方式,一种是使用自动配置的方式.一种是使用JavaConfig的方式,一种就是使用XML配置的方 ...

  6. VS2012 TFS 解决计算机改名无法连接TFS的问题

      闲着没事改了下计算机名字,结果造成TFS无法连接. 报错讯息如下: ---------------------------Microsoft Visual Studio-------------- ...

  7. 不同浏览器Cookie有效期问题

    昨天项目迁移了测试服务器,之后奇怪的问题出现了. IE.谷歌无法登陆,火狐可以登陆. 这个项目先后部署过两个测试服务器.一台正式服务器,登陆都是正常的,这次却突然出现这种奇怪的问题,很是纠结. 通过查 ...

  8. 安装 adb centos 7

    打开 https://centos.pkgs.org/7/epel-x86_64/android-tools-20130123git98d0789-5.el7.x86_64.rpm.html 下载 r ...

  9. <数据库>MySQL的安装及安装中存在的问题

    无脑三连: 下载:https://dev.mysql.com/downloads/mysql/5.7.html#downloads 解压:任意目录 添加环境变量:WIN10步骤 我的电脑→属性→高级系 ...

  10. C++ 静态对象

    一:什么是静态对象?     对象的存储方式是静态的.        局部静态对象和类的静态对象.      局部静态对象:一个变量在函数内部定义,其生命周期跨越了该函数的多次调用.局部对象确保不迟于 ...