AjaxUI:滑动条

New Document

body{text-align:center;font:12px Arial;}
#bg{width:600px;height:20px;background:#099;margin:auto;padding:3px;text-align:left;}
#drag{width:20px;height:20px;background:#0ff;}
p{width:600px;text-align:left;}

var Parameter;
var first=true;
//创建鼠标对象
var Cursor=new Object();

//设置鼠标对象的方法
Cursor.getCrusorCoordinate=function(event){
var event=event || window.event;
var x=0;
var y=0;
if(event.pageX)
{
x=event.pageX;
y=event.pageY;
}
else
{
x=event.clientX+document.body.scrollLeft-document.body.clientLeft;
y=event.clientY+document.body.scrollTop-document.body.clientTop;
}
return {x:x,y:y};
}

//创建元素对象
function Element(id)
{
this.obj=document.getElementById(id);
}

Element.prototype={

//获得对象
getElement:function()
{
if(this.obj!=null||this.obj!=undefined)
{
return this.obj;
}
else
{
return "no such Element";
}
},

//获得对象的父节点的id,如果没有则设置一个
getElementParent:function()
{
if(this.obj!=null||this.obj!=undefined)
{
var obj=this.obj.parentNode;
if(obj!=null||obj!=undefined)
{
if(obj.id==null||obj.id==undefined)
{
obj.setAttribute("id",this.obj.id+"_parent");
}
return obj.id;
}
else
{
return "no such parentNode";
}
}
else
{
return "no such ParentNode";
}
},

//获得对象的页面坐标
getElementOffset:function()
{
if(this.obj!=null||this.obj!=undefined)
{
var left=0;
var top=0;
var obj=this.obj;
while(obj.offsetParent)
{
left+=obj.offsetLeft;
top+=obj.offsetTop;
obj=obj.offsetParent;
}
return{offsetLeft:left,offsetTop:top};
}
else
{
return{offsetLeft:"no such Element",offsetTop:"no such Element"};
}
},

//获得对象的自身尺寸
getElementSize:function()
{
if(this.obj!=null||this.obj!=undefined)
{
return {width:this.obj.offsetWidth,height:this.obj.offsetHeight}
}
else
{
return{width:"no such Element",height:"no such Element"};
}
}
}

function startMove(event)
{
var event=event || window.event;
var marginLeft=Cursor.getCrusorCoordinate(event).x-Parameter.difX-Parameter.minLeft-Parameter.pL;
if(marginLeft=Parameter.maxLeft)
{
marginLeft=Parameter.maxLeft;
}
Parameter.obj.style.marginLeft=marginLeft+"px";
}

//开始拖动并设置初始参数
function startDrag(event,obj)
{
if(first)
{
var childElement=obj;
var parentElement=new Element(childElement.getElementParent());
var cL=childElement.getElementOffset().offsetLeft;
var pL=parentElement.getElementOffset().offsetLeft;
var minLeft=cL-pL;
var maxLeft=parentElement.getElementSize().width-minLeft-childElement.getElementSize().width;
var difX=Cursor.getCrusorCoordinate(event).x-childElement.getElementOffset().offsetLeft;
Parameter={obj:childElement.getElement(),pL:pL,minLeft:minLeft,maxLeft:maxLeft,difX:difX};
first=false;
}

if(document.attachEvent)
{
document.attachEvent("onmousemove",startMove);
}
else if(document.addEventListener)
{
document.addEventListener("mousemove",startMove,false);
}
}

function stopDrag()
{
if(document.detachEvent)
{
document.detachEvent("onmousemove",startMove);
}
else if(document.removeEventListener)
{
document.removeEventListener("mousemove",startMove,false);
}
}

//设置拖动监听
function dragBind()
{
var element=new Element("drag");
var childElement=element.getElement();
childElement.onmousedown=function(event){startDrag(event,element);};
childElement.onmouseup=function(){stopDrag();};
}

window.onload=dragBind;

滑动条,采用OO的方式来写这段代码,类、对象、方法、感觉很好,有个小bug,当鼠标在滑块外边释放时,无法停止对鼠标移动的监听,将mouseup事件绑定到document即可解决,当然代码要做一些相应的修改。mozilla下定位略微不准。可以纠正,不过就这样吧。

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

时间: 2007-02-12

iOS实现双向滑动条效果

最近做项目,碰到一种双向滑动条,自己实现了一下,随便写一下思路,方便以后开发,避免重复写代码,以后粘贴就行了.封装了一下,代码如下: #import <UIKit/UIKit.h> typedef NSString* (^HLDoubleSlideViewSwitchStrBock)(CGFloat count); @interface HLDoubleSlideView : UIView @property(nonatomic,assign)CGFloat maxValue; @proper

Android GridView 滑动条设置一直显示状态(推荐)

模拟GridView控件: <GridView android:id="@+id/picture_grid" android:layout_width="match_parent" android:layout_height="match_parent" android:columnWidth="100dp" android:numColumns="auto_fit" android:gravity=

Android自定义View实现等级滑动条的实例

 Android自定义View实现等级滑动条的实例 实现效果图: 思路: 首先绘制直线,然后等分直线绘制点: 绘制点的时候把X值存到集合中. 然后绘制背景图片,以及图片上的数字. 点击事件down的时候,换小图片为大图片.move的时候跟随手指移动. up的时候根据此时的X计算最近的集合中的点,然后自动吸附回去. 1,自定义属性 <?xml version="1.0" encoding="utf-8"?> <resources> <de

用jquery实现自定义风格的滑动条实现代码

前些天我们学生在线首页改版,要做一个工具栏,由于版面的限制,原先策划的很多工具只好安排在一个小区域里面,具体效果如下: 当然,这样的效果,用html自带的控件也可以实现.不过自定义的话就可以自己设置滑动条的样式啦,比如说设为红色.蓝色等,按钮形状也可以自己做啦. 需要实现的效果是,这些工具一次最多在可见区域显示9个(这里假设工具项总数多于9个,不满9个的话,将来也很有可能扩展到9个),点击上下的按钮即可将可见区域内的工具区域上下移动. 但是这样做好后,运营人员给我提意见了:要是移动滑动条就可以实

jQuery实现带滑动条的菜单效果代码

本文实例讲述了jQuery实现带滑动条的菜单效果代码.分享给大家供大家参考.具体如下: 这是一款带滑动条的jQuery滑动菜单,菜单下边有一个蓝色的线条,鼠标移上哪里它就跟向哪里,可以指引当前菜单的位置,另外,动画效果是基于jquery的animate(),对此有兴趣学习的正好可参考下代码. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-move-buttom-line-style-codes/ 具体代码如下: <!DOCTYPE

高仿网易新闻顶部滑动条效果实现代码

这个是网易新闻的主界面,我们知道底部可以用tabhost实现,这个很容易,我们在其他软件中也会经常用到. 至于顶部的滑动条,个人感觉还是比较漂亮的所以今天也模仿了下,网易顶部滑动条的效果,由于初次模仿这种效果,可能有些地方还不够完美,不过基本已经实现,希望大家能够喜欢. 废话不多说,下面上代码: 首先是布局layout下的main.xml 复制代码 代码如下: <?xmlversion="1.0"encoding="utf-8"?> <Relati

Android中ViewPager实现滑动条及与Fragment结合的实例教程

自主实现滑动指示条 先上一个基本效果图: 1.XML布局 布局代码如下: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="m

基于jquery的横向滚动条(滑动条)

查找了很多方法,有些不能实现(被滚动内容的宽度未知,但使用这种方法必须已知),其它的不能完全兼容这些浏览器(IE6,Firefox,Chrome).最后决定使用JQuery的Slider控件. 1. 下载jquery-1.3.2.min.js,jquery-ui-1.7.1.custom.min.js 2. Html 复制代码 代码如下: <div id="topslider" runat="server"></div> <div id

jQuery实现的支持IE的html滑动条

复制代码 代码如下: <html> <script type="text/javascript" src="jquery.js"></script> <style> .d_b{     height: 20px;     width: 10px;     display: inline-block;     background-color: black;     position: relative;     ver