<!--右侧效果-->

<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 网页 简单 右侧 悬浮的更多相关文章

  1. js css 实现简单的计算器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. js+css制作简单的轮播图带有定时功能

    用纯css和JavaScript代码制作带有定时轮播功能的轮播图 <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. JS+CSS+HTML简单计算器

    <!doctype html> <html> <head> <title>计算器</title> <meta charset=&quo ...

  4. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  5. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  6. html+css+js实现网页拼图游戏

    代码地址如下:http://www.demodashi.com/demo/14449.html 项目描述 使用 html+js+css 实现一个网页拼图游戏,可支持简单,中等,困难三种难度. 演示效果 ...

  7. 使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问)

    使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实 ...

  8. 纯CSS实现带返回顶部右侧悬浮菜单

    这是我做个人网页的时候加上的带返回顶部右侧悬浮菜单效果,如下图, 使用工具是Hbuilder. 代码如下: <!DOCTYPE html> <html> <head> ...

  9. #3使用html+css+js制作网页 番外篇 使用python flask 框架 (I)

    #3使用html+css+js制作网页 番外篇 使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

随机推荐

  1. ANT编译Android Eclipse工程

    将Android SDK的tools/和platform-tools/目录包含在可执行文件的搜索路径中.Windows下,将其添加到PATH环境变量中 切换到Android Eclipse项目目录下, ...

  2. Hibernate核心接口

    1.Configuration接口 Configuration负责管理Hibernate的配置信息. 2,SessionFactory接口 SessionFactory负责创建Session实例,能够 ...

  3. HashSet的排序

    import java.util.ArrayList; import java.util.Collections; import java.util.HashSet; import java.util ...

  4. 获取信息的有关Windows API(最有意思是OpenProcess和GetProcessMemoryInfo)

    1.窗口信息MS为我们提供了打开特定桌面和枚举桌面窗口的函数.hDesk = OpenDesktop(lpszDesktop, 0, FALSE, DESKTOP_ENUMERATE);// 打开我们 ...

  5. java中文排序问题(转)

    在Java中,对一个数组或列表(在本文中统称为集合)中的元素排序,是一个很经常的事情.好在Sun公司在Java库中实现了大部分功能.如果集合中的元素实现了Comparable接口,调用以下的静态(st ...

  6. 搭建实时同步data guard的最高可用-切换主备

    搭建实时同步data guard的最高可用-切换主备 首先保证主库在归档模式下:错过N次了 准备二台机器(hostname gw hosts ech0)host-only [root@node1 ~] ...

  7. poj 3623 Best Cow Line, Gold

    题目不算难,但是不认真想的话很容易wa,我就是wa了多次才意识到自己想法存在的缺陷. 相同的时候往后找知道出现不相同时,只能判断出当前字符的优先顺序. 这个题目如果朴素的按照这种方法做的话复杂度其实是 ...

  8. 一个计算器的C语言实现

    今天在读<编译原理及实践>时.看到了一个简单的整数计算器的实现. 依照书上的思路,我略微进行了扩展: 1.从整数计算器扩展到小数计算器. 2.支持除法 3.支持空字符. 执行效果例如以下: ...

  9. Swift - 标签条(UITabBar)标签页控制器(UITabBarController)用法

    App底部的tab标签页可以方便的把功能模块划分清楚,只需点击相应的标签页就可以展示完全独立的视图页面,同时各标签页间的视图也可以进行数据交换.   TabBarItem系统自带图标样式(System ...

  10. wiki 3143 二叉树的前序、中序及后序遍历

    先序遍历:訪问根.遍历左子树.遍历右子树,简称:DLR. 中序遍历:遍历左子树,訪问根,遍历右子树,简称:LDR. 后序遍历:遍历左子树,遍历右子树.訪问根.简称:LRD. 数组搞的: #pragma ...