Hot For Coding
jQuery滚动效果

新浪微博的滚动效果,通过JavaScript也能实现,但感觉用JavaScript写这个效果极其麻烦。使用jQuery只需要几行代码就能轻松实现。

首先我们分析下动画原理,微博上的滚动效果主要有两步:滑出,渐变。

首先是滑出

在jQuery中,要使某个标签滑入滑出可以使用slideDown()sildeUp()函数,分别是向下向上滑动。我们先来实现滑动效果

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>jQuery滚动效果</title>
    <style type="text/css">
      .list {background:#f6f6f6; width:700px;border:1px solid #e2e2e2;height:200px;}
      .list .tit {   border-bottom:1px solid #ddd;text-indent:20px;background:#c3c3b3;height:40px; line-height:40px;color:#b5c;}
      ul {display:block;   padding:10px 10px 0; overflow:hidden; position:relative; top:10px;}    
      ul li {display:block; height:50px; border-bottom:1px dashed #808080; background:#f6f6f6 left top no-repeat; padding-top:3px; margin-bottom:10px; *margin-bottom:5px;}
      .con {margin:20px;}
      .con .list {margin:10px 0px;}
    </style>
    <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
    <script type="text/javascript">
      var arr = new Array();
      arr['0'] = '【小猪】:大家好!欢迎来到琼台博客';
      arr['1'] = '【小牛】:在这里大家可以互相分享技术心得。';
      arr['2'] = '【小狗】:认识大家很高兴啊!';

      var qu = arr.length-1;
        
      window.onload = function(){     
        put();
      }

      function put(){
        var str = '' ;
        for(var i=qu;i<arr.length;i++){
          str += '<li>'+arr[i]+'</li>';
        }
        $('#k').html(str);
        qu--;
        setInterval('show()',3000); 
      }

      function calculate(){
        if(qu<=0){
          qu = arr.length-1;
        }else{
          qu --;  
        }
      }
        
      // 动画主函数
      function show(){
        $('#k li:first').before('<li style="display:none;">'+arr[qu]+'</li>');  
        $('#k li:first').slideDown(500);
        $('#k li:last').animate({ opacity:"0",marginTop:"0"},500,'',function(){$('#k li:last').remove();});
        calculate(); 
      }
    </script>
  </head>
  <body>
    <div class="con">
      <div class="info">
        <h1>jQuery滚动效果</h1>
      </div>
      <div class='list'>
        <div class='tit'><h3>最新动态</h3></div>
        <ul id="k">
          加载中...
        </ul>
      </div>
    </div>
  </body>
</html>

...

READ ALL

jQuery中ready与JavaScript中window.onload区别

在JavaScript中,window.onload()函数是最经常使用的。这个函数的作用就是等待网页完全装载完了以后再去执行代码块内的语句,因为按照文档流的执行顺序,通常用于头部加载JavaScript的时候需要用到。

window.onload = function(){
  // 当网页加载完成后执行这里的代码块
};

而在jQuery中也有一个对应的函数,即等待网页加载完后执行代码块

$(document).ready(function(){
  // 当网页加载完成后执行这里的代码块     
});

...

READ ALL

Ckeditor在源码状态下获取内容报错解决

一直都喜欢用Ckeditor做网站后台编辑器,近期由于高亮代码的使用所以经常需要在源码状态下编辑,但奇怪的是在源码状态下获取textarea值js出错,但在所见所得状态下却正常,很是郁闷!

报错截图

full

一开始以为是自己代码哪里写错了

因为我的Ckeditor对象就是cke

// 定义ckeditor 初始化
var cke = CKEDITOR.replace('content');

可是为何提示null

开始行行检查也没发现有什么问题

...

READ ALL

换掉了WordPress

经历了紧张的四天时间

三天制作

一天导数据

外加昨晚留言Bug

真是紧张又激动啊!!

特发此博文纪念纪念。

开发制作过程中

遇到了好些问题

其中困扰最大的问题就是博文的摘要

如果摘要保留标签很耗资源,如果不保留标签也有点不情愿

想来想去

最后还是加一个简介字段吧!这样不仅列表也不需要读取庞大的博文内容,减少内存开销

还能省去截取字符串的过程,提升效率

另外一个困扰就是从WordPress导入数据了

由于高亮代码的变化以及数据表结构的不同我几乎是一篇篇导入过来

后面想想自己写个PHP程序也能做到

麻雀虽小,五脏俱全

俺滴博客系统也同样有一些基本功能

如评论表情,上一篇,下一篇,回复留言邮件通知等

...

READ ALL

晒晒以前写过的页面!

今天,翻看电脑时不经意看到了一几年前写过的一个样式文件

打开看看

地址: Wedding

full

那是几年前

那时,是在一家新生公司打杂

岗位是: Web研发,实际是: 哪里需要就到哪里去

于是,上午还在办公室,吹着空调,用CD制作宣传折页

下午骑着笨重的载货电动车鼠串海口市的角角落落投传单,遭白眼

一周下来,我居然只剩两排牙齿是可以见人的

可惜

拼死拼活干了一年,业绩也不见好转

看来我不适合做营销

只能像今天这样躲在办公室敲代码...

...

READ ALL

PHP用strpos函数屏蔽关键字

现在网络信息监管很严格,特别是屏蔽关键字。特别是现在Web2.0时代,网站的内容几乎都是来自网民发布,站长管理即可。如果你希望别人在你站点禁止发布某个关键字,那么就需要预先做处理。用PHP做关键字屏蔽的功能样式有多种多样,如正则是最普遍的一种,这里就不一一例举,本文介绍使用PHP函数strpos()屏蔽关键字的功能

思路

  • 把关键字专门写在一个文本文件里,每行一个,数量不限,有多少写多少。
  • PHP读取关键字文本,存入一个数组
  • 遍历关键字数组,挨个用strpos()函数去看看内容有没有关键字,如果有,返回true,没有则返回false

...

READ ALL

去掉Linux中rz命令后冷却时间

由于程序开发需要,经常在Linux环境下操作,而我用的ssh工具是SecureCRT。每次传送文件无论大小数量多少都要打开专门的传送工具,非常不方便。某日闲逛发现rzsz于命令状态下传送文件非常方便,按奈不住立即下载安装到虚拟机中。输入rz在弹出的对话框中选择文件就可以上传了,还可以同时选择多个,心里一阵狂喜。有了这个工具几乎就不怎么需要打开专门的传送工具了,比如ftp等。

但每次rz后,命令行已经显示传送完成了,但都会有一个烦人的冷却时间,一直卡在

**** UNREGISTERED COPY *****
Please read the License Agreement in rz.doc

...

READ ALL

Smarty中变量调节器

几乎所有PHP开发对Smarty并不陌生吧?但绝大多数人只是意识到Smarty是PHP代码与HTML分离的一个功能,其实Smarty还有许多非常的小功能,如果你能把Smarty的这些小功能都应用的非常好,不仅非常方便程序编写还减少重复性操作。

今天要介绍Smarty的变量调节器功能,什么是变量调节器呢?即输入在模板上的变量可以通过某个函数处理返回值达到某种效果。

举个最简单的例子,如所有小写字母变大写!那么在模板页你可以在变量后边加上|upper即可,如 { $word | upper } 这样就可以把$word变量中所有的小写字母变成大写字母了。挺方便的吧!

...

READ ALL

PHP升级后eAccelerator罢工

前几天,在一次PHP升级到5.3.10之后发现eAccelerator没有开启,phpinfo()里直接显示全部为false

full

很是纳闷中...

急忙打开ssh把php-fpm进程杀掉重启,结果提示

[eAccelerator] This build of "eAccelerator" was compiled for PHP version 5.3.6. Rebuild it for your PHP version (5.3.10) or download precompiled binaries.

...

READ ALL

PHP巧用vdisk制作网络硬盘

利用vdisk提供的API接口制作网络硬盘空间,大大节省了自己的硬盘空间,还能一定程度上放置盗链,这应该是众多小站的选择。本文仅提供设计步骤,具体代码不贴上,如需要可以联系屋主索取哦。废话不多说,开始计步骤

申请账号

到vdisk申请一个帐号,并开通API接口服务。

如何申请帐号,这里就不罗嗦了,只要是会打字的童鞋都能申请。目前所有申请到的帐号,默认空间大小就是2G空间,我感觉2G空间已经够用了。上传大文件的请绕道,不在本文讨论范围之内。然后申请开通API接口服务,获得相应的授权码值等等,把这些值记下。

设计表结构

这里重点说明一下,虽然通过API接口你也能获取到文件列表详细信息。但不推荐通过API接口获取文件列表,因为不方便不说,还一个字:慢。用户体验非常不好,所以本篇文章采取的架构是本地存储文件列表模式。就是用户上传或者删除后,就在本地数据库上进行增加或删除。用户打开网页后,加载的是从本地数据库读取的文件列表。

...

READ ALL