CSS——轮播图中的箭头
注意事项：
1、定位中left权重比right高，top权重比bottom高
2、两个span标签嵌套在一个盒子中，将来显示隐藏只需要控制父盒子就行了
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 400px;
height: 300px;
border: 1px solid #ccc;
margin: 150px auto;
position: relative;
} .arrow {
display: none;
} span {
position: absolute;
top: 50%;
margin-top: -40px;
width: 30px;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 40px;
background: rgba(255, 198, 93, 0.3);
} .left{
left: 0px;
border-radius: 0 10px 10px 0;
}
.right {
right: 0px;
border-radius: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="box">
<div class="arrow">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
<script>
var divEle = document.getElementsByTagName("div")[0];
var arrEle = document.getElementsByTagName("div")[1];
divEle.onmouseover = function () {
arrEle.style.display = "block";
}
divEle.onmouseout = function () {
arrEle.style.display = "none";
} </script>
</body>
</html>
CSS——轮播图中的箭头的更多相关文章
- JS —— 轮播图中的缓动函数的封装
轮播图的根本其实就是缓动函数的封装,如果说轮播图是一辆跑动的汽车,那么缓动函数就是它的发动机,今天本文章就带大家由简入繁,封装属于自己的缓动函数~~ 我们从需求的角度开始,首先给出一个简单需求: 1. ...
- 微信小程序之swiper轮播图中的图片自适应高度
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
- css 纯css轮播图 示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 用 CSS 做轮播图
对于用 css 实现一个轮播图的缘由,是那时候刚开始接触前端,完全还不懂 js.但是有一个项目(就是一个用来应付面试的作品)需要做一个轮播的效果,当时第一反应就是用 css3 自定义动画 -webki ...
- 基于css制作轮播图的部分效果
在轮播图中,我们可以通过鼠标在特定位置上的滑动来实现元素背景的改变.通常在制作轮播图时,我们首先想到的是js中的交互.可是,如果我们无法使用js,只能单纯的靠css又该如何实现这一效果呢?下面,本人将 ...
- Bootstrap中手指控制轮播图切换
通过手指的滑动来控制轮播图中的图片内容的切换 // 1. 获取手指在轮播图元素上的一个滑动方向(左右) // 获取界面上的轮播图容器 var $carousels = $('.carousel'); ...
- 原生js实现轮播图
原生js实现轮播图 很多网站上都有轮播图,但找到一个系统讲解的却很难,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计 ...
- 使用原生js将轮播图组件化
代码地址如下:http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explor ...
- 2.bootstrap练习笔记-轮播图
bootstrap练习笔记-轮播图 1.要使用轮播图,首先要将其放在一个主div里面 设置id为myCaroysel class为carousel slide 设置id是标识这个div是轮播图,等到l ...
随机推荐
- Win32编程API 基础篇 -- 3.消息处理 根据英文教程翻译
消息处理 例子:窗口点击 好的,现在我们已经得到一个窗口了,但我们什么也做不了除了DefWindowProc()允许窗口大小被调整,最大最小化等...这不是很激动人心啊 在接下来的一小节中我将向你展示 ...
- 遇到很多次，要注意区分service调用，本地用户调用这些区别
WTSQueryUserToken返回1314 The WTSQueryUserToken function obtains the primary access token of the log ...
- [bzoj1574][Usaco2009 Jan]地震损坏Damage_dfs
地震损坏Damage bzoj-1574 Usaco-2009 Jan 题目大意:题目链接. 注释:略. 想法: 显然对于每一个report点,和它直接相连的点都不可能到达1.我们将它打上标记. 然后 ...
- AI小记-K近邻算法
K近邻算法和其他机器学习模型比,有个特点:即非参数化的局部模型. 其他机器学习模型一般都是基于训练数据,得出一般性知识,这些知识的表现是一个全局性模型的结构和参数.模型你和好了后,不再依赖训练数据,直 ...
- MyBatis3错误：Parameter 'id' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]或者Parameter '0' not found. Available parameters are [arg2, arg1, arg0, param3, param1, param2]
这个问题涉及到MyBatis3在使用select节点查询时传递多个参数的问题.问题分析如下: 1.如果是单个查询一般是这样配置: <select id="getUserArticles ...
- 矩阵覆盖，基本DP题目
https://www.nowcoder.net/practice/72a5a919508a4251859fb2cfb987a0e6?tpId=13&tqId=11163&tPage= ...
- 1. 少了一个PermMissingElem Find the missing element in a given permutation.
少了一个: package com.code; import java.util.Arrays; public class Test03_2 { public static int solution( ...
- WPF 有趣的动画效果
WPF 有趣的动画效果 这一次我要呈上一个简单的文章,关于给你的WPF apps加入美丽的光线动画,可是我对动画这东西可能有点入迷了. 实际上.我对动画如此的入迷,以至 ...
- Oracle 简单的列转行
需求是,统计每一个部门不同工种的薪水总和. SQL> select deptno,ename,job,sal from emp; DEPTNO ENAME JOB ...
- Wcf配置log4net
1.引用log4net dll文件 2.创建log4net.config文件并配置文件信息 <?xml version="1.0" encoding="utf-8& ...