今天给大家分享一款基于Ascensor.js全屏切换页面插件,这款实例 适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗。效果图如下:

在线预览   源码下载

实现的代码。

html代码:

 <div id="general">
        <div id="content">
            <!--Contenu1-->
            <div>
                <div class="contenu">
                    <h1>
                        <img src="data:images/logo.png" /></h1>
                    <p>
                        适用浏览器:IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.
                    </p>
                </div>
            </div>
            <!--Contenu2-->
            <div>
                <div class="contenu">
                    <h2>
                        <img src="data:images/operation.png" /></h2>
                    <pre class="prettyprint">
&lt;script src="js/jquery.min.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="js/jquery.scrollTo.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="js/jquery.ascensor.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script src="js/myscript.js" type="text/javascript"&gt;&lt;/script&gt;</pre>
                </div>
            </div>
    </div>

via:http://***/Article/19106

基于Ascensor.js全屏切换页面插件的更多相关文章

  1. 关于最近在做的一个js全屏轮播插件

    最近去面试了,对方要求我在一个星期内用原生的js代码写一个全屏轮播的插件,第一想法就是跟照片轮播很相似,只是照片轮播是有定义一个宽高度大小已经确定了的容器用来存储所有照片,然后将照片全部左浮动,利用m ...

  2. Fullpage.js全屏滚动jQuery插件

    兼容性: 支持 IE8+ 及其他现代浏览器. 主要功能: 1.支持鼠标滚动: 2.支持前进后退键盘控制; 3.多个回调函数; 4.支持手机.移动设备; 5.支持窗口缩放自动调整; 6.可设置滚动宽度. ...

  3. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  4. jQuery鼠标滚动垂直全屏切换代码

    体验效果:http://hovertree.com/texiao/jquery/68/ 源码下载:http://hovertree.com/h/bjaf/f643upc4.htm 代码如下: < ...

  5. HTML5实现网页的全屏切换

    使用HTML5提供的JavaScript Api可以实现主流浏览器的全屏和退出全屏操作,封装成进入全屏和退出全屏的函数如下: //进入全屏 function enterFullScreen() { v ...

  6. jquery简单的大背景banner图片全屏切换

    详细内容请点击 这个是我初毕业刚进公司那会帮同事(同时也是同学)写的一个PC端的全屏图片切换效果,对于刚毕业的我来说写出来那会的喜悦之情是无法言表的,那时的我还是什么不懂的小白白,俗称菜鸟.个人网站上 ...

  7. JS全屏漂浮广告、移入光标停止移动

    点击这里查看效果 以下是代码: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Ty ...

  8. [HTML]JS全屏代码

    video全屏参考:https://www.thecssninja.com/javascript/fullscreen <!doctype html> <html> <h ...

  9. VirtualBox全屏切换

    用VirtualBox的时候,如果设置为全屏,想再切换回来,没有什么菜单,只有通过键盘的快捷键来操作,才可以恢复. 我常常忘掉,所以老是得去找,以后需要记住这几个按键的快捷键. 1.全屏与非全屏切换: ...

随机推荐

  1. 谈谈StringBuffer和StringBuilder

    (1) 速度 在执行速度方面的比较:StringBuilder > StringBuffer > String ①String 是不可变的对象(String类源码中存放字符的数组被声明为f ...

  2. ajax 创建对象验证

    function getValue(){ var str = $("#selectid option:selected").val(); //获得选中的值 var num = $( ...

  3. vb6 获取 http only 的 Cookie

    Option Explicit ' No more data is available. ' The data area passed to a system call is too small. P ...

  4. 5.HBase In Action 第一章-HBase简介(1.1.3 HBase的兴起)

    Pretend that you're working on an open source project for searching the web by crawling websites and ...

  5. KMP模式匹配

    http://www.cnblogs.com/wangguchangqing/archive/2012/09/09/2677701.html nextal[j+1]=next[j]+1 KMP算法的实 ...

  6. IDM 通过防火墙规则阻止激活验证

    1. 打开Windows防火墙 2. 高级设置-->出站规则-->新建规则 3. 添加IDM程序路径,阻止连接 4. 在属性中添加作用域,远程IP地址: DNS解析出IP:register ...

  7. UML分析与设计

    考点: 掌握面向对象的分析与设计 掌握UML描述方法 用例图.类图.序列图.状态转换图 类图:类的属性.方法的识别:类间的各种关系 类图:实体.联系 各种关系图例: 泛化:取公共属性 关联分为聚合.组 ...

  8. Java找出所有的水仙花数并输出

    水仙花数是三位数,它的各位数字的立方和等于这个三位数本身,例如:371=33+73+13,371就是一个水仙花数. 要判断是否是水仙花数,首先得得到它的每一位上的数.个位数即为对10取余:十位数为对1 ...

  9. mysql 转义字符和php addslashes

    遇到一个很奇怪的问题,json数据中含有中文: "mail":{"title":"\u6218\u529b\u8fbe\u4eba\u6d3b\u52 ...

  10. web工程中web.xml元素加载顺序以及配置实例

    简介 web.xml是web工程的配置文件,容器加载web工程时,会首先从WEB-INF中查询web.xml,并加载其中的配置信息,可以将web.xml认为是web工程的入口. web.xml中包含有 ...