效果图如下：

HTML代码如下：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

    .left,.right{

        position: fixed;

        top: 250px;

    }

    .left{

        left: 0;

    }

    .right{

        right: 0;

    }

    .left span,.right span{

        width: 20px;

        height: 20px;

        background: #ccc;

        font-size: 14px;

        color: #333;

        position: absolute;

        right: 0;

        top: 0;

        text-align: center;

        cursor: pointer;

    }

    </style>

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

    <script>

    $(function(){

        $('span').click(function(){

            $(this).parent().hide(500);

        });

    })

    </script>

</head>

<body>

    <div class="left"><img src="data:images/left.jpg" alt=""><span>X</span></div>

    <div class="right"><img src="data:images/right.jpg" alt=""><span>X</span></div>

</body>

</html>

　　

JQuery实现父级选择器(广告实现)的更多相关文章

  1. less-符号之逗号，空格，父级选择器

    Less符号 逗号 example: .test() { box-shadow+: inset 0 0 10px #555; } .study { .test(); box-shadow+: 0 0 ...

  2. 虚构 css 父级选择器

    能 CSS 解决的绝不用 JS,这句话又一次故作装逼地说出来还是挺爽的... 比如下拉列表,能用 CSS 的 :focus 就不用 JS 的 .on("focus blur") 能 ...

  3. [jQuery]相对父级元素的fixed定位

    (function($) {     var DNG = {};     //----------------------------------------------------/     // ...

  4. jquery的父级和兄弟级能做多少网页特效

    这里说的父级就是parent  兄弟级就是siblings 我这里说一个导航栏用到的特效 主要jquery代码$(this).parent().addClass(“active”).siblings( ...

  5. JQuery 获取父级元素、同级元素、子元素等

    例: <div> <div id="div_1">这是内容1</div> <div id="div_2">这是内 ...

  6. 转载：js和jquery获取父级元素、子级元素、兄弟元素的方法

    转载网址: 先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元 ...

  7. jQuery获取父级、兄弟节点的方法

    一.jQuery的父节点查找方法 $(selector).parent(selector):获取父节点 $(selector).parentNode:以node[]的形式存放父节点,如果没有父节点,则 ...

  8. js和jquery获取父级元素、子级元素、兄弟元素的方法{转}

    先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比 JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当成DOM元素   原生的 ...

  9. js和jquery获取父级元素、子级元素、兄弟元素的方法

    最近工作中总遇到取各种父啊子啊兄弟姐妹啊,每次都得查,这次整理个全乎的~ [js的获取方式] function dom(){      var a = document.getElementByIdx ...

随机推荐

  1. windows下curl的安装和简单使用

    curl是利用URL语法在命令行方式下工作的开源文件传输工具.它支持很多协议:FTP, FTPS, HTTP, HTTPS, GOPHER, TELNET, DICT, FILE 以及 LDAP. 一 ...

  2. 深入学习hbase：表，列族，列标识，版本和cell

    HBase是面向列的分布式的数据库,和传统的关系型数据库有很大的不同:物理模型和逻辑模型.这里我们要首先讲一下HBase数据库相关的区别于关系型数据库的几个基本概念:          表:HBase ...

  3. 解决navicate 连接mysql数据库中文乱码的问题

    以下均是ubuntu12.04为准 1.修改mysql的配置文件. 1.1.vi  /etc/mysql/my.conf找到[client]在其下面添加 default-character-set=u ...

  4. linux命令strings

    linux命令strings,其man信息如下:strings(1)                                        GNU Development Tools      ...

  5. CKEditor4.4.5 插入高度代码及上传图片

    1.首先准备所需要的插件 (1). CKEditor4.4.5  下载地址:http://ckeditor.com/download.如果不想下载直接引用CKEditor的CDN也是可以的.cdn地址 ...

  6. Object公用方法

    Object是所有类的父类,任何类都默认继承Object. Object类到底实现了哪些方法?   1．clone方法 保护方法,实现对象的浅复制,只有实现了Cloneable接口才可以调用该方法,否 ...

  7. msfconsole 控制台使用和操作

    msfconsole 参数 Msfconsole提供了一个一体化的集中控制台.通过msfconsole,你可以访问和使用所有的metasploit的插件,payload,利用模块,post模块等等.M ...

  8. SpringMVC快速入门

    导入开发包 前6个是Spring的核心功能包[IOC],第7个是关于web的包,第8个是SpringMVC包 org.springframework.context-3.0.5.RELEASE.jar ...

  9. 构建跨平台APP开发的两本书，这里重点推荐下

    第一本是<构建跨平台:jquery Mobile移动应用实战> 是目前jqm开发写的比较入门的一本书,上手很快,但是高手我觉得就没有必要学习了,因为写的比较浅显. 第二本是<构建跨平 ...

  10. [SVN]TortoiseSVN工具培训1─为什么要用SVN？

    你是否有经历过以下情况: SVN的使用理由/好处: