jquery

动态更换网页背景 

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 地址： 点我查看

jquery

教你如何在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加了，实际上三个都加才算合适。

查看更多

jquery

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

jquery

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

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

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

  • 源码展示

查看更多

Highcharts

如何使用highcharts自定义按钮导出图片

接触highcharts这个图表插件已经有好几年了，摸打滚爬到现在可以说对highchart已经有一定的了解了

首先 Highcharts 本身就提供了导出图片的功能，只需要在配置中增加相应的参数即可

1
2
3
4
5
navigation : {
	buttonOptions : {
		enabled : true
	}
}

设置完毕即可导出图片了，但是这种方式有个缺点，就是导出图片时会请求highchart官方的服务器生成图片，最后返回客户端给用户下载，我们可以在官方源码中看到这样一段代码：

1
2
3
4
5
6
defaultOptions.exporting = {
	//enabled: true,
	//filename: 'chart',
	type: 'image/png',
	url: 'http://export.highcharts.com/'
}

那如何请求自己的服务器生成对应的图片呢？官方API已经为我们留出了对应的接口供我们调用
点击这里可以查看exportChart相关属性

查看更多