效果图如下：

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. eureka的一点细节

    第二部分粗略的过一遍,还是有些模糊,再来相对系统的看一下: ---------------------------------------------------------------------- ...

  2. apache配置多端口对应多个虚拟目录

    经常需要在本地调试网站,却又不喜欢在http://localhost/网站的文件夹名 且几个比较重要的项目我想直接用端口号以示区分,想达到的效果如下: http://localhost/ 默认80端口 ...

  3. pat1038. Recover the Smallest Number (30)

    1038. Recover the Smallest Number (30) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHE ...

  4. linux下追查线上问题常用命令

    (1)查占用cpu最多的进程方法一:核心指令:ps实际命令:ps H -eo pid,pcpu | sort -nk2 | tail执行效果如下:[work@test01 ~]$ ps H -eo p ...

  5. ssh设置别名

    通常我们在 Termianl 下用 ssh 链接远程主机的时候,每次都需要输入一长串的用户名加主机地址,是不是觉得很麻烦? 我们知道在 /etc/ssh/ 目录下通常都会有 ssh_config 和 ...

  6. Xtrareport二之固定数据绑定

    已经了解了XtraReport的初步用法,现在在进一步了解数据绑定 我们还是先不整高深的,先来个写死的,让我们的数据库可以通过报表呈现先 1. 准备 还在上节基础上,选中设计器report的page  ...

  7. 织梦channelartlist标签内使用currentstyle

    找到文件\include\taglib\channelartlist.lib.php 找到代码 $pv->Fields['typeurl'] = GetOneTypeUrlA($typeids[ ...

  8. 【工作】Proxy Server的优化 - 检测目标网站URL变化

    在工作中,我在组里负责一个Proxy(代理)的Module,这个Module是针对微软的Office 365的邮件门户OWA实现,工作起来后,用户访问Office 365 OWA,无需再输入Offic ...

  9. eclipse 中 添加 tomcat后，启动访问时出现404

    1.切换到 server view. 2.双击出问题的 Server,出现如下页面. 3.选中Server,右键,点击选项卡的 Publish,就能进行编辑. 4.Server path 选中第二项: ...

  10. 如何C#操作SQLite数据库

    或许有人之前在java开发中使用过SQLite,对它有些印象.在用Winform或Wpf开发小应用程序时,发现用SQLite数据库也是不错的.就像一个会员管理软件,开发完毕后,可以省去想sqlserv ...