js代码_js特效免费下载_JS特效代码网   网页特效   鼠标特效   js图片相册   js特效代码大全
当前位置:js代码_js特效免费下载_JS特效代码网 > 网页特效 > JS常用代码 > 鼠标特效

jQuery实现鼠标拖动滑块选择百分比特效代码

发布时间:2017-03-08 15:47:17    您是第0位浏览者

本js特效代码兼容:ie6 、ie7 、ie8 、ie9 、ie10 、ie11 、chrome 、firefox 、opera 、safari 、 等浏览器

jQuery实现鼠标拖动滑块选择百分比特效代码

jQuery实现鼠标拖动滑块选择百分比特效代码

var index,maxLeft;    
$(function(){    
//range值提示    
$(".f-hk").mouseenter(function(){    
$(this).find(".f-range-tips").css("display","block");    
});    
$(".f-hk").mouseleave(function(){    
$(this).find(".f-range-tips").css("display","none");    
});    
//拖动开始X值    
var startX,preLeft,minLeft;    
var handle = false;    
$(".f-hk").mousedown(function(e){    
//拖动开始的X坐标    
startX = e.pageX;    
//判断是否拖动的变量    
handle = true;    
index = $(".f-hk").index(this);    
//获取滑块下标    
preLeft = parseInt($(".f-hk").eq(index).css("left"));    
//获取滑块最左的值    
minLeft = parseInt($(".f-hk").eq(index-1).css("left"))+8;    
})    
$(document).mousemove(function(e){    
e.stopPropagation();    
//是否点击滑块    
if(handle){    
//显示提示值    
$(".f-hk").eq(index).find(".f-range-tips").css("display","block");    
//是否第一个    
if(index==0){    
//是否最后一个    
if(index != $(".f-hk").length-1){    
maxLeft = parseInt(  $(".f-hk").eq(index+1).css("left")  )  - 8;    
}else{    
maxLeft = 500;    
}    
var newLeft =e.pageX-startX+preLeft;    
//设置边界    
if(newLeft>maxLeft){    
newLeft = maxLeft;    
}    
if(newLeft<0){    
newLeft=0;    
}    
//执行拖动    
$(".f-hk").eq(index).css("left",newLeft);    
//动态改变提示的值    
var myVal = parseInt( (1- (parseFloat($(".f-hk").eq(index).css("left"))-8*(index) ) /(500-8*(index+($(".f-hk ").length-index-1) ) ))*100 ) +"%" ;    
$(".f-hk").eq(index).find(".f-range-tips").html(myVal);    
//改变 信息表最小值    
$(".f-range-msg").eq(index).find(".f-valMin").html(myVal);    
//改变信息表最大值    
if(index != $(".f-hk ").length-1){    
var max = $(".f-range-msg").eq(index+1).find(".f-valMax").html(myVal) ;    
}    
}else{    
//是否最后一个    
if(index != $(".f-hk").length-1){    
maxLeft = parseFloat(  $(".f-hk").eq(index+1).css("left")  )  - 8;    
}else{    
maxLeft = 500;    
}    
var newLeft =e.pageX-startX+preLeft;    
//设置边界    
if(newLeft>maxLeft){    
newLeft = maxLeft;    
}    
if(newLeft<minLeft){    
newLeft=minLeft;    
}    
//执行拖动    
$(".f-hk").eq(index).css("left",newLeft);    
//动态改变提示的值    
var myVal = parseInt( (1- (parseFloat($(".f-hk").eq(index).css("left"))-8*(index) ) /(500-8*(index+($(".f-hk ").length-index-1) ) ))*100 ) +"%" ;    
$(".f-hk").eq(index).find(".f-range-tips").html(myVal);    
//改变信息表最小值    
$(".f-range-msg").eq(index).find(".f-valMin").html(myVal );    
//改变信息表最大值    
if(index != $(".f-hk ").length-1){    
var max = $(".f-range-msg").eq(index+1).find(".f-valMax").html(myVal) ;    
}    
}    
}    
})    
$(document).mouseup(function(){    
handle = false;    
//隐藏值    
$(".f-range-tips").css("display","none");    
})    
//初始化    
for(i=0;i<$(".f-hk").length;i++){    
//获取百分比    
var getVal = parseInt($(".f-hk").eq(i).find(".f-range-tips").html());    
var totalWidth =  500-8*(i+4-1-i);    
var setLeft = parseInt ((1-getVal/100) * (totalWidth))+8*(i);    
//初始化left值    
$(".f-hk").eq(i).css("left",setLeft);    
//初始化最小值    
$(".f-range-msg").eq(i).find(".f-valMin").html(getVal+"%");    
//初始化最大值    
if(i != $(".f-hk").length-1){    
$(".f-range-msg").eq(i+1).find(".f-valMin").html(getVal+"%");    
}    
}    
})



鼠标 拖动 滑块 选择

jquery选项卡切换,版块鼠标跟随边框变色特效

jquery tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等特效

jQuery实现右侧qq在线客服特效,鼠标划过即可显示、隐藏

jquery鼠标悬停图片高亮,从左边滑动出标题信息显示效果

Css3鼠标悬停图片高亮特效

jquery鼠标经过向上滑动标题,可以左右切换图片位置!

jQuery仿QQ空间鼠标感应上下滚动预览图片特效

JS鼠标滑过文字标签改变标签显示内容

jQuery鼠标悬停导航底部边框线条伸缩动画效果

jQuery鼠标悬停内容动画切换效果

jquery实现鼠标移动到图片上显示大图广告特效

jQuery Scrollify鼠标滚轮控制页面滚动特效插件

jquery鼠标滑过标签选项卡切换特效

jQuery鼠标经过小图显示大图,鼠标更随特效

css3鼠标滑过栏目图片滑动切换动画特效

jquery 水平手风琴鼠标滑过标题图片滑动切换特效

jquery qq表情插件,鼠标点击qq表情图片插入文本框表单

jQuery鼠标悬停在图片上显示说明按钮的HoverEx插件

jquery hover网页左侧鼠标悬停列表改变菜单样式特效

jquery仿win8风格的图片九宫格布局,鼠标悬停图片文字切换特效

jquery导航菜单可拖动特效

jQuery仿178图库,图片相册大图预览,支持拖动定位条特效

jQuery实现全景图片拖动查看全貌特效代码

jquery仿360浏览器导航页网站logo图标拖动排序特效代码

js实现鼠标按住左键拖动方框选中特效代码

jquery实现拖拽排序插件div自由拖动排序特效代码

友荐云推荐
大家说 此评论不代表本站观点