- 浏览: 24129 次
- 性别:
- 来自: 北京
最新评论
-
梧栖凤:
得把未经处理的脚本分享出来啊!
跨浏览器可8方向拖拽剪裁框 -
percy30856:
好东西 正在弄这个玩意儿 参考学习了
Animate Baseclass -
percy30856:
菲哥 你的头像,应该换成未满18岁禁止查看
很棒的时间线控件 -
stoneskin:
:哭笑写javascript的也是猿。。。。我们很多猿都是从写 ...
核心只要两行即可实现添加或移除className -
jamesmos:
enix2212 写道tiannet 写道enix2212 写 ...
核心只要两行即可实现添加或移除className
开发版,水平方向已完成,垂直方向没测,可以跨浏览,滚动多个当前元素索引有问题
一年前实现的scroll类
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> * { padding:0; margin:0;} #scroll { width: 212px; overflow: hidden; margin-left: 100px; } #container { height: 100px; overflow: hidden; } #container div { width: 99px; height: 98px; float: left; margin-right: 10px; border: 1px solid #eee; overflow: hidden; } </style> </head> <body> <b id="play">play</b><b id="pause">pause</b> <div id="scroll"> <div id="container"> <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div> </div> </div> <script type="text/javascript"> function ScrollClass(O){ if(!(this instanceof arguments.callee)) return new arguments.callee(O); var doc,indicator,that,config,container,scroll,toolkit,items,length,correct; (doc=document,indicator=arguments.callee,that=this,container=scroll=items=correct=null,config={ S:that.S=O.S,//滚动包装 C:that.C=O.C,//滚动容器 D:that.D=O.D,//滚动距离 后面会智能赋值 O:that.O=O.O || 'left',//滚动方式 N:that.N=O.N || 1,//滚动元素的个数 delay:that.delay=O.delay || 2000, //间隔时间 speed:that.speed=O.speed || 1000, auto:that.auto=O.auto || 'true' }); 'function'===typeof(O.callback) && (that.callback=O.callback); var toolkit={ isEmptyO : function (O){ for(var i in O){ return true; }; return false; }, currentStyle : function (element,property){ var computedStyle=null; return undefined!==element.currentStyle ? element.currentStyle[property] : document.defaultView.getComputedStyle(element,null)[property]; }, each:function(object,callback){ var index,i=0,len=object.length,isO=len===undefined || ({}).toString.call(object).slice(8,-1)==='Object'; if (isO) { for (index in object) { if (callback.call(object[index], index, object[index]) === false) { break; } } } else { for (; i < len;) { if (callback.call(object[i], i, object[i++]) === false) { break; } } } } }; var boolean=!! function(){ that.S=scroll=doc.getElementById(config.S),that.C=container=doc.getElementById(config.C),items=container.children,length=items.length; var item=items.item(0),itemSize=0; if(!doc.getElementById(O.S) || !doc.getElementById(O.C) || (config.O==='left' ? container.scrollWidth*2<container.offsetWidth : container.scrollHeight*2<container.offsetHeight)) return false; correct=config.O==='left' ? ( [parseInt(toolkit.currentStyle(item,'marginLeft')),parseInt(toolkit.currentStyle(item,'marginRight'))] ): ( [parseInt(toolkit.currentStyle(item,'marginTop')),parseInt(toolkit.currentStyle(item,'marginBottom'))] ); itemSize=(config.O==='left' ? item.offsetWidth : item.offsetHeight)+(correct[0]>0?correct[0] : correct[1]); // !config.D && (that.D=config.D=(itemSize*config.N)); // config.O==='left' && (container.style.width=(config.D)*length+'px'); container.style.height=container.scrollHeight+'px'; if(config.D%itemSize!==0){ throw new Error('滚动的距离和元素的尺寸不符'); return false; }; config.O=config.O==='left'? 'scrollLeft' : 'scrollTop'; //config.items=Array.prototype.slice.call(items); //that.items=([]).slice.call(items); config.items=[],that.items=[] /*toolkit.each(items,function(a,b){ config.items.push(b); that.items.push(b); })*/ for(var i=0;i<items.length;i++){ var node=items[i] config.items.push(node); that.items.push(node); } !that.scrolling && (that.scrolling=false); return true; }(); if(boolean===false) return false; indicator.fn=indicator.prototype,indicator.fn.constructor=indicator; !this.Tween && (indicator.fn.Tween=function(){ return that.Linear.apply(that,arguments); }); indicator.fn.Linear=function(t,b,c,d){ return c*t/d + b; }; indicator.prototype.fx=function(t,b,c,d){ return Math.ceil(that.Tween.apply(that,arguments)); }; indicator.fn.index=function(node,items){ var index=-1; toolkit.each(items,function(a,b){ if(node===b){ index=a; }; }); return index; }; indicator.fn.compute=function(O){ var t=0,b=0,c=that.D,d=50,timeout,end; !that.stack && (that.stack=[0]); void function(){ var result=that.fx(t,b,c,d); result<=that.D && (t++,that.stack.push(result),timeout=setTimeout(arguments.callee,13)); return false; }(); }; indicator.fn.condition=function(){ var indicator=arguments.callee; if(that.O==='left'){ return indicator=function(){ return that.S.scrollLeft<that.D; }.apply(that); }else{ return indicator=function(){ return that.S.scrollTop<that.D; }.apply(that); }; }; indicator.fn.action=function(){ var k=0,len=that.stack.length,interval,fn=0,distance=0; that.scrolling=true; (k<=len) && ( interval=setInterval(function(){ distance=that.stack[++k], (undefined !==distance && distance<that.D)?( (that.callback && fn===0) &&(fn=1,that.callback.call(that)), that.S.scrollLeft=distance ) : ( distance===that.D && ( fn=0, k=0, clearInterval(interval), that.nodeControl(), setTimeout(function(){that.end();},that.delay) ) ); },13) ); return false; }; indicator.fn.nodeControl=function(){ toolkit.each(new Array(that.N),function(a,b){ var temp=that.items.shift(); a<that.N && ( that.current=that.index(temp,config.items), that.C.appendChild(temp), that.items.push(temp) ); }); // that.S.scrollLeft=0; // }; indicator.fn.end=function(){ that.scrolling=false; }; indicator.fn.activity=function(){ that.loop=setInterval(function(){ (that.scrolling===false && that.S.scrollLeft===0) && ( that.action() ); },5); }; indicator.fn.pause=function (){ clearInterval(that.loop); }; indicator.fn.play=function (){ that.activity(); }; that.compute.call(that,that.O); that.auto==='true' && that.activity(); }; void function(){ var sroll=ScrollClass({S:'scroll',C:'container',speed:2000,delay:2000,N:2,auto:'true',callback:function(){ //console.dir(this); }}); document.getElementById('play').onclick=function(){ sroll.play(); }; document.getElementById('pause').onclick=function(){ sroll.pause(); }; }(); </script> </body> </html>
一年前实现的scroll类
function SlideClass(A) { this.index = 0; this.timer = null; this.parent = A.parent || {}; this.distance = A.distance || 0; this.delay = A.delay || 2000; this.autoPlay = A.autoPlay || "true"; this.counter = A.counter || "false"; this.direction = A.direction || "left"; this.chlid = A.child || "li"; if (!document.getElementById(A.parent)) { throw new Error("包裹的父节点必须") } this.parent = document.getElementById(A.parent); if (this.counter) { this.page = document.getElementById(this.counter) } this.parent.scrollTop = 0; this.parent.scrollLeft = 0; this.sub = this.parent.getElementsByTagName(this.chlid) || {}; this.number = this.sub.length; this.init.call(this) } SlideClass.prototype = { init: function () { if (this.autoPlay === "true") { this.auto.call(this) } if (this.page) { this.pageShow.call(this) } this.fnCall() }, auto: function () { var A = this; this.stop.call(this); this.timer = setInterval(function () { A.next() }, this.delay) }, prev: function () { this.play(-1) }, next: function () { this.play(1) }, fnCall: function () {}, stop: function () { clearInterval(this.timer) }, pageShow: function () { var A = this.index + 1 > this.number ? this.number : this.index + 1; this.page.innerHTML = A + "/" + this.number }, play: function (A) { this.index += A; if (this.index == this.number) { this.index = 0 } if (this.index < 0) { this.index = this.number - 1 } this.fx(this.parent, this.index * this.distance) }, fx: function (D, C) { var A = function (F, E) { var G = Math[F - E > 0 ? "floor" : "ceil"]; return function () { return [F += G((E - F) * 0.01), F - E] } }; var B; if (this.direction === "top") { B = A(D.scrollTop, C); clearInterval(D.timer); D.timer = setInterval(function () { var E = B(); D.scrollTop = E[0]; if (E[1] == 0) { clearInterval(D.timer) } }, 10) } else { B = A(D.scrollLeft, C); clearInterval(D.timer); D.timer = setInterval(function () { var E = B(); D.scrollLeft = E[0]; if (E[1] == 0) { clearInterval(D.timer) } }, 10) } if (this.page) { this.pageShow.call(this) } this.fnCall.call(this) } }; var slide = new SlideClass({ parent: 'preview', child: 'li', distance: 470, delay: 4000, current: 'curr' });
- scroll-dev.zip (2.6 KB)
- 下载次数: 13
发表评论
-
[javascript]9宫格拖拽拼图游戏 puzzle
2012-04-29 09:51 15721.跨浏览器,主流浏览器都可以运行2.纯javascript开 ... -
避免悲剧 密码生成器
2011-12-22 15:35 745最近被暴库的很多,密码安全成为重大问题!如何避免简单密码呢?还 ... -
jQuery创建实例与原型继承揭秘
2011-12-20 23:57 762在普通情况下 ... -
[Javascript]单例模式(singleton )
2011-12-16 15:23 1314Javascript中大家都很习惯用new运算符创建实例。现在 ... -
javascript1.7新语法
2011-12-13 18:30 8721.yield 关键字 Yield的作用与return 差不多 ... -
javascript undo redo
2011-12-09 10:55 2377在浏览器中用调试工具看调用结果 <!DOCTYPE ... -
duffsDevice 高速版
2011-11-25 17:21 789function duffsDevice(items, f ... -
ECMAScript.js2
2011-11-07 11:18 1326package { public native functio ... -
仅限正整数输入
2011-10-27 15:35 866修正了拖拽文本进输入框问题 2011.11.14 &l ... -
Another JavaScript quiz
2011-08-19 18:34 643测试题来自《Another JavaScript quiz》P ... -
跨浏览器可8方向拖拽剪裁框
2011-08-15 20:01 873<!DOCTYPE html PUBLIC &quo ... -
选项卡
2011-08-12 17:36 891<!DOCTYPE html PUBLIC &quo ... -
拖拽排序列表单例
2011-07-27 11:17 1171<!DOCTYPE html PUBLIC &quo ... -
Animate Baseclass
2011-07-12 15:47 1185以下代码仅供参考,请下载附件代码,应该是文本编辑器过滤掉了某些 ... -
很棒的时间线控件
2011-06-24 18:52 1640原生态javascript,希望大家能喜欢 functio ... -
fade方法
2011-05-27 10:12 773function fadeOut(steps){ ... -
核心只要两行即可实现添加或移除className
2011-04-29 11:10 1749<div id="abc" cl ... -
让函数有记忆能力
2011-04-28 15:34 683function addEvent(elem,evType ... -
可以跳动的手风琴 Accordion
2011-04-13 15:02 764<!DOCTYPE html PUBLIC &q ... -
javascript new 关键字的运行原理
2011-04-06 17:33 1539function javascriptNew(t){ a= ...
相关推荐
scroll view demo. base on iscroll
Mac 路径为 Contents/gradle/m2repository/net/sf/proguard/proguard-base Win gradle/m2repository/net/sf/proguard/proguard-base 为了安全 先备份原来的 jar 将gradle里面的 release { minifyEnabled ...
div显示上下滚动条的css代码 ;height:120px; overflow-y:scroll; border:1px solid;"> 这里是你要显示的内容 ... scrollbar-base-color:#ff6600; border:1px solid;"> 这里是你要显示的内容 </div>
DM_BASE_LAYER_START, DM_NEW_LAYER_START, DM_WALLPAPER, DM_CIRCULAR_MENU1, DM_LIST1, DM_DYNAMIC_LIST1, DM_ASYNCDYNAMIC_LIST1, DM_MATRIX_MENU1, DM_MULTILINE_INPUTBOX1, DM_EMS_INPUTBOX1, DM_DIALER_INPUT_...
卷 (USB)Project 的文件夹 PATH 列表 卷序列号码为 0006EE44 CCBE:F425 I:. │ .project │ pom.xml │ pom.xml~ │ text.txt │ ├─.settings │ org.maven.ide.eclipse.prefs ...│ │ org.eclipse.wst.common....
1 歌手列表 歌手列表页类似于手机通讯录,我们也...// base/listview/listview.vue <scroll class=listview data=data> (group, key=index class=list-group> <h2 class=list-group-title>{{group.title}} <uL>
Dans ce dossier,vous trouverez宣传balises HTML de base,sélecteurset de styles CSS等示例,以及projet web的结构分类。 sk-web-example 结构化的投影网络,HTML,CSS,Javascript以及免费的jQuery + ...
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...
<END><br>9,k-base.zip K Base is a simple knowledge base that allows users to add and query database entries. Each user can be given their own username and password. There is also an admin status ...
OVERFLOW: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#FFFFFF; scrollbar-base-color:#CFCFCF; scrollbar-darkshadow-color:#FFFFFF; scrollbar-face-color:#CFCFCF; scrollbar-highlight-...
:scroll: > REPOSITÓRIODEMATÉRIAS 兵马俑的命运 Análisee Desenvolvimento de Sistemas-图尔马2019/2 :books: 语境 SEMESTRE LETIVO:2021/1 埃斯特拉图拉 ### ADS-4(ANALISE E DESENVOLVIMENTO DE SISTEMAS...
使用CSS来修饰滚动条 1.overflow内容溢出时的设置 overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-...
overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2.scrollbar-3d-light-color立体滚动条亮边的颜色 scrollbar-arrow-...
滚动纹理,可以实现一些如瀑布,河流,熔岩流等效果,本质上就是UV坐标的偏移,在Unity中新建一个Shader,然后修改成下面... _MainTex(Base (RGB),2D) = white{} _ScrollXSpeed(X Scroll Speed,Range(0,10)) = 0 _S
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...
1.overflow内容溢出时的设置(设定被设定对象是否显示滚动条) overflow-x水平方向内容溢出时的设置 overflow-y垂直方向内容溢出时的设置 以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。...
Mac 路径为 Contents/gradle/m2repository/net/sf/proguard/proguard-base Win gradle/m2repository/net/sf/proguard/proguard-base 为了安全 先备份原来的 jar 将gradle里面的 release { minifyEnabled ...
目的:把AngularUI的模板应用到现有...base href=””> + home.html的页面 app.config(function($routeProvider) { $routeProvider.when(‘/’, {templateUrl: ‘home.html’, reloadOnSearch: false}); $ro
小于 8k 图片转为 base64 svg 图标 文件压缩、添加 MD5 ES6+, Fetch 使用 Redux DevTools () 示例动图: 组件 本项目用到的纯组件主要如下: 走马灯 Carousel 弹框 Dialog 图标 Icon 无限滚动 Infinite-Scroll ...