JS CSS 网页 简单 右侧 悬浮
<!--右侧效果--> <script>
$().ready(function() {
$(".orm").hover(function() {
$(this).css("right", "-2px");
}, function() {
$(this).css("right", "-175px");
});
});
</script>
<div class="orm" style="position:absolute; z-index:1000; top:160px; right:-175px; background:url('./images/fxico.png');">
<span style="margin-left:80px;">与500家知名电商合作/span>
</div>
<div class="orm" style="position:absolute; z-index:1000; top:240px; right:-175px; background:url('./images/czico.png');">
<span style="margin-left:80px;">网上充值用皓诚放心</span>
</div>
<div class="orm" style="position:absolute; z-index:1000; top:320px; right:-175px; background:url('./images/lxico.png');">
<span style="margin-left:80px;">提供更专业的预定服务</span>
</div>
<div class="orm" style="position:absolute; z-index:1000; top:400px; right:-175px; background:url('./images/tgico.png');">
<span style="margin-left:80px;">餐饮娱乐,休闲酒店各种生活</span>
</div>
JS效果 页面固定 <style>
*{margin:0}
body{height:1000px;width:1000px;}
#a{width:300px;height:100px;background:red;}
</style>
<script>
var isie6 = window.XMLHttpRequest?false:true;
window.onload = function(){
var a = document.getElementById('a');
var d = document.getElementById('d');
if(isie6){
a.style.position = 'absolute';
window.onscroll = function(){
d.innerHTML = '';
}
}else{ a.style.position = 'fixed'; }
a.style.right = '0'; a.style.bottom = '0';
}
</script>
<div id='a'>测试</div>
JS CSS 网页 简单 右侧 悬浮的更多相关文章
- js css 实现简单的计算器
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js+css制作简单的轮播图带有定时功能
用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...
- JS+CSS+HTML简单计算器
<!doctype html> <html> <head> <title>计算器</title> <meta charset=&quo ...
- js+css实现简单下拉菜单
<head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- html+css+js实现网页拼图游戏
代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...
- 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)
使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...
- 纯CSS实现带返回顶部右侧悬浮菜单
这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...
- #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)
#3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...
随机推荐
- 我觉得主要靠积累,难度不是问题,主要靠时间积累,以及兴趣带来的学习能力(我觉得至少5年全职Qt开发经验,才能算精通)
顺便想请教一下,你用QT有几年了? 3年不到 那感觉怎么样?是比较难,还是不难但需要时间才能掌握全部? 很多东西真的要拿来做项目了,才会懂.要靠积累.一开始看看理论貌似都很简单. 但是QT和C++本身 ...
- java.util.Queue用法
队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列. 在队列这 ...
- HDU 5045(Contest-费用流)[template:费用流]
Contest Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others) Total Submi ...
- 14.2.2 InnoDB Multi-Versioning InnoDB 多版本
14.2.2 InnoDB Multi-Versioning InnoDB 多版本: InnoDB 是一个多版本的存储引擎: 它保留信息关于改变数据的老版本,为了支持事务功能 比如并发和回滚. 这些信 ...
- CF 327D - Block Tower 数学题 DFS 初看很难,想通了就感觉很简单
D. Block Tower time limit per test 2 seconds memory limit per test 256 megabytes input standard inpu ...
- 网站教学 提纲总结到ajax结束后面还有
Repeater - 重复器五个模板:HeaderTemplate - 在最上面,显示一次FooterTemplate - 最下面,显示一次ItemTemplate - 在中间,显示n次Alterna ...
- struts2 与 OGNL 表达式,jsp中 利用ognl 在valuestack中取值
在Struts2中,一个请求在终于到达Action的方法之前,Action对象本身会被压入ValueStack(实际上就是放到ValueStack的CompoundRoot中),所以Action对象是 ...
- iOS 开发百问(6)
61.警告"addexplicit braces to avoid dangling else" 所谓"危急的else"是相似这种代码: if(a== 10) ...
- 使用HashMap须要注意的事儿:不要暴露Map.entry给外部不可信代码Map.entrySet()
Map/HashMap是java中一种非经常常使用的数据结构,一般我们在应用中做的事情就是调用put向容器写入数据或者是get从容器读取数据. Map.entrySet()这种方法返回了键值对的集合, ...
- No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=arm64, VALID_ARCHS=armv7 armv7s)
问题: No architectures to compile for (ONLY_ACTIVE_ARCH=YES, active arch=arm64, VALID_ARCHS=armv7 armv ...