<!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需要自己添加 第一次发布 激动中
分享到：
相关推荐
这款"jQuery自定义添加删除表单代码"是针对网页开发中常见的问卷调查表单设计的一种解决方案，旨在提供更加灵活和交互性强的用户体验。 首先，我们要了解这个代码的核心功能：切换上下位置和添加删除表单项。这涉及...
在这个“jQuery mobile滑动式的标题导航”主题中，我们将深入探讨如何利用jQuery Mobile创建动态且具有滑动效果的标题导航栏。 标题导航在任何应用程序中都扮演着关键角色，因为它帮助用户在页面间轻松导航。jQuery...
在IT行业中，滑动按钮（Slide Button）是一种常见的交互元素，尤其在移动应用设计中广泛使用。...对于压缩包中的CustomSlideDemo，深入研究和学习将有助于我们更好地掌握自定义滑动按钮的技巧，提升软件开发能力。
《jQuery自定义调查问卷插件深度解析》 在IT领域，尤其在Web开发中，创建交互性强、用户体验良好的调查问卷是常有的需求。jQuery作为一款轻量级的JavaScript库，以其简洁的API和丰富的插件生态，使得实现这一功能变...
在本文中，我们将深入探讨如何使用jQuery库来实现按钮的滑动切换效果。jQuery是一个强大的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务，使得创建动态网页变得更加容易。在“jQuery实现按钮...
1. **样式自定义**：插件允许开发者通过CSS来定制滑动按钮的样式，包括滑动轨道、滑块、选中状态等，从而适应不同的网页设计风格。 2. **事件处理**：插件支持jQuery的事件绑定机制，如`change`、`click`等，使得...
SwiftUI提供了更现代的声明式编程方式，也可以用来构建这种自定义滑动按钮。 对于前端Web开发，HTML5和CSS3可以实现类似的滑动效果。我们可以创建一个包含两个状态的div，通过CSS3的transition和transform属性实现...
- **Web开发**：在HTML5和JavaScript中，可以借助CSS和JavaScript库如jQuery Mobile或Bootstrap创建自定义的滑动按钮。对于React、Vue或Angular等现代前端框架，也有相应的组件库，如React Native的`Switch`组件。 ...
《jQuery图片滑动特效集合SuperSlide深度解析》 在网页设计和开发中，动态效果的运用可以提升用户体验，增加互动性。jQuery作为一个轻量级、功能丰富的JavaScript库，为开发者提供了许多便利。其中，"jQuery图片...
"迷你的滑动窗口CSS模板-窄 jquery 滑动 灰色 按钮 图标.rar"是一个专为创建窄版界面设计的CSS模板，它结合了jQuery的滑动效果、灰色调的按钮和图标，旨在提供一种简洁且高效的用户体验。这个压缩包包含了一个README...
**jQuery自定义数值范围抽奖代码**是基于JavaScript库jQuery实现的一种互动抽奖程序。该程序允许用户自定义一个数值范围，并在点击开始按钮后，由计算机在这个范围内生成一个随机数。当用户点击停止按钮时，程序会...
"带左右控制按钮的jQuery选项卡滑动门特效插件"就是这样一个工具，它为用户提供了更加直观和便捷的浏览体验。 **一、jQuery选项卡基础** jQuery选项卡通常由一组HTML元素（如`<div>`）组成，每个元素代表一个内容...
《jQuery自定义数值范围抽奖代码实现详解》 在网页开发中，吸引用户参与互动是提升网站活跃度的重要手段，而抽奖活动无疑是极具吸引力的一种。本文将深入解析一个基于jQuery实现的自定义数值范围抽奖代码，帮助...
在这个特定的场景中，"jQuerymobile 滑动选择时间" 是一个专门针对移动端设计的功能，它允许用户通过滑动操作来选择时间，提高了时间和日期选择的用户体验。 jQuery Mobile 的滑动选择时间组件（Slider Time）是...
本文将深入探讨如何使用jQuery实现自定义弹窗对话框，这是Web开发中一个常见且实用的功能。 首先，理解弹窗对话框的概念。弹窗对话框是一种在网页上创建浮动窗口的方法，用于显示警告、确认信息或进行用户交互，如...
总的来说，通过利用jQuery Mobile提供的事件处理机制和自定义样式，我们可以轻松实现仿iPhone滑动出现删除按钮的交互，提升用户在移动设备上的操作体验。这是一个典型的移动Web开发实例，展示了如何将前端技术与设计...
2. **状态判断**：根据当前滑动按钮的位置，判断开关的状态。可以通过获取`.curTxt` 的内容或检查 `.switchBtn` 的相对位置来确定。 3. **滑动动画**：使用jQuery的动画方法（如`.animate()`）来改变滑块的位置，...
动画效果则可通过 jQuery 的 `animate()` 方法实现，如淡入淡出、滑动等。 压缩包中的 "PopupWindow" 文件可能包含了这个弹窗插件的源码、CSS 样式表和示例 HTML 文件。为了使用此插件，你需要将这些文件引入到你的...
在创建滑动按钮时，我们可能需要选择特定的按钮元素。 3. **事件绑定**：jQuery中的`.click()`方法用于绑定点击事件，当用户点击按钮时触发相应的函数。除此之外，还可以使用`.on()`方法来绑定其他类型的事件，如`....