<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>修改CSS样式</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .c1,.c2,.c3{

            width: 100px;

            height: 100px;

            background-color: green;

        }

        .c2 {

            position: relative;

            top: 200px;

            left: 200px;

            background-color: red;

        }

        .c3 {

            position: absolute;

            left: 100px;

            top: 100px;

            background-color: blue;

        }

        .hide {

            display: none;

        }

        .c4 {

            width: 100px;

            height: 100px;

            background-color: #111111;

        }

    </style>

</head>

<body>

    <div class="c4 hide"></div>

    <p>小强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <p>er强</p>

    <div class="c4 hide"></div>

    <div class="c1 hide">我的div</div>

    <div class="c2">

        <div class="c3">我的div</div>

    </div>

    <script src="jquery-3.2.1.min.js"></script>

    <script>

        $("p").click(function () {

            // $(this).css("color","red");

            // $(this).css("font-size","30px");

            //修改多个样式,用字典键值对

            $(this).css({"color":"red","font-size":"30px"});

        });

        //相对最初的移动

        // $(".c1").offset();

        $(".c1").offset({top:100,left:100});

        //相对父标签的移动

        $(".c3").position();

        $(window).scroll(function () {

            if ($(window).scrollTop() > 100){

                $(".c4").removeClass("hide");

            }else {

                $(".c4").addClass("hide");

            }

        })

        $(".c4").click(function () {

            $(window).scrollTop(0)

        })

    </script>

</body>

</html>

　　

<jquery>滚动例子的更多相关文章

  1. Struts1+JQuery的例子

    Struts1+JQuery的例子 2014年2月10日 11:25 Struts1+JQuery+JSON/XML的例子 1.Struts+JQuery+XML struts-config.xml如 ...

  2. vue setTimeout用法 jquery滚动到某一个div的底部

    //vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...

  3. [转] Jquery滚动加载

    原文地址:http://hi.baidu.com/vipxiaofan/item/9eb927b795671f77254b0985 另外一个asp.net的例子:http://blog.csdn.ne ...

  4. jquery jQuery-File-Upload 例子

    网上jquery-file-upload的例子 都过于简单,在项目中这个插件经常使用,写个例子供参考. 下面介绍 用插件实现图片异步上传的代码. 1   比要的js一个都不能少,他们之间是有依赖关系的 ...

  5. Jquery小例子:全选按钮、加事件、挂事件；parent()语法；slideToggle()语法；animate()语法；元素的淡入淡出效果：fadeIn() 、fadeOut()、fadeToggle() 、fadeTo()；function(e):e包括事件源和时间数据;append() 方法

    function(e): 事件包括事件源和事件数据,事件源是指是谁触发的这个事件,谁就是事件源(div,按钮,span都可以是事件源),时间数据是指比如点击鼠标的事件中,事件数据就是指点击鼠标的左建或 ...

  6. ajax 源生，jquery封装 例子 相同哈哈

    http://hi.baidu.com/7636553/item/bbcf5fc93c8c950aac092f22 ajax使用回调函数的例子(原生代码和jquery代码) 一. ajax代码存在的问 ...

  7. jQuery 滚动动画简单版

    动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部< ...

  8. jquery dataTables例子

    https://datatables.net/examples/styling/bootstrap.html http://datatables.club/example/#styling http: ...

  9. 一个jquery ajax例子

    上次搞了个jquery的AutoComplete效果,感觉很久没写jquery了,趁热打铁,再找点东西练练手.这不,看了一下jquery手册,顺便写了一个小例子,源码我直接贴上来了.   1.新建一个 ...

随机推荐

  1. bzoj 2751

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=2751 稍微推一下就知道是每一位置可取的值的和乘起来 #include <iostrea ...

  2. thinkphp 上传安全

    网站的上传功能也是一个非常容易被攻击的入口,所以对上传功能的安全检查是尤其必要的. 大理石平台支架 系统提供的上传类Think\Upload提供了安全方面的支持,包括对文件后缀.文件类型.文件大小以及 ...

  3. CommandLineToArgvW调EXE传入参数【转载】

    #include <afxwin.h>  // TODO: add your code here LPWSTR *szArglist = NULL; ; szArglist = Comma ...

  4. IP总结

    网络层向上只提供无连接的.尽最大努力支付的数据报服务 IP地址,32位,分为两部分,网络和主机标示 IP地址分类: A类:0开头,1-8位为网络标示 B类:10开头,1-16位为网络标示 C类:110 ...

  5. Windows内存管理（1）--分配内核内存 和 使用链表

    1.      分配内核内存 Windows驱动程序使用的内存资源非常珍贵,分配内存时要尽量节约.和应用程序一样,局部变量是存放在栈空间中的.但栈空间不会像应用程序那么大,所以驱动程序不适合递归调用或 ...

  6. 查看framework版本

    cd %WINDIR%\Microsoft.NET\Framework\v4.0.30319 MSBuild /version

  7. Portainer Exec Container 失败解决方案

    近日,将portainer服务挂了个域名,然后用Nginx代理的时候发现不能attach容器了,经过搜索在issue 找到解决方案 1.修改Nginx config server { listen 8 ...

  8. （转）Python学习笔记（1）__name__变量

    Python使用缩进对齐组织代码的执行,所有没有缩进的代码,都会在载入时自动执行.每个文件(模块)都可以任意写一些没有缩进的代码,并在载入时自动执行.为了区分 主执行代码和被调用文件,Python引入 ...

  9. Tomcat下载部署及解决中文乱码显示

    一.下载 tomcat下载链接:https://tomcat.apache.org/ 1.进入tomcat官网后,我使用的是tomcat9,所以我选择tomcat9.然后点击core下的zip包下载. ...

  10. 剑指offer——28对称的二叉树

    题目描述 请实现一个函数,用来判断一颗二叉树是不是对称的.注意,如果一个二叉树同此二叉树的镜像是同样的,定义其为对称的.     题解: 使用正常前序遍历与反向的前序遍历进行比较结果即可,注意,需将空 ...