网页块级元素悬停效果的实现原理

1.什么是悬停

当推荐位DIV自出现在视野中后,始终悬浮停留在相对浏览器固定的某一位置,使该推荐位里的内容一直在视野中。

2 实例

http://t.dianping.com/deal/10752942

3 jQuery代码

$(document).ready(function(){
    var target = $(‘你想悬停的div‘);
    var positionTop = target.position().top; // 计算target距离文档原点的高度,所以target的父元素最好没有potision属性
    var positionLeft = target.position().left;
    $(window).scroll(function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop >= positionTop)
        {
            target.css({position:‘fixed‘,left:positionLeft,top:0}); // 当滚动距离大于positionTop时,将target的position改为fixed
        }
        else
        {
       target.css({position:‘static‘,left:positionLeft,top:positionTop}); // 当滚动距离小于postioinTop时,将target的position改为static
        }
    });
}); 

4 总结

上述代码只是我逆向反推的,我暂时也没找到国外优秀的类似jQuery插件。欢迎大家推荐类似的插件给大家。

时间: 2024-11-03 21:56:56

网页块级元素悬停效果的实现原理的相关文章

网页编程技术二(块级元素和行内标签)

1.块级元素 顾明思义,块级标签在网页中显示为块:块级标签一般独占一行,新的块级标签将从新的一行开始排列,它可以容纳其他块级元素和内联元素. 常见的会计标签: 1.1标题标签:<h1></h1> ~ <h6></h6>,从1级到6级每级标题的字体依次递减 1.2水平线标签:<hr/>,添加水平分隔线,让页面更容易区分段落:该标签是单个出现,不是成对出现: 1.3段落标签:<p></p>,使用段落标签区分段落,不同的段落之间

多个块级元素在水平方向占位置,实现在窗口变大变小的同时,四个图片依然会随之而动,从而显示响应式的效果

原理:块级元素想要在页面水平和垂直方向都居中:先让元素定位(绝对定位),然后水平方向上面:left=50%,margin-left=-(1/2*width) 垂直方向页面居中:top=50%,margin-top=-(1/2*height) 代码如下: <div class="footer_top">    <div class="footer_slogen">        <span class="one">

行内元素与块级元素的区分

块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义列表 <dt> 定义列表中的项目 <fieldset> 定义一个框架集 <form> 创建 HTML 表单 <h1> 定义最大的标题 <h2> 定义副标题 <h3> 定义标题 <h4> 定义标题 <h5&

行内元素和块级元素总结

块级元素<address> 定义地址<caption> 定义表格标题<dd> 定义列表中定义条目<div> 定义文档中的分区或节<dl> 定义列表<dt> 定义列表中的项目<fieldset> 定义一个框架集<form> 创建 HTML 表单<h1> 定义最大的标题<h2> 定义副标题<h3> 定义标题<h4> 定义标题<h5> 定义标题<h6&

块级元素和行内元素

块级元素和行内元素的区别 1.块级元素(block element)块级元素会独占一行,默认情况下宽度自动填满其父元素宽度.   行内元素(inline element)行内元素不会独占一行,相邻的行内元素会排在同一行.其宽度随内容的变化而变化. 2.块级元素是可以设置宽高,而行内元素不可以. 3.块级元素可以设置外边距(margin),内边距(padding).   行内元素水平方向的margin-left; margin-right; padding-left; padding-right;

关于行类元素与块级元素的一些搜集整理

标准文档流里面,块级元素具有以下特点: ①总是在新行上开始,占据一整行: ②高度,行高以及外边距和内边距都可控制: ③宽带始终是与浏览器宽度一样,与内容无关: ④它可以容纳内联元素和其他块元素. 行内元素的特点: ①和其他元素都在一行上: ②高,行高及外边距和内边距部分可改变: ③宽度只与内容有关: ④行内元素只能容纳文本或者其他行内元素. 不可以设置宽高,其宽度随着内容增加,高度随字体大小而改变,内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用,也可以设置内边界,但是内边界在

浅谈css(块级元素、行级元素、盒子模型)

一.块级元素的特点 1.默认显示在父标签的左上角 2.默认占满一行(占满整个文档流) 文档流是将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 二.行内元素(内联元素)的特点 1.大小受到文字区域的影响,不受到width.height影响. 2.行内元素不会独自占满一行. 例: 1 <div id="d1"> 2 这是块级元素 3 </div> 4 <span id="d2"> 5 这是行内元素 6 &

【html】行内元素,块级元素

1.每个元素都具有display属性,块级元素display属性一般为:block,而行内元素display属性一般为:inline. 2.块级元素独占一行,而行内元素排列在同一行,排列不下才换行.块级元素可以设置高度宽度:height,width.也可以设置行间距与行内距:margin,padding(都具有四个方向的边距效果),而行内元素在水平有效padding-left,padding-right,margin-left,margin-right ,竖直方向无效. 3.块级元素: 1 ad

行内元素与块级元素

一.行内元素与块级元素 块级元素列表 <address> 定义地址 <caption> 定义表格标题 <dd> 定义列表中定义条目 <div> 定义文档中的分区或节 <dl> 定义列表 <dt> 定义列表中的项目 <fieldset> 定义一个框架集 <form> 创建 HTML 表单 <h1> 定义最大的标题 <h2> 定义副标题 <h3> 定义标题 <h4>