动态更换网页背景

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
// 创建一个图片数组
var images = [
"test1.jpg",
"test2.jpg",
"test3.jpg",
"test4.jpg"
];
// 编辑数组为每个图片附上src路径
$(images).each(function () {
$('<img/>')[0].src = this;
});

// 用来标识是否为目前显示的图片
var index = 0;
//默认初始化函数
$.backstretch(images[index], { speed: 500 },test);

function test() {
$("#p_result").html("我是回调函数输出的结果 :"+index+"");
}
$("#btnChange").click(function () {
index = Math.floor((Math.random()*images.length));
$.backstretch(images[index], { speed: 500 },test);
});
$("#btnChange2").click(function () {
// 定时切换调用
setInterval(function () {
index = (index >= images.length - 1) ? 0 : index + 1;
$.backstretch(images[index], { speed: 500 },test);
}, 3000);
});

DEMO 地址: 点我查看

教你如何在kindeditor中扩展图片裁剪的功能

本文介绍如何在kindeditor中扩展一个自定义按钮,并实现对应的功能

  • 首先我们看下目录结构,目录包含 attached、editor、script、tools 四个文件夹
    attached 用来存放上传的图片,可以在tools里upload_json.ashx 代码里修改上传的路径
    editor 编辑器所用到的基本文件都放在此文件夹
    script 文件里引入了 artDialog 弹出插件(ps:本人最喜欢的弹窗插件)
    tools 处理上传图片、管理图片、裁剪图片的类和文件都放在此文件夹

  • 编辑器的具体配置,先删除lang文件夹下无用的语言包配置文件,留下en.js、zh-CN.js、zh-TW.js 即可。分别打开三个文件在source节点上面加上 cutthumbs: ‘裁剪’, 这里我只在zh-CN.js加了,实际上三个都加才算合适。

查看更多

TimelineJs 的使用及应用

最近做项目,需要展示一个事件的发展历程,于是用到了 TimelineJs 这个东西,效果还不错,于是拿出来与大家分享下!

  1. 先下载资源包,上面TimelineJs 已经提供了GitHub的源地址 https://github.com/NUKnightLab/TimelineJS
  2. 新建页面,引入相关的文件,然后初始化代码

    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
    <html>
    <head runat="server">
    <title>时间轴插件--展示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
    <!-- HTML5 shim, for IE6-8 support of HTML elements-->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->

    </head>
    <body>
    <form id="form1" runat="server">
    <div>
    <div id="timeline-embed">
    </div>
    <script type="text/javascript" src="/js/storyjs-embed.js"></script>
    <script type="text/javascript">
    function InitTimeline() {
    createStoryJS({
    type: 'timeline',
    width: '100%',
    height: "100%",
    lang: 'zh-cn',
    source: 'example_json.json',
    embed_id: 'timeline-embed'
    });
    }
    InitTimeline();
    </script>

    </div>
    </form>
    </body>
    </html>
  3. 大功告成,可以查看效果了,哈哈(ps:一定要将对应的css和js文件放到指定的目录下,如果没有请参照下面这段代码初始化)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <div id="timeline-embed"></div>
    <script type="text/javascript">
    var timeline_config = {
    width: '100%',
    height: '600',
    source: 'path_to_json',//数据来源
    embed_id: 'timeline-embed',//初始化的DOM ID
    lang: 'zh-cn', //语言版本
    css: 'path_to_css/timeline.css', //css路径
    js: 'path_to_js/timeline-min.js' //js路径
    }
    </script>

    <script type="text/javascript" src="/js/storyjs-embed.js"></script>

最后来张效果图


下载地址:点击此处下载DEMO

myPagination 使用说明及介绍

在写这篇文章之前,先感谢下myPagination的作者 LinApex 无私的贡献。最近,看到群里总有人问 mypagination 的使用及相关DEMO,其实作者提供的 API和下载文档 中已经写的很详细了,细心的人多看、多试几遍应该问题不大,为了照顾那些懒惰的小伙伴,还是写个比较通用的吧

  • 我目前用的是myPagination 6.0 版本,这个版本也有些BUG,我看下了源码做了下细微的调整(例如增加了总记录数的显示等,我分享的下载包里 mypagination.js 即修改后的)

引入js和css文件

1
2
<script src="Scripts/myPagination/mypagination.js" type="text/javascript"></script>
<link href="Scripts/myPagination/page.css" rel="stylesheet" type="text/css" />

前端HTML

注:这里html自己就随便写啦,可以是table或者自己定义的任何形式,但是一定要有一个DIV用来渲染page。

1
2
3
4
<div id="content">
</div>
<div class="pagelist" style="float: left; width: 100%">
</div>

查看更多

jQuery 滑动滚动条延迟加载图片(附带相册展示插件)

今天为大家推荐一款滑动插件 scrollpagination.js
很多产品展示、文章列表、微博列表展示都用到了这个东西,页面首次加载显示一部分列表信息,当滚动条滑动到一定位置时,就会触发请求后台加载新的数据,通过这种方式来替代传统的分页模式,同时也带来比较友好的用户体验。

  • 源码展示

查看更多