jWriter一个基于jQuery的阅读写作网站的效果库

看了一下据上次更新已经四个月了,时间过的好快。自从上次面试前端岗时js的能力遭到深深的鄙视后,就在补js的坑了。先是各种看书,接着是期末考试,然后家里有事又耽搁了。在此期间想把用来练手的网站的前端部分重构一下,于是手写了一些jQuery的效果,也就是jWriter了。话说扔了几个月又捡起来的结果就是,看书时都感觉清楚无比的方法什么的全部都忘了,三天不练手生,真理啊。

jWriter,一个基于jQuery的阅读写作网站的效果库,用到了部分js原生代码不过都有注释。全部代码都没进行封装过,看起来可能有点脏,不过难懂的地方都给注释了,适合jQuery初学者学习交流用。

github的地址在:https://github.com/posebear1990/jWriter

github账号求关注,大家可以互(yue)粉(pao)交(gao)流(ji)吖~

目前已经实现的效果有:(预览地址是用一个专门用来预览github项目网站htmlpreview实现的,挺好用的,帮他们广而告之一下:)

网站地址:http://htmlpreview.github.io/ 项目地址:https://github.com/htmlpreview

显示更多:点击按钮后可以显示隐藏的内容,貌似挺适合放在阅读类网站的首页,点击后显示文章的全部内容。

预览地址:http://htmlpreview.github.io/?https://github.com/posebear1990/jWriter/blob/master/showmore/showmore.html

活动提示块:鼠标滑过某个区域会出现提示块,适合用在对浏览器默认的提示块的显示速度,和样式不满意的情况。

预览地址:http://htmlpreview.github.io/?https://github.com/posebear1990/jWriter/blob/master/slidetip/slidetip.html

固定提示块:鼠标滑过某个区域会出现固定(即不随鼠标移动的提示块),适合用在固定的边栏或者导航上显示注释内容,避免鼠标的遮挡。

预览地址:http://htmlpreview.github.io/?https://github.com/posebear1990/jWriter/blob/master/fixtip/fixtip.html

固定分享按钮:选中页面中文字后分享到新浪微博,之所以说固定是因为分享按钮是出现在文章div一侧的固定距离的,个人感觉这样比时时刻刻跟在鼠标旁体验要好^_^。

预览地址:http://htmlpreview.github.io/?https://github.com/posebear1990/jWriter/blob/master/fixshare/fixshare.html

时间: 2024-10-25 02:45:20

jWriter一个基于jQuery的阅读写作网站的效果库的相关文章

一个基于jQuery的弹出层插件XYTips

效果预览:http://www.juheweb.com/js/tc/80.html 标签: jQuery [1].[代码] [JavaScript]代码 跳至 [1] ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58

基于 jQuery 实现垂直滑动的手风琴效果

今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底部滑动. 效果演示     插件下载 HTML 示例代码: <div id="va-accordion" class="va-container"> <div class="va-nav"> <span class=&q

基于jQuery CSS3鼠标点击动画效果

分享基于jQuery CSS3鼠标点击动画效果支持图片或内容滑动,允许设置动画延迟效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="container"> <div class="clearfix"> <div class="grid12 small12"> <div class="demos fl" id="demos&quo

Raknet是一个基于UDP网络传输协议的C++网络库(还有一些其它库,比如nanomsg,fastsocket等等)

Raknet是一个基于UDP网络传输协议的C++网络库,允许程序员在他们自己的程序中实现高效的网络传输服务.通常情况下用于游戏,但也可以用于其它项目. Raknet有以下好处: 高性能 在同一台计算机上,Radnet可以实现在两个程序之间每秒传输25,000条信息: 容易使用 Raknet有在线用户手册,视频教程.每一个函数和类都有详细的讲解,每一个功能都有自己的例程 跨平台,当前Raknet支持Windows, Linux, Macs,可以建立在Visual Studio, GCC, Code

【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果

placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于以下类型的 input 标签:text, search, url, telephone, email 以及 password. 我们先看下在谷歌浏览器中的效果,如图所示: 获得焦点时: 输入字段: 因为是 html5 属性,自然低版本的浏览器比如 ie6-8 不兼容.下面就介绍下如何在低版本浏览器中

开发一个基于IIS服务器的web网站

新建一个基于IIS服务器的网站,这也是我参加工作开发的第一个网站 宏优信息技术上海有线公司的网站基于window server服务器的IIS服务,服务器放在美国,是一个典型的基于HTML.CSS和javascripts的web前台网站,该网站首页包括了五个导航栏和一个StellarServices网站链接,四张图片分别代表教育.医疗.金融.汽车四大行业 学习web前台可参考http://www.w3school.com.cn

一个基于jQuery的简单树形菜单

在工作中的项目使用的是一个前端基于 jQuery easyui 的一个系统,其中左侧的主菜单使用的是 easyui 中的 tree 组件,不是太熟悉,不过感觉不是太好用. 比如 easyui 中的 tree 需要单击分叉节点前的小三角,才能够展开或关闭节点.另外,它还必需要求浏览器在兼容模式下才能正常使用(这个项目中使用的 easyUI 是 1.2.2 版本,新版的 Tree 不存在该问题),很是不方便. 想修改又无从下手,所以有单独写一个简单的树形菜单的想法,趁下班的时间,抽空写了一个简单的J

基于jQuery页面窗口拖动预览效果

今天给大家分享一款基于Query页面窗口拖动预览效果.这是一款基于jQuery+HTML5实现的模拟页面窗口显示拖动窗口预览特效.这款实例适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 在线预览   源码下载 实现的代码. html代码: <p> minimap - A jQuery Plugin<br> A preview of full webpage or its DOM element with flexible

写一个基于jQuery.easyui 的可编辑表格插件

最近项目前端使用 jquery+easyui来做,用了几个月,觉得easyui是一个很不错的开源前端UI框架, 虽然偶尔会遇到一些小问题,但是凭借多年前端开发的实力积累 都一一解决了,其中比较典型的就是 这个 easyui.editgrid插件了,是基于easyui.datagrid扩展的.其实只用easyui.datarid也能实现 类似的功能,但是速度很慢,用户体验极差,所以抛弃了原来easyui.datagrid  中编辑功能的架构 自己扩展实现了其可编辑部分,就是现在的easyui.ed