文档章节

侧边栏跟屏

tianhuahua
 tianhuahua
发布于 2014/06/11 18:24
字数 683
阅读 30
收藏 0
点赞 0
评论 0
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
	width:100%;
	margin:0px;
}

ul {
list-style-type: none;
-webkit-margin-before: 0em;
-webkit-margin-after: 0em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
.top-400 {
	float:center;
	width:952px;
	height:992px;
	margin:auto;
	}
/*侧边栏滚动css*/
.bottom-kefu {
	float:left;
	position:absolute;
	width:123px;
	height:420px;
	top:200px;
	text-align:center;
	z-index:250;
	}
	
.bottom-kefu1 {
	position:fixed; 
	_position:absolute;
	top:200px;
	z-index:250;
	}
	
.youhui-2weima {
	float:left;
	width:119px;
	height:252px;
	padding:2px;
	background:URL(./image/youshi-2weimabg.png) no-repeat;
	}

.yh-2wei-content {
	float:left;
	text-align:center;
	background:#fff;
	border-radius: 5px;
	}

.youhui-2weima ul {
	width:100%;
	list-style:none;
	}
	
.yh-active {
	float:left;
	list-style:none;
	width:59px;
	height:20px;
	line-height:20px;
	padding-top:4px;
	font:12px Arial,宋体;
	color:#000;
	text-align:center;
	}	
	
.yh-normal {
	float:left;
	list-style:none;
	width:59px;
	height:20px;
	line-height:20px;
	padding-top:4px;
	font:12px Arial,宋体;
	color:#fff;
	background:URL(./image/ys-normalbg.png);
	text-align:center;
	}	
	
.youhui-2weima-content {
	float: left;
	width: 100px;
	height: 192px;
	text-align: center;
	padding-top: 14px;
	padding-left: 10px;
	padding-right: 8px;
	
	}
	
.twoweitu {
	float:left;
	width:100%;
	text-align:center;
	margin-bottom:10px;
	}
	
.twoweifont {
	float:left;
	width:100%;
	text-align:center;
	}
	
.font1 {
	display:block;
	width:100%;
	text-align:center;
	margin-bottom:4px;
	font:12px Arial,宋体;
	color:#245601;
	}
	
.font2 {
	display:block;
	width:100%;
	text-align:center;
	margin-bottom:4px;
	font:18px Arial,宋体;
	color:#245601;
	font-weight:600;
	}
	
.font3 {
	display:block;
	width:100%;
	text-align:center;
	font:12px Arial,宋体;
	color:#b2b2b2;
	font-weight:600;
	}
	
.font4 {
	font:12px Arial,宋体;
	color:#000;
	font-weight:600;
	}
	
.yh-close {
	float:left;
	width:100%;
	margin-top:4px;
	text-align:center;
	
	}

.yh-close a {
	font:12px Arial,宋体;
	color:#fff;
	}
	
.qq-kefu {
	float:left;
	width:100%;
	margin-top:14px;
	text-align:center;
	}
</style>

</head>
<script language="javascript" type="text/javascript" src="./jquery-1.8.3.min.js" ></script>
<body>
<div class="top-400">
	<img src="./image/400.jpg" />	
</div>
	
<div class="bottom-kefu" id="float">
	<div class="youhui-2weima" id="youhui-2weima">
		<div class="yh-2wei-content">
			<ul>
				<li id="weixin" class="yh-active" onmouseover="javascript:changeDiv('weixin',['weixin','youhui'],'yh');" >官方微信</li>
				<li id="youhui" class="yh-normal"  onmouseover="javascript:changeDiv('youhui',['weixin','youhui'],'yh');">最新优惠</li>
			</ul>
			<div class="youhui-2weima-content">
				<div id="weixin-content">
					<div class="twoweitu">
						<img src="./image/2weima.png" />
					</div>
					<div class="twoweifont">
						<span class="font1">关注万銮官方微信</span>
						<span class="font2">够惊喜</span>
						<span class="font3">扫一扫关注</span>
					</div>				
				</div>
				<div id="youhui-content" class="nodisplay">
					<span class="font4">最新优惠进行中。</span>
				</div>
			</div>
		</div>
		
		<div class="yh-close">
			<a href="" onclick="javascript:closeweixin();">关&nbsp;&nbsp;闭</a>
		</div>
	</div>
	<!-- end youhui-2weima -->
	<div class="qq-kefu">
		<a href="" target="_blank" ><img src="./image/qq.png"/></a>
	</div>
</div>
</body>
</html>
<script type="text/javascript">
//切换窗口
function changeDiv(arrobj,objarray,stylename){
	
	var len = objarray.length;
	for(var i=0;i<len;i++){
		if(objarray[i]== arrobj){
			$("#"+arrobj).attr("class",stylename+"-active");
			$("#"+arrobj+"-content").attr("class","display");
			//alert($("#"+arrobj).attr("className"));
		}else{
			$("#"+objarray[i]).attr("class",stylename+"-normal");
			$("#"+objarray[i]+"-content").attr("class","nodisplay");
		}
	}
}

 (function(){    
	 	var fleft = ($(".top-400").position().left)+1094;
	 	//alert(fleft);alert(document.body.clientWidth);
	    var oDiv=document.getElementById("float");
	    if(fleft >= document.body.clientWidth){
		    	fleft = document.body.clientWidth-125;//alert(fleft);
		    	fleft = fleft + "px";
				$("#float").css("left",fleft);
	    } 
	    else {
	    	fleft = ($(".top-400").position().left)+962;
	   		$("#float").css("left",fleft); 
	    }
	    var H=0,iE6;    
	    var Y=oDiv;    
	    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};    
	    iE6=window.ActiveXObject&&!window.XMLHttpRequest;    
	    if(!iE6){    
	        window.onscroll=function()    
	        {    
	        	
	            var s=document.body.scrollTop||document.documentElement.scrollTop;    
	            if(s>H){oDiv.className="bottom-kefu bottom-kefu1";if(iE6){oDiv.style.top=(s-H)+"px";}}    
	            else{oDiv.className="bottom-kefu";}        
	        };    
	    }    
	})();  
 
 $(window).resize(function(){    
	 	var fleft = ($(".top-400").position().left)+1094;
	    var oDiv=document.getElementById("float");
	    
	    if(fleft >= document.body.clientWidth){//alert(document.body.clientWidth);
	    	//fleft = document.body.clientWidth-213 + "px";//alert
	    	fleft = document.body.clientWidth-125;//alert(fleft);
		    	fleft = fleft + "px";
			$("#float").css("left",fleft);
	    }else {
	    	fleft = ($(".top-400").position().left)+962 + "px";
	   		$("#float").css("left",fleft); 
	    }
	    var H=0,iE6;    
	    var Y=oDiv;    
	    while(Y){H+=Y.offsetTop;Y=Y.offsetParent};    
	    iE6=window.ActiveXObject&&!window.XMLHttpRequest;    
	    if(!iE6){    
	        window.onscroll=function()    
	        {    
	        	
	            var s=document.body.scrollTop||document.documentElement.scrollTop;    
	            if(s>H){oDiv.className="bottom-kefu bottom-kefu1";if(iE6){oDiv.style.top=(s-H)+"px";}}    
	            else{oDiv.className="bottom-kefu";}        
	        };    
	    }    
	})();  
 function closeweixin(){
		$("#youhui-2weima").attr("class","nodisplay");
	 }
	</script>


© 著作权归作者所有

共有 人打赏支持
tianhuahua
粉丝 3
博文 19
码字总数 8749
作品 0
深圳
程序员
iView 发布后台管理系统 iview-admin,没错,它就是你想要的

简介 iView Admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData 前端可视化团队部分成员开发维护。iView Admin 遵守 iView 设计和开发约定,风格统一...

Aresn ⋅ 2017/10/18 ⋅ 0

aresn/iview-admin

iView Admin 当前版本:v1.2.0 更新日志 使用教程 在线访问 Install // install dependenciesnpm install Run Development npm run dev Production(Build) npm run build 简介   iView adm......

aresn ⋅ 2017/10/18 ⋅ 0

超实用!网站导航栏设计形式总结

导航对于一个网站来说,起到重要的引导作用。一个优秀的导航设计可以让用户快速的找到所需 ,让用户清晰明了的了解到网站的结构框架,起到重要的指引作用。下面跟大家分享下常用的几种网页导...

郑乔尹在旅游 ⋅ 2017/12/28 ⋅ 0

优化 GitHub 阅览体验的 Chrome 扩展--GayHub

为了进一步提高 GitHub 阅览体验这个小目标 ,让大家更方便的畅游 Github,因此诞生了 GayHub。 GayHub 是一款强大的 GitHub 的 Chrome 扩展 ,优化了 GitHub 的阅读体验。 主要功能一览 文件...

匿名 ⋅ 2017/09/27 ⋅ 4

D2admin

基于 和 的管理系统前端解决方案 功能 首屏加载等待动画 避免首次加载白屏尴尬 简约主题 每个插件和组件都配有介绍文档 图片资源 sketch 源文件( 可以在这个文件内重新生成所有图片资源 ) ...

FairyEver ⋅ 05/29 ⋅ 0

Sublime-text 3 快捷键

选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑) 跳转到相应的行 合并行(已选择需要合并的多行时) 选择整行(按住-继续选择下行) 光标移动至括号内开始或结束的...

4fun ⋅ 2016/01/13 ⋅ 0

iView 的后台管理系统模板--iView Admin

iView admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案 简介 iView admin 是基于 Vue.js,搭配使用 iView UI 组件库形成的一套后台集成解决方案,由 TalkingData ...

aresn ⋅ 2017/10/18 ⋅ 19

D2Admin 基于 vue.js 的管理系统前端解决方案

基于 和 的管理系统前端解决方案 项目地址 github.com/FairyEver/d… 欢迎大家一起维护 此项目适合作为模板使用,在使用前请先检查您不需要的功能,删除相关代码和依赖插件,以减少代码体积。...

FaryEver ⋅ 05/26 ⋅ 0

iOS 仿QQ侧边栏

iOS 仿QQ侧边栏 Harries Blog™2017-12-280 阅读 githttpIOGitHubAPIhttpsIDE 分析:QQ侧边栏都用了哪些手势,有哪些效果? QQ的主页是个 UI TabbarController,暂且称为MainVc左侧边缘添加的...

Harries Blog™ ⋅ 2017/12/28 ⋅ 0

新浪微博客户端--Aisen

说明 Aisen微博是新浪微博的第三方客户端,遵循Android Design,Holo主题风格,设计从界面简约清爽操作简单易用出发,力争为Android用户提供更好以及特别的微博体验。基于AisenForAndroid(A...

王dan ⋅ 2014/10/11 ⋅ 6

没有更多内容

加载失败,请刷新页面

加载更多

下一页

对于程序员的招聘问题,作为软件人的一些吐槽和建议

作为软件人,找工作有时候似乎挺苦逼的。 说真的,让我去掉前面这句中“似乎”二字吧。就是苦逼!很多人都曾抱怨处在招聘的一方很糟糕——我们没有任何可靠的方式来甄别会写代码并且写得好的...

老道士 ⋅ 29分钟前 ⋅ 0

HDFS原理学习

一、概述 1、 Hadoop整合了众多的文件系统,首先提供了一个高层的文件系统抽象org.apache.hadoop.fs.FileSystem。然后有各个文件系统的实现类。 2、Hadoop是JAVA编写的,不同文件系统之间的交...

cjxcloud ⋅ 33分钟前 ⋅ 0

Linux下MySQL表名不区分大小写的设置方法(抄袭别人的)

Linux下MySQL表名不区分大小写的设置方法 MySQL表名不区分大小写的设置方法 在用centox安装mysql后,把项目的数据库移植了过去,发现一些表的数据查不到,排查了一下问题,最后发现是表名的大...

随风而浮沉 ⋅ 38分钟前 ⋅ 0

ubuntu下安装宋体simsun

sudo cp simsun.ttc /usr/share/fonts cd /usr/share/fonts sudo chmod 644 simsun.ttc 更新字体缓存: 代码: sudo mkfontscale 代码: sudo mkfontdir 代码: sudo fc-cache -fsv 安装chrome扩......

wangxuwei ⋅ 40分钟前 ⋅ 0

利用 ssh 传输文件

Linux 下一般可以用 scp 命令通过 ssh 传送文件: #把服务器上的 /home/user/a.txt 发送到本机的 /var/www/local_dir 目录下scp username@servername:/home/user/a.txt /var/www/local_dir...

大灰狼时间 ⋅ 50分钟前 ⋅ 0

web3j教程:android和java程序员如何使用web3j开发区块链以太坊

如何使用web3j为Java应用或Android App增加以太坊区块链支持,本教程内容即涉及以太坊中的核心概念,例如账户管理包括账户的创建、钱包创建、交易转账,交易与状态、智能合约开发与交互、过滤...

智能合约 ⋅ 今天 ⋅ 0

web3j开发java或android以太坊智能合约快速入门

web3j简介 web3j是一个轻量级、高度模块化、响应式、类型安全的Java和Android类库提供丰富API,用于处理以太坊智能合约及与以太坊网络上的客户端(节点)进行集成。 可以通过它进行以太坊区块链...

笔阁 ⋅ 今天 ⋅ 0

一起读书《深入浅出nodejs》-异步I/O

异步I/O “异步”这个名词其实很早就诞生了,但它大规模流行却是在Web 2.0浪潮中,它伴随着AJAX的第一个A(Asynchronous)席卷了Web。 为什么要异步I/O 关于异步I/O为何在Node里如此重要,这与...

小草先森 ⋅ 今天 ⋅ 0

JVM各种问题

1、如果启动什么都不设,会怎样? 先来看一个命令 [root@localhost bin]# java -XX:+PrintCommandLineFlags -version -XX:InitialHeapSize=29899008 -XX:MaxHeapSize=478384128 -XX:+PrintCo......

算法之名 ⋅ 今天 ⋅ 0

SAS笔记-宏2

宏是一种文本,一般来说其编译是在程序执行之前。 宏变量的创建 %let语句 %let macro_variables = text; %let是常见的宏变量建立方式,其编译就在执行前。如下例中,想要宏变量test等于数据集...

tonorth123 ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部