这个项目是我无聊时完成的,参阅过很多大神的示例,其实方法并不难主要是js和css样式的设计,我发现自己还有很多的js代码写不出来更加不用提看的明白了,(PS吐槽一下:革命尚未成功,同志还需努力啊!)此项目由于引用的js文件太多代码就不全摊了。

引用的主要方法是视图背景的收缩动作(Some content to demonstrate viewport scrolling behavior )、隐藏与显示动作(hide and shown)和导航菜单动作三个方法。

视图背景的收缩动作:

我们所知道的HTML<blockquote>标签的作用是文字内容在blockquote元素前后会添加换行并增加外边距的功能。

然而它在各类网站中都用的很广泛。我们访问<blockquote>元素一般都是用getElementById()的方法:

var x = document.getElementById("Blockquote");

创建<blockquote>对象则是document.createElement() 方法:

var x = document.createElement("BLOCKQUOTE");

隐藏与显示动作:

$(document).ready(function()
{
$('#load-more-content').click(function()
{ $('#more-content').toggleClass('shown'); $('#load-more-content').hide(); if( $('#more-content').hasClass('shown') )
{
$('#load-more-content').text('隐藏内容');
$('#more-content').fadeIn('slow', function()
{
$('#load-more-content').fadeIn('slow');
});
}
else
{
$('#load-more-content').text('Load some content');
$('#more-content').fadeOut('slow', function()
{
$('#load-more-content').fadeIn('slow');
});
}
});
});

效果图:

查看

微调优化(改变了底部的“下一章”内容的动画特效)

在下代码尚不熟练,有很多地方需要改善优化的还望大神给出建议和指点,吾将感激不尽。

用JavaScript做一个小小设计的更多相关文章

  1. 使用Canvas和JavaScript做一个画板

    本文同步于个人博客:https://zhoushuo.me/blog/2018/03/11/drawing-borad/ 前些天学习了HTML5的<canvas>元素,今天就来实践一下,用 ...

  2. 用javascript做一个视频播放器

    以前我们在网页上播放视频,都是要麻烦flash来实现.看着那一大段的<object>真心觉得累.随着html5的不断普及,现在是时候使用html5提供的video元素来做点正经事了,但是要 ...

  3. 如何用JavaScript做一个可拖动的div层

    可拖动的层在Web设计中用处很多,比如在某些需要自定义风格布局的应用中,控件就需要拖动操作,下面介绍一个,希望可以满足你的需求,顺便学习一下可拖动的层是如何实现的. 下面是效果演示: 这个DIV可以移 ...

  4. html,CSS,javascript 做一个弹窗

    弹窗的工作原理:在网页中写一个div ,布局到想要显示的位置,将display设为none,隐藏该div.然后通过点击事件或其他操作,利用Js代码,将display设置为block,将div 显示到网 ...

  5. 用Javascript做一个“获取验证码”的按钮

    要求:①点击按钮后背景色会发生改变②有倒计时(一般为30秒) <!DOCTYPE HTML> <html> <head> <meta charset=&quo ...

  6. (Demo分享)利用JavaScript(JS)做一个可输入分钟的倒计时钟功能

    利用JavaScript(JS)实现一个可输入分钟的倒计时钟功能本文章为 Tz张无忌 原创文章,转载请注明来源,谢谢合作! 网络各种利用JavaScript做倒计时的Demo对新手很不友好,这里我亲手 ...

  7. javascript继承机制的设计思想(ryf)

    我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...

  8. 使用React并做一个简单的to-do-list

    1. 前言 说到React,我从一年之前就开始试着了解并且看了相关的入门教程,而且还买过一本<React:引领未来的用户界面开发框架 >拜读.React的轻量组件化的思想及其virtual ...

  9. JavaScript高级---门面模式设计

    门面模式 两个作用: 1.简化类的接口 2.消除类与使用它的客户代码之间的耦合 门面模式常常是开发人员最亲密的朋友.它几乎是所有javascript库的核心原则 门面模式的目的是为了让开发人员用更简单 ...

随机推荐

  1. 南京网络赛J-Sum【数论】

    A square-free integer is an integer which is indivisible by any square number except 11. For example ...

  2. Golang OOP、继承、组合、接口

    http://www.cnblogs.com/jasonxuli/p/6836399.html   传统 OOP 概念   OOP(面向对象编程)是对真实世界的一种抽象思维方式,可以在更高的层次上对所 ...

  3. 数据去重优化 MemoryError 内存不足

    from ProjectUtil.usingModuleTOMODIFY import getNow export_q_f, q_l, start_ = '/mnt/mongoexport/super ...

  4. 【Loadrunner】性能测试:通过服务器日志获取性能需求

    性能测试:通过服务器日志获取性能需求          接触过性能测试的童鞋都知道,想要做好一个项目的性能测试,性能需求的获取至关重要~!如果公司有做过性能测试还好,大家可以拿之前的性能测试数据作为参 ...

  5. mysql 数据操作 单表查询 group by group_concat() 函数

    # group_concat() 和concat() 一样拼接字符串 用在分组里 需求:查看每个职位都有哪些员工名字 把所有员工成员的名字都列出来 把每个职位里的员工姓名列出来 mysql> s ...

  6. Linux java Tomcat 项目中 new Date 获取时间 8小时 时差

    转载自: https://blog.csdn.net/liqinghuiyx/article/details/53333284 起因:在本地开发的WEB项目部署到Linux 下后,存入数据库的时间少了 ...

  7. python之WebSocket协议

    一.WebSocket理论部分 1.websocket是什么 Websocket是html5提出的一个协议规范,参考rfc6455. websocket约定了一个通信的规范,通过一个握手的机制,客户端 ...

  8. 概率图模型PFM——无向图

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAdYAAAFPCAIAAAB/EXiGAAAgAElEQVR4nO2df4wl1XXn6/+0VuG/II ...

  9. maven运行junit用例并生成报告

    原文地址https://blog.csdn.net/hdyrz/article/details/78398964 测试类如下: [java] view plain copypackage com.mm ...

  10. C++ Builder创建和调用dll中的资源

    程序开发中经常会用到一些图标.图片.光标.声音等,我们称它们为资源(Resource).当多个窗口用到同样的资源时,可以将这些公共的资源放到一个dll文件里调用,这样,由于定位资源比在磁盘中定位文件花 ...