效果图如下:

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. DEDE利用Ajax实现调用当前登录会员的信息简要说明

    其实这个功能在dede默认的模板上就有,只能算是在原有的功能上进行改造而已. 1.首先需要加载一个ajax的js文件进来 <script language="javascript&qu ...

  2. The twentieth day

    Knowledge is power 知识就是力量 You're unique,nothing can replace you.你举世无双,无人可以替代.

  3. canvas的arcTo API

  4. eclipse svn 环境搭建

    subversion 1.8.14(r1692801) eclipse 安装插件 1.10.x版本

  5. 《ArcGIS Runtime SDK for Android开发笔记》——问题集:.geodatabase创建,创建时内容缺失问题总结

    1.前言 利用ArcGIS桌面提供的share as -> ArcGIS Runtiem Content工具在导出.geodatabase文件时经常会发生数据缺失问题,比如数据表中数据有4w多条 ...

  6. 【工作中学习2】Map的使用及排序(第三个参数)

    项目进行中,使用到Map(std::map),Map要点整理如下: 1. Map,也叫关联数组,提供key/value(键/值对),key用来索引,value是被存储和检索的数据. 2. key值唯一 ...

  7. SQL Server2005修改计算机名后不能发布订阅

    在一台安装有SQL Server2005的计算机上,更改计算机名后,在发布订阅的时候提示如下错误报告: 由于需要需要配置一个发布订阅,可是一直报告:" sql server 复制需要有实际的 ...

  8. linux系统unzip文件报错的解决方案

    data.zip文件有4G多,解压的时候出问题了. Archive:  data.zip End-of-central-directorysignature not found.  Either th ...

  9. php读取mysql中文乱码

    连接mysql的文件: <?php /***************************** *数据库连接 *****************************/ $conn = @m ...

  10. 建堆复杂度O(n)证明

    堆排序中首先需要做的就是建堆,广为人知的是建堆复杂度才O(n),它的证明过程涉及到高等数学中的级数或者概率论,不过证明整体来讲是比较易懂的. 堆排过程 代码如下 void print(vector&l ...