<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="http://localhost:8080/js/jquery-1.3.2.js"></script>
<style>
#messageBT span{
width:46px;height:46px;margin-bottom:15px;float:left;margin-left: 25px;cursor: pointer;position:relative;
margin-top: 0;
}
</style>
</HEAD>
<BODY>
<div style='border:1px solid;width:500px; heigth:30px' id='messageBT' >
<span style='heigth:100%; width:0px;display:none' id='i'>
0
</span>
<span style='heigth:100%; width:40px' id='a'>
1
</span>
<span style='heigth:100%; width:40px' id='b'>
2
</span>
<span style='heigth:100%; width:40px' id='c'>
3
</span>
<span style='heigth:100%; width:40px' id='d'>
4
</span>
<span style='heigth:100%; width:40px' id='e'>
5
</span>
<span style='heigth:100%; width:40px' id='f'>
6
</span>
<span style='heigth:100%; width:40px' id='g'>
7
</span>
<span style='heigth:100%; width:0px;display:none' id='h'>
8
</span>
</div>
<input type='button' value='左' onclick='javascript:soliderControl.left()'>
<input type='button' value='右' onclick='javascript:soliderControl.rigth()'>
<script>
function solider(objName){
this.control=$("#"+objName);
this.objName=objName
this.maxSpanNum=7;
this.minSpanNum=1;
this.moveType=0; //滚动轴对象 0标示未移动入控件 1标示已移入滚动对象中
var temp=this;
this.control.bind('mousewheel',function (event, delta){
if(temp.moveType==0){return;}
temp.moveType=0
$('#message').html("mousewheel:"+temp.moveType)
var dir = event.wheelDelta > 0 ? 'Up' : 'Down'
//alert(dir+":"+event.wheelDelta)
if(dir=='Up'){
temp.left()
temp.moveType=1
}else if(dir=='Down'){
temp.rigth()
temp.moveType=1
}
return false;
})
this.control.bind('mouseover',function (){
temp.moveType=1
$('#message').html("mouseover:"+temp.moveType)
})
this.control.bind('mouseout',function (){
temp.moveType=0
$('#message').html("mouseout:"+temp.moveType)
})
//左边移动
//以下两种情况 左边到右边 如果有存在隐藏元素的话那么就要显示
this.left=function (){
//判断旁边是否还有隐藏的控件如果有就显示没有就停止
if(this.checkHidden(1)<1){
return;
}
//保留最后个
if(this.checkVisible()<=this.minSpanNum){
return;
}
this.leftHide($("#"+this.objName+" span:visible:first"))
//判断当前数量是否最大数量如果是最大数量 那么就不进行添加
if(this.checkVisible()>this.maxSpanNum){
return;
}
var nodeName=$("#"+this.objName+" span:visible:last").attr('id');
this.rigthShow($('#'+nodeName+" +span:hidden:first"));
}
//右边移动
this.rigth=function (){
//保留最后个
if(this.checkVisible()<this.minSpanNum){
return;
}
//判断旁边是否还有隐藏的控件如果有就显示没有就停止
if(this.checkHidden(0).attr('id')==null){
return;
}
var nodeName=$("#"+this.objName+" span:visible:first").attr('id');
this.rigthShow( $('#'+nodeName).prev());
//判断当前数量是否最大数量如果是最大数量 那么就不进行添加
if(this.checkVisible()>this.maxSpanNum){
this.rigthHide($("#"+this.objName+" span:visible:last"))
}
}
//获取当前控件中的子元素集合数
this.checkVisible=function (){
return $("#"+this.objName+" span:visible").length;
}
//获取隐藏列的子元素集合
this.checkHidden=function (type){
//type 0 获取左边隐藏列 1 获取右边隐藏列
if(0==type){
var nodeName=$("#"+this.objName+" span:visible:first").attr('id');
return $('#'+nodeName).prev();
}else if(1==type){
var nodeName=$("#"+this.objName+" span:visible:last").attr('id');
return $('#'+nodeName+" +span:hidden:first").length;
}
}
//从左到右消失
this.leftHide=function (jobj){
jobj.animate({width:'0'},"normal",function(){$(this).hide();})
}
//从左到右显示
this.leftShow=function (jobj){
jobj.animate({width:'46'},"normal",function(){$(this).show();})
}
//从左到右消失
this.rigthHide=function (jobj){
jobj.animate({width:'0'},"normal",function(){$(this).hide();})
}
//从左到右显示
this.rigthShow=function (jobj){
jobj.animate({width:'46'},"normal",function(){$(this).show();})
}
}
var soliderControl=new solider("messageBT");
</script>
<div id='message'>
1111111111111
</div>
</BODY>
</HTML>
=-=自己无聊的时候写的希望大家能提出批评 膜拜下
支持鼠标滚动 jquery需要自己添加 第一次发布 激动中
分享到：
相关推荐
Basic jQuery Slider 是一个轻量级的很简洁的 jQuery 内容滑动插件，经压缩后也仅有4.6kb大小。它能用来展示文字、图片等任意的 HTML 内容。此插件并没有太多花哨的功能，仅包含一些基础的功能，实现了 fade 和 ...
宽屏网页适用的jquery图片展示，宽屏风格，图片横长比例显示，左右滑动切换的方式，图片下边显示圆点风格的控制按钮，并且支持自动播放功能，每张图片均可添加文字标题和描述、自定义链接等。各种类型的网站都可以...
通过 jquery animate 制作图片模向滑动特效，适用于展示图片太多的页面，通过点击左右方向按钮，滑动展示更多的图片。功能简单，在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。
这又是一款jQuery焦点图插件，和其他焦点图的功能类似，它也可以自定义图片的数量，点击切换按钮进行图片切换。另外，这个jQuery焦点图的一大特点是支持鼠标滑动切换图片，因此如果将它应用在移动设备上，也可以支持...
jquery animate图片模向滑动示例，适用于展示图片太多的页面，通过点击左右方向按钮，滑动展示更多的图片。功能简单，在IE、Firefox、谷歌浏览器 通过测试。详细示例图片。jquery animate() 用于创建自定义动画的...
2. jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 3. jQuery+CSS实用图片收缩与放大效果插件 4. jquery+div实现同时滑动切换的图文展示特效插件下载 5. jquery+div带动画按钮图片手动与自动切换的...
jQuery 自定义按钮滑动效果 只是另一个按钮滑动效果 例子 我的网站 -> 谢谢！
不过自定义的话就可以自己设置滑动条的样式啦，比如说设为红色、蓝色等，按钮形状也可以自己做啦。 需要实现的效果是，这些工具一次最多在可见区域显示9个（这里假设工具项总数多于9个，不满9个的话，将来也很有可能...
4.1.7 带有自定义图标的按钮 4.1.8 分组按钮 4.1.9 主题按钮 4.1.10 动态按钮 4.2 表单元素 4.2.1 表单基础知识 4.2.2 文本输入 4.2.3 选择菜单 4.2.4 单选按钮 4.2.5 复选框 4.2.6...
59.jQuery鼠标滑动图片显示标题与简介的滑动动感特效代码 60.jQuery鼠标移上小图显示大缩略图功能 61.js仿淘宝网鼠标经过缩略图放大图片效果的jQuery Fancy Hover Effect完整实例 62.Supersized jQuery全屏...
104. 推荐jQuery兼容所有浏览器的自定义多样式图片幻灯片插件(KinSlideshow)下载 105. 推荐jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大 106. 推荐jQuery实用缩略图广告效果插件下载 107. 推荐jQuery...
10.17 在列表框上添加自定义按钮 10.18 为列表添加自定义的缩略图图标 10.19 创建列表日历的效果 10.20 动态创建listview列表项 10.21 动态加载和切换页面 10.22 在页面切换时显示加载进度框 10.23 在屏幕旋转时更改...
焦点图应用在现代网页中使用十分广泛，有注重简单小巧的，也有注重华丽美观的，大部分jQuery焦点图都可以滑动和切换图片，并且在切换图片时产生不同的动画特效。今天我们要分享一些超酷而且实用的jQuery焦点图插件，...
4.1.7 带有自定义图标的按钮 69 4.1.8 分组按钮 70 4.1.9 主题按钮 72 4.1.10 动态按钮 73 4.2 表单元素 76 4.2.1 表单基础知识 76 4.2.2 文本输入 77 4.2.3 选择菜单 81 4.2.4 单选按钮 ...
jquery上下左右图片轮播特效是一款带数字索引按钮，支持图片上下左右滑动播放效果、自定义绑定事件、一个页面支持多次使用。
jQuery详细教程，讲解很透彻， 一. jQuery 语法实例 $(this).hide() 演示 jQuery hide() 函数，隐藏当前的 HTML 元素。 $("#test").hide() 演示 jQuery hide() 函数，隐藏 id="test" 的元素。 $("p").hide() ...