网站左右折叠框:

<!DOCTYPE html>
<html>
<style>
#Kefclose,#Kefopen{position:absolute;left:-32px;top: %;display:block;width:32px;height: 100px;border-radius:15px 15px}
#Kefclose{background:url(../images/cclose.png) no-repeat center center #eee;background-size:20px;}
#Kefopen{background:url(../images/oopen.png) no-repeat center center #eee;background-size:20px;}
#Kefopen{display:none;}
</style>
<body>
<div id="online_qq_layer">
<a href="javascript:;" id="Kefclose"></a>
<a href="javascript:;" id="Kefopen"></a>
</div>
<script>
$(dunction(){
$("#Kefclose").click(function () {
$("#online_qq_layer").animate({
marginRight:"-144px" }, "slow",function(){
$("#Kefclose").hide();
$("#Kefopen").show();
}); });
$("#Kefopen").click(function () {
$("#online_qq_layer").animate({
marginRight:"-4px", display:"block" }, "slow", function () {
$("#Kefopen").hide();
$("#Kefclose").show();
}); });
});
</script>
</body>
</html>

效果:

      

jquery左右折叠框的更多相关文章

  1. jquery复选框 选中事件 及其判断是否被选中

    jquery复选框 选中事件 及其判断是否被选中 (2014-07-25 14:03:54) 转载▼ 标签: jquery复选框选中事件 分类: extjs jquery   今天做了 显示和不显示密 ...

  2. js/jquery获取文本框的值与改变文本框的值

    我们就用它来学习获取文本框的值及改变文本框的值. 代码如下 复制代码 <script>function get1(){ document.getElementById("txtb ...

  3. jquery获取文本框的内容

    使用jquery获取文本框的内容有以下几种: 1.根据ID取值(id属性): // javascript <script type="text/javascript"> ...

  4. jQuery清除文本框,内容并设置不可用

    JQuery清除文本框,内容并设置不可用  如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...

  5. jquery 展开折叠菜单

    jquery 展开折叠菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <ht ...

  6. 用Jquery控制文本框只能输入数字和字母

    用Jquery控制文本框只能输入数字和字母 $.fn.onlyNum = function () { $(this).keypress(function (event) { var eventObj ...

  7. jquery实现密码框显示提示文字

    jquery实现密码框提示文字的功能. 代码:    <html>  <head>   3 <title>登录-jquery实现密码框显示文字-www.jbxue. ...

  8. jQuery EasyUI 提示框(Messager)用法

    jQuery EasyUI 提示框(Messager)不仅强大,而且也不用任何的HTML代码,只需要按照<jQuery EasyUI框架使用文档>包含必要文件后,在$(function() ...

  9. Unity编辑器-创建单独编辑框,折叠框,提示框

    今天我们就来学习如何创建一个编辑框,上面绘制一个折叠框里面有四种消息框. 代码如下: using UnityEngine; using System.Collections; using UnityE ...

随机推荐

  1. Android 推送和统计最优轮循(心跳策略)探究实践

    http://blog.csdn.net/sk719887916/article/details/51398416 skay亲笔 Android开发中经常会用到周期性执行一个动作的需求,大的场景有推送 ...

  2. SSH深度历险(六) 深入浅出----- Spring事务配置的五种方式

    这对时间在学习SSH中Spring架构,Spring的事务配置做了详细总结,在此之间对Spring的事务配置只是停留在听说的阶段,总结一下,整体把控,通过这次的学习发觉Spring的事务配置只要把思路 ...

  3. 输入过滤器——InputFilter

    一般情况下我们通过请求体读取器InputStreamInputBuffer获取的仅仅是源数据,即未经过任何处理发送方发来的字节.但有些时候在这个读取的过程中希望做一些额外的处理,并且这些额外处理可能是 ...

  4. UNIX环境高级编程——线程属性

    pthread_attr_t 的缺省属性值 属性 值 结果 scope PTHREAD_SCOPE_PROCESS 新线程与进程中的其他线程发生竞争. detachstate PTHREAD_CREA ...

  5. Linux:ssh_config快速访问服务器

    在当前用户的根目录下: cd ~/.ssh vi config 编辑config内容为下面: ForwardAgent yes Host 1 Hostname 192.168.1.1 User roo ...

  6. (NO.00002)iOS游戏精灵战争雏形(九)

    打开MainScene.m,添加shoot方法: //子弹速度现在和目标距离相关,越近速度越慢,反之越快.应该修改为恒定速度. -(void)shoot:(CCNode*)player target: ...

  7. ubuntu 开发环境配置及安装 nodejs

    ubuntu 开发环境配置及安装 nodejs 1 安装nodejs $ sudo apt-get install build-essential $ sudo apt-get install gcc ...

  8. 跨平台移动APP开发进阶(二)HTML5+、mui开发移动app教程

    前端开发APP,从HBuilder开始~ 序 通过 HTML5 开发移动App 时,会发现HTML5 很多能力不具备.为弥补HTML5 能力的不足,在W3C 中国的指导下成立了www.HTML5Plu ...

  9. 高通 MSM8K bootloader : SBL1 .

    一. MSM8K Boot Flow 图1: 高通MSM8K平台bootloader启动流程基本类似,但具体各平台,比如MSM8974.MSM8916.MSM8994等,会有微小区别. 从上图,可以看 ...

  10. (二十六)静态单元格(Cell)

    制作类似iOS系统设置的页面,如果使用代码来实现,将会比较麻烦,可以通过静态单元格技术方便的实现. 注意:静态单元格只支持TableViewController. 可以通过storyboard直接操作 ...