简单的从左侧展开层,转场效果

<!DOCTYPE html>

<html>

<head lang="en">

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black">

<title></title>

<script src="/jquery-1.9.1.js"></script>

<style>

html,body{ margin: 0px;  padding: 0px;}         .

new_show_box{             width: 100%;             height: 100vh;             position: fixed;             overflow-y: scroll;             -webkit-overflow-scrolling: touch;             top:0;             left:100%;             background-color: #c8c8c8 !important;             z-index: 99;         }

</style>

<script>

$(function(){

$(".gohitory").click(function () {

$(‘.new_show_box‘).animate({left:"0%"});

})

$(".gohitory1").click(function () {

$(‘.new_show_box‘).animate({left:"100%"},300);

})

})

</script>

</head>

<body>

<a href="#" class="gohitory">展开</a>

<div class="new_show_box">

<a href="#" class="gohitory1">缩进</a>  </div>

</body>

</html>

时间: 2024-10-06 11:52:34

简单的从左侧展开层,转场效果的相关文章

简单理解四层和七层负载均衡的区别

先提下我们所说的四层,七层,大家都知道我们网络七层协议(OSI):7:应用层.6:表示层.5:会话层.4:传输层.3:网络层.2:数据链路层.1:物理层. 应用层(Application Layer) 与其它计算机进行通讯的一个应用,它是对应应用程序的通信服务的.例如,一个没有通信功能的字处理程序就不能执行通信的代码,从事字处理工 作的程序员也不关心OSI的第7层.但是,如果添加了一个传输文件的选项,那么字处理器的程序员就需要实现OSI的第7层.示 例:telnet,HTTP,FTP,NFS,S

简单的jquery左侧导航栏和页面选中效果

这里是要实现导航的左侧并选中的,此功能需引用jquery 效果: 左侧导航 <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow">衬衫</a> <ul class="level2">

简单js 切换左侧栏目的样式

这是html代码,里面写了left.html <div id='mydiv'> <a class='qwe'>1</a> <a class='qwe'>2</a></div> <script> var url = window.location.href; var a=document.getElementById("mydiv").getElementsByTagName("a")

c++简单的ATL COM开发和调用实例

1.打开VS2010,新建ATL COM 项目,步骤:"文件" -->"新建" -->"项目",选择"Visual C++" -->"ATL 项目" ,填写"名称" FirstCOM -->"确定". 2.ATL 项目向导,勾选 [支持COM+ 1.0]和[支持部件注册器],其他默认,点击完成. 3.切换到类视图,右键单击项目"Fir

VS2010 简单ATL COM开发

1.打开VS2010,新建ATL COM 项目,步骤:"文件" -->"新建" -->"项目",选择"Visual C++" -->"ATL 项目" ,填写"名称" FirstCOM -->"确定". 2.ATL 项目向导,勾选 [支持COM+ 1.0]和[支持部件注册器],其他默认,点击完成. 3.切换到类视图,右键单击项目"Fir

MVC简单认识

学习一个新知识,首先要了解的就是下面几个问题,它是什么?它能干什么?使用它有什么好处?这篇文章就围绕这几个问题来展开讨论. mvc不是一种编程语言,严格来说,它都不算是一门技术,它是开发软件时使用的一种"架构(框架)".他就像是一种开发模式,或者是一个程序设计模板. 软件开发人员老生常谈的一个问题,就是软件开发过程中的变化,需求会变,技术会变,客户会变,老板会变,更痛苦的是PM也会变,开发过程中没有什么是固定不变的,改变会给软件开发带来非常大的变故,这些我们都无法改变,我们唯一能做的就

抽象之虚拟层

计算机领域有句话:“计算机的任何问题都可以通过增加一个虚拟层来解决”.另言之:"All problems in computer science can be solved by another level of indirection".其主要思想是将调用者和被调者隔离开,既屏蔽细节,又提高了灵活性.由于标准统一在此处收口,因此又提高了效率与安全性. 这个思想在计算机硬件.计算机网络.计算机网络无不如此.计算机网络的7层协议,每一层都可以看做下一层的虚拟层:计算机操作系统可以看作计算

asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发2-Model层建立

上篇(asp.net mvc+jquery easyui开发实战教程之网站后台管理系统开发1-准备工作)文章讲解了开发过程中的准备工作,主要创建了项目数据库及项目,本文主要讲解项目M层的实现,M层这里讲的主要是通过Codefirst方式实现的. 一.M层简单介绍 1.M层很形象的将数据库里面的各个表格映射成了C#当中的类,比如上篇文章创建的用户表: ? 1 2 3 4 5 6 7 8 9 10 11 12 CREATE TABLE [dbo].[SYS_USER](          [ID]

轻量级弹层

近期优化项目,有个小的改动需弹出一个层提示明细信息,简单的做法也可以直接用alert来显示,自认为还是有点小小追求,说的好听点就是注重用户体验. 在完成功能后开始在网上搜索相关资源,基于jquery的弹框控件比比皆是,感觉都太重,为一个小的功能引入太多文件有点本末倒置,朋友推荐的Layer确实不错,短小精悍且功能强大,但对jquery有版本要求,必须要1.8以上,看到项目引用的jquery版本后选择放弃,最后找到一个弹层控件,看到作者的提交时间在9月24日,刚出炉的简单易用的弹层控件,js文件,