jquery ui slider实现图片放大缩小

作者:林炜贤来源:www.163css.com发表时间:(2013-04-06)

今天,我们来介绍下jqueryui的slider,jqueryui真是强大,我们可以少写好多代码就实现常见的功能,只不过,我们还需要引进jqueryui.js,jqueryui.css。

这是jqueryui上的一个例子,是不是觉得很有意思?拉动按钮的时候,右侧的颜色也跟着变。

我们要实现的例子也是差不多的,只是我们是用来实现放大缩小图片的:

我们可以看到,当我拉动加号的按钮时,图片会变大,反之,就缩小。。。

变大是如何做的呢?我们是通过font-size来实现的,原来font-size除了写字体大小之外,还可以用来实现图片的大小啊。。。

我定义了一个变量qq,用来实现获取slider的value,接着qq每次-8,当小于10时,我们就让它的值为10,然后return false。

同样的,右侧的加号也是差不多的代码。。。

在这里,我们重新定义了图片的大小,将它的单位换成em,这样,我们上面的font-size才可以生效。。。

以下我提供源文件,欢迎有需要的朋友下载使用:

预览地址:http://www.163css.net/net163/cssjs/2013/03/slideui/index.html

下载地址:jquery ui slider实现图片放大缩小.zip

返回作者主页:www.163css.com阅读 (7504)
更多 1