网站左右折叠框：

<!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简易实战教程--第六话《开发一键锁屏应用2·完成》

    转载请注明出处:http://blog.csdn.net/qq_32059827/article/details/51885687点击打开链接 上一篇,初步开发了这个应用,功能都有了(见http:// ...

  2. 插件开发之360 DroidPlugin源码分析（一）初识

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52123450 DroidPlugin的是什么? 一种新的插件机制,一种免安装的运行机制 ...

  3. Linux上程序调试的基石(1)--ptrace

    引子: 1.在Linux系统中,进程状态除了我们所熟知的TASK_RUNNING,TASK_INTERRUPTIBLE,TASK_STOPPED等,还有一个TASK_TRACED.这表明这个进程处于什 ...

  4. Android的ImageView介绍-android学习之旅（二十二）

    ImageView简介 imageView继承于View,主要用于显示图片,凡是Drawable对象都可以用它显示. ImageView直接派生了ImageButton和ZoomButton等组件. ...

  5. HDFS追本溯源：体系架构详解

    Hadoop是一个开发和运行处理大规模数据的软件平台,是Apache的一个用Java语言实现开源软件框架,实现在大量计算机组成的集群中对海量数据进行分布式计算.用户可以在不了解分布式底层细节的情况下, ...

  6. 【Unity技巧】LOGO闪光效果

    写在前面 本文参考了风宇冲的博文,在按照这篇博文实现LOGO闪光时,发现了一些问题.最严重的就是背景无法透明,看上去背景始终是黑色的:其次就是各个变量的意义不是非常明确,调节起来不方便:而且在闪光条的 ...

  7. Android样式（style）和主题（theme）资源介绍-android学习之旅（五十六）

    样式(style)资源 代码示例 <?xml version="1.0" encoding="utf-8"?> <LinearLayout x ...

  8. MySQL创建视图和Union all的使用案例

     CREATE VIEW netcheck.cpu_mp AS (SELECT  cpu.ID AS id,  cpu.chanel_name AS chanel_name,  cpu.first ...

  9. IDEA中运行DirectKafkaWordCount程序

    1,将SPARK_HOME中的DirectKafkaWordCount程序复制到idea中. 2,由于在KafkaWordCount中已引入相关jar包,此步可略过 3,配置configuration ...

  10. TCP/IP入门(4) --应用层

    /** 本篇博客由汗青ZJF整理并发布, 转载请注明出处: http://blog.csdn.net/zjf280441589/article/category/1854365 */ TCP/IP中的 ...