使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果(精问) 一.总结 一句话总结:进度条动画效果用animation,自动效果用setIntelval 二.使用原生JS+CSS或HTML5实现简单的进度条和滑动条效果 前言 我个人非常喜欢js+css的强大表现能力,这也是我喜欢前端开发的原因之一,后端通常都是在和数据打交道,很多东西都是抽象的数据结构,不直观也不美观,而前端着重于界面视图的渲染以及各种各样有意思的交互效果,其中像我们在客户端中见到的安装进度条效果以及滑块拖动效果,使用j…
http://blog.csdn.net/terryzero/article/details/3797782 疯狂JAVA讲义---第十二章:Swing编程(五)进度条和滑动条 标签: swing编程java任务timerstring 2009-01-16 21:12 6722人阅读 评论(0) 收藏 举报  分类: J2SE(63)  版权声明:本文为博主原创文章,未经博主允许不得转载. 前几天讲了Swing基本的控件,今天开始讲特殊控件.一天讲2个吧,首先讲用JProgressBar,Pro…
ProgressBar.js 是一个借助动态 SVG 路径的漂亮的,响应式的进度条效果.使用 ProgressBar.js 可以很容易地创建任意形状的进度条.这个 JavaScript 库提供线条,圆形和方形等几个内置的形状,但你可使用 Illustrator 或任何其它的矢量图形编辑器创建自己的进度条效果. 在线演示      插件下载 线条进度条: var line = new ProgressBar.Line('#example-line-container', { color: '#FC…
js轮播图片支持手机滑动切换 carousel-image 轮播图片,支持触摸滑动. 例子见DEMO http://www.lovewebgames.com/jsmodule/carousel-image.html github地址:https://github.com/tianxiangbing/carousel-image 轮播图片,支持触摸滑动. 使用方法案例: <script type="text/javascript" src="../src/zepto.js…
js Touch事件(向左滑动,后退) 代码如下 var touch_p = { c_x : 0, c_y : 0, hasbacked : false }; function touches(ev){ if(ev.touches.length==1){ switch(ev.type){ case 'touchstart': if(console) console.log('Touch start('+ev.touches[0].clientX+', '+ev.touches[0].client…
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"(要滚动的对象)距离页面顶部的高度,也就是说滚动的对象与窗口的上边缘接触时,立即将对象定位属性position值改成fixed(固定) (除IE6以外,因为IE6不支持fixed).对于IE6用绝对定位position:absolute,top:就是"游览器滚动的top".在 IE6下浏览看…
js仿新浪游戏频道导航条 在线演示本地下载…
ionic 滑动框 ion-slide-box 滑动框是一个包含多页容器的组件,每页滑动或拖动切换: 效果图如下: 用法 <ion-slide-box on-slide-changed="slideHasChanged($index)"> <ion-slide> <div class="box blue"><h1>BLUE</h1></div> </ion-slide> <io…
禁止页面滑动 通常静止滑动方案:(阻止滑动事件) window.ontouchmove=function(e){ e.preventDefault && e.preventDefault(); e.returnValue=false; e.stopPropagation && e.stopPropagation(); return false; }; 有部分机型不支持以上静止滑动方案,可使用:(点击后页面浮动到指定位置不动 将body的position设置为fixed) $…
本文主要和大家分享Bootstrap实现导航实例详解,在建设一个网站的时候,不同的页面有很多元素是一样的,比如导航条.侧边栏等,我们可以使用模板的继承,避免重复编写html代码.现在我们打算实现一个在网页上方的导航条,并在所有的页面中继承这个导航条.导航条的建立,我们直接使用Bootstrap提供的如下导航条的样式. 相关推荐:<Bootstrap教程> 但在使用Bootstrap的导航条样式之前,需要先引用Bootstrap所需要的css和js文件以及jQuery,我们在html的heade…
在 Android 应用中,大部分情况下都会使用一个垂直滚动的 View 来显示内容(比如 ListView.RecyclerView 等).但是有时候你还希望垂直滚动的View 里面的内容可以水平滚动.如果直接在垂直滚动的 View 里面使用水平滚动的 View,则滚动操作并不是很流畅. 比如下图中的示例: 为什么会出现这个问题呢? 上图中的布局为一个 RecyclerView 使用的是垂直滚动的 LinearLayoutManager 布局管理器,而里面每个 Item 为另外一个 Recyc…
从SQLSERVER/MYSQL数据库中随机取一条或者N条记录 很多人都知道使用rand()函数但是怎麽使用可能不是每个人都知道 建立测试表 USE [sss] GO ,NAME ) DEFAULT 'nihao') GO CREATE INDEX IX_RANDTEST_ID ON RANDTEST(ID) GO INSERT INTO RANDTEST DEFAULT VALUES SELECT * FROM RANDTEST 第一种写法:大家会想到ORDER BY NEWID() SET…
PS:将来的你会感谢现在奋斗的自己.... 学习内容: 1.进度条 2.拖动条 3.星级评论条 1.进度条...       进图条这东西想必大家是很熟悉的...为了使用户不会觉得应用程序死掉了,因此为之设置一个进度条使应用程序的运行状态更好的反馈给客户...这也就是进度条的作用...因此一般的应用程序都会加入进度条...进度条分为圆形进度条和线性的进度条...目的都是一样的,只是展示的效果是不同的...用代码讲解一下... <LinearLayout xmlns:android="htt…
sql 第 10条 到20条 select * from( select *,ROW_NUMBER () over (order by @@servername) as rownum from tb_Grade) a where rownum between 11 and 20 select top(10) * from tb_Grade where 学生编号 not in (select top (10) 学生编号 from tb_Grade) 总分前5名的是 select top (20-1…
随机获得Mysql数据表的一条或多条记录有很多方法,下面我就以users(userId,userName,password......)表(有一百多万条记录)为例,对比讲解下几个方法效率问题: select * from users order by rand() LIMIT 1 执行该sql语句,老半天没有反应,最后被迫手动停止执行,怎个伤人了得啊!后来我查了一下MYSQL手册,里面针对RAND()的提示大概意思就是,在 ORDER BY从句里面不能使用RAND()函数,因为这样会导致数据列被…
首先我们看两个连写注释 第一个:   /* 点击头像,显示基本资料 */ $(".f-chatTit a.avatar").click(function(){ $(this).hide().parents(".f-chatWrapUnfold").find(".f-chatWrapBar").css({"width":"500px"}).find(".basicInfo").show()…
功能:用NAV视图控制器打开新的视图,默认工具条和导航条隐藏,双击显示之 // // main.m // Hello // // Created by lishujun on 14-8-28. // Copyright (c) 2014年 lishujun. All rights reserved. // #import <UIKit/UIKit.h> @interface TestViewController : UIViewController @end @implementation T…
1.工具条和状态条中控件的添加: 方法⑴.只能在ToolBar里创建控件:首先,在ToolBar中创建一个Button,其ID为ID_TOOL_COMBO(我们要将创建的控件放在该Button的位置上). 其次,新创建一个类CMainToolBar,要从CToolBar继承(创建过程大概如下:选择工程/增加到工程/新的类:也可以选择工程的根,然后点击右键,选择新的类:或者CTL+W,选择增加类/新的类 --- 然后在class type里选择Generic Class,在Name栏里输入新类的名…
问题描述: 在 Vue-cli 创建的项目中,使用了 ESLint 规范代码的项目中 如何针对单个 js 文件禁用 ESLint 语法校验,但整个项目依然保留 ESLint 的校验规则? 解决方案: 在代码顶部添加一行注释 /* eslint-disable */ ESLint 在校验的时候就会跳过后面的代码 还可以在注释后加入详细规则,这样就能避开指定的校验规则了 /* eslint-disable no-new */…
在使用ionic的UI组件Slides时,发现手动滑动后,自动滑动失效 然后历经一点点的艰辛查找后找到方法,如下: 页面代码使用 <ion-slides pager loop="true" autoplay="2000"> <ion-slide > <img src=""/> </ion-slide> </ion-slides> //loop=true 打开自动滑动 autoplay 滑…
理论上相同数据个别字段值不同重复问题: 1.某字段重复,其他字段值不同时,按重复字段分组只取一条的sql语句(eg:相同的数据某个字段值有差别导致存储两条或多条无意义重复数据的情况)select s.* from (   select a.*, row_number() over (partition by [重复字段] order by [不同字段]) as group_idx from table_name a ) s where s.group_idx= 1 2.某字段重复,其他字段不同,…
若要在i ≤r≤ j 这个范围得到一个随机整数r ,需要用到表达式 FLOOR( RAND() * (j – i)+i),RLOOR()取整树部分,RAND()生成0~1的随机数.ROUND(x,n)四舍五入取整,ROUND(x,n)表示四舍五入返回数字x的n位小数的数字,n可以是负数,这时是指定小数点左边的n位整数位为0,同时小数位均为0:. 例如, 若要在7 到 12 的范围(包括7和12)内得到一个随机整数, 可使用以下语句: SELECT  FLOOR(RAND()*(12-7)+7)…
Mysql复制一条或多条记录并插入表|mysql从某表复制一条记录到另一张表 一.复制表里面的一条记录并插入表里面    ① insert into article(title,keywords,desc,contents) select title,keywords,desc,contents from article where article_id = 100; 二.复制表里的多条数据/记录,并插入到表里面    ① INSERT INTO `power_node`(title,type,…
遮罩层滑动导致下面滑动 1,阻止弹层滑动,使用默认事件,使用这种方式弹层不能滑动 document.getElementById("model").addEventListener('touchmove', function (e) { e.preventDefault(); }, false); 2,在Body,html使用overflow:hidden, 但是不能是的下面滑动 .fix { height: 100%; overflow: hidden; } 3,同时设置不会有问题…
egg.js 如何禁用 sensors data holy shit http://localhost:7001/product/create const json = {"id":"123","name":"admin"} const url = `http://localhost:7001/product/create`; const json = { id: '123', name: 'admin' }; const c…
前言:之前发表过一篇  JS组件系列——基于Bootstrap Ace模板的菜单和Tab页效果分享(你值得拥有) ,收到很多园友的反馈,当然也包括很多诟病,因为上篇只是将功能实现了,很多细节都没有处理,这篇博主将带领大家一起来优化这里的效果,使之成为一个可以在项目里面使用的成品. 说点题外话,本来,在互联网模式下,Tab页+iframe的组合是不能被大多数平台接受的,从这些年推出的一些好的产品可以看出,几乎大家都不这么玩,即使是一些后台的管理模板,比如常见的AdminLTE.Ace.INSPIN…
//方法 //滑动条 // left: 37, up: 38, right: 39, down: 40, // spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36 var keys = [37, 38, 39, 40]; function preventDefault(e) { e = e || window.event; if (e.preventDefault) e.preventDefault(); e.returnValue…
最近在做新闻咨询页的项目,各个新闻频道通过横向滑动切换,顶部的导航active栏需要跟着切换到对应频道,并且active到达中部时,要一直处在中间. 类似效果就是uc浏览器<UC头条>的导航栏滑动居中一样. 写出来挺有成就感的,做个记录.使用的框架是vue, 但思路无关框架. 首先看html的结构, <ul> <li class='active'>娱乐</li> <li>要闻</li> <li>体育</li>…
下载网站:https://github.com/mutualmobile/MMDrawerController 首先,到下载网址下载MMDrawerController,将文件导入工程,里面有: MMDrawerController+Subclass.h MMDrawerBarButtonItem.h MMDrawerBarButtonItem.m MMDrawerController.h MMDrawerController.m MMDrawerVisualState.h MMDrawerVi…
由于项目需要做出此效果,自定义写了一个. 效果图 思路: 原始的seekbar只有滑动条并没有下方的提示文字,所以我们必须要继承Seekbar重写这个控件. 代码: 在values文件夹下新建attrs.xml,用于设置跟随滑动按钮的文字大小,颜色,背景. <declare-styleable name="MySeekBar"> <attr name="textsize" format="dimension" /> <…