今天给大家分享一款基于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://www.w2bc.com/Article/19106

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

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

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

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

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

  3. jQuery插件开发——全屏切换插件

    这个插件包含三个部分:HTML结构.CSS代码和JS代码. HTML结构是固定的,结构如下: <!--全屏滚动--> <div class="fullpage-contai ...

  4. FullPage.js全屏插件文档及使用方法

    简介 fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便.很轻松的制作出全屏网站 下载地址 下载地址 相关示例:基于fullpage.js实现的360全屏滑动效果 支持功能 支持 ...

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

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

  6. js实现网页全屏切换(平滑过渡),鼠标滚动切换

    实现效果为页面平滑过渡全屏切换,点击导航和鼠标滚动都可以切换. 效果图: html代码: <!DOCTYPE html> <html> <head lang=" ...

  7. 基于js全屏动画焦点图幻灯片

    今天给大家分享一款基于js全屏动画焦点图幻灯片.这款焦点图内的内容以动画形式出现和消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="sl ...

  8. PPAPI插件的全屏切换处理

    有时你会想让PPAPI插件全屏(比方播放视频时),这次来看看怎么做. PPAPI和CEF App两側都要处理. foruok原创,转载请注明出处.欢迎关注foruok的订阅号"程序视界&qu ...

  9. jquery横向纵向鼠标滚轮全屏切换

    html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF- ...

随机推荐

  1. Array.prototype.slice.call

    Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组 ,::'age'}; Array.prototype.slice.call(arr); ...

  2. Eralng 小知识点

    文件属性 提取方法:Module:module_info/1 头文件 包含头文件 -include(FileName). %% FileName为绝对路径或相对路径 引入库中包含文件 -include ...

  3. HDU-3874 Necklace 线段树+离线

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3874 比较简单的题,题意也好懂. 先O(n)求每个数左边第一次出现的与他相同的数的位置l[i].对询问 ...

  4. 第三百五十七天 how can I 坚持

    502是我对你没有爱的意思吗?为什么要要这样啊,好绝情. 明天要去加班,今晚回来也好晚了,晚上回来都有点精神恍惚了. 他们要聚会,本来要想去樱木花道来,哎. 后天..什么都没学. .. .. .. 准 ...

  5. 第三百二十八天 how can I 坚持

    今天电脑快把我搞疯了,一天得死机快十次,不知道怎么回事,最后升级了win10,感觉就是比较好. 哎,成了这个样子,当初为什么又让我抽中了那个签,搞不懂啊,这都是为啥. 我哪里错了,还是冥冥中自有天意, ...

  6. ubuntu官方源列表网址

    http://wiki.ubuntu.org.cn/%E6%BA%90%E5%88%97%E8%A1%A8 (推荐台湾的源)

  7. poj 1273 Drainage Ditches(最大流)

    http://poj.org/problem?id=1273 Drainage Ditches Time Limit: 1000MS   Memory Limit: 10000K Total Subm ...

  8. How Tomcat Works(十八)

    在前面的文章中,如果我们要启动tomcat容器,我们需要使用Bootstrap类来实例化连接器.servlet容器.Wrapper实例和其他组件,然后调用各个对象的set方法将它们关联起来:这种配置应 ...

  9. C#扫描仪编程、条形码识别编程资料

    扫描仪编程资料:http://www.cnblogs.com/wubh/archive/2011/11/07/2239178.html 图片条形码识别资料:http://www.codeproject ...

  10. Web CORS 跨域方式使用方式

    CORS 参考 http://enable-cors.org/index.html https://help.aliyun.com/document_detail/oss/practice/cors_ ...