仿Apple滑动条产品展示效果

2016-02-20 00:54 3 1 收藏

下面是个超简单的仿Apple滑动条产品展示效果教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

【 tulaoshi.com - Web开发 】

作者blog原文
http://www.cnblogs.com/cloudgamer/archive/2008/12/24/Slider.html

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

这个滑动条(拖动条)效果,一开始是参考了BlueDestiny的slider和Apple产品展示的样式,做了程序的原型。
在做了拖放效果之后,我想应该可以做一个更好的了,所以重做一遍,完善和扩展了一些功能。
碍于时间没有做得很强大,都是一些基本功能,希望各位多提意见!

预览效果1
这个是仿Apple滑动条产品展示效果。
除了原来的效果(包括点击缓动滑移、拖动滑移),我还加入了本程序特有的滚轮和键盘控制,滑动条两端鼠标放上去会自动滑动,滑动到两边还会自动换一个表示停止的图案。

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)

预览效果2
这里是稍微模拟了一下滚动条,当然离真正的滚动条还差很远。
滑动条除了水平还支持垂直方向的滑动,在内容显示部分按上下方向(需要先点击选中一下)或使用鼠标滚轮也能控制滑动。

预览效果3
这里主要是滑动条关于值方面的应用,可以应用在度量计算等方面。

来源:http://www.tulaoshi.com/n/20160220/1632796.html

延伸阅读
标签: excel
Excel2013如何使用数据条展示数据?   上一篇文章中我们讲到了在Excel2013中使用数据条展示数据的技巧,可惜的是,数据条主要是应用于一条数据的展示的,如果大家有多组数据需要展示,那么,试试迷你图吧。今天,我们就来学习怎么在Excel2013中使用迷你图。 具体做法如下: 1、用Excel2013打开含有几组数据的工作表,如下图...
第一次写FW教程。有点烂。制作中有使用方法不适当请指出。 效果图: 源文件下载:  
标签: Web开发
斜角导航条看上去立体感比较强,但实现起来比较麻烦;这是前几天写的一个测试代码,实现时,本来想用简单的图片加负数来实现;但GIF图片对半透明的效果无法有很好的支持;所以一边写代码,一边在改图,图片改的比较乱,CSS也没有优化; 但效果出来了; 写出来和大家分享一下; 首先说一下,要实现的目标: 滑动门,要兼容每个TAB可能出现...
柚子相机使用效果展示   自从下了柚子相机就停不下来#柚子相机# 清香型。#柚子相机# 柚子相机candy camera(多种滤镜,有1×1的规格,适合ig粉 睡觉什么的太爽 #柚子相机#拍照好好看 柚子相机怎么样?用过的都说还,网友们使用使用之后,是好评如潮...
标签: excel
Excel2013如何使用数据条来展示数据?   众所周知,Excel是数据的大陆,但事实上,它不仅仅在使用和分析数据方面是办公软件中遥遥领先的,在展示数据方面,它也不甘落后。今天我们要学习的就是,在Excel2013中使用数据条来形象展示数据的方法。 具体做法如下: 1、用Excel2013打开一篇包含数据的工作表,我们以下图为例,在...

经验教程

594

收藏

85
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部