<!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>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript" language="javascript"></script>
<script type="text/javascript">
$(function(){
var scro_zoom = parseInt($(".scro_mouse").width()/2);
var scro = $("#scro");
var scroWidth = parseInt($("#scro").width());
var scroImgWidth = parseInt($(".scro_img ul li").width());
var scroMouse = parseInt($(".scro_mouse").width());
var scroMove = $(".scro_img ul");
var scroImgLength = $(".scro_img ul li").length;
var scroImgBoxWidth = scroImgWidth * scroImgLength + scroImgLength * 10 + 10;
var zoompos = {x:0,y:0};
var flag = false;
var scropos;
scroMove.css("width",scroImgBoxWidth + "px");
$(".scro_mouse").bind("mousedown",function(e){
flag = true;
$(this).css("background","blue");
$(".show").fadeIn(300);
return false;
}).mousemove(function(e){
if(flag){
$zoompos(e.pageX,e.pageY);
$(this).css("left",zoompos.x);
scroMove.css("left",-scropos + "px");
}
}).mouseup(function(e){
flag = false;
$(".show").hide();
$(this).css("background","#ccc");
})
$(document).mouseup(function(e){
flag = false;
$(".show").hide();
$(".scro_mouse").css("background","#ccc");
})
function $zoompos(x,y){
zoompos.x = x - scro.offset().left - scro_zoom; //得到left值;
zoompos.y = y - scro.offset().top - 5;//得到top值;
scropos = parseInt((scroImgBoxWidth - scroWidth) / (scroWidth - scroMouse) * zoompos.x);
if(zoompos.x <= 0){
zoompos.x = 0;
}
if(zoompos.x + scroMouse >= scroWidth){
zoompos.x = scroWidth - scroMouse;
}
if(scropos < 0){
scropos = 0;
}
if(scropos >= scroImgBoxWidth - scroWidth){
scropos = scroImgBoxWidth - scroWidth;
}
$(".show").text( zoompos.x + "," + zoompos.y + "," + $(".scro_mouse").css("left"));
}
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
#box{ width:460px; border:1px solid #000; margin:50px auto;}
#scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;}
.scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;}
.scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;}
.show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;}
.scro_img{ width:460px; height:60px; margin:10px 0; overflow:hidden; position:relative;}
.scro_img ul{ position:absolute; left:0; top:0;}
.scro_img ul li{ display:inline; float:left; width:80px; height:60px; margin-left:10px; background:red;}
</style>
</head>
<body>
<div id="box">
<div class="scro_img">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="scro">
<div class="show"></div>
<div class="scro_line"></div>
<div class="scro_mouse"></div>
</div>
<div class="text"></div>
</div>
</body>
</html>
分享到：
相关推荐
js 模拟滚动条js 模拟滚动条js 模拟滚动条js 模拟滚动条
javascript 模拟 滚动条 能动态添加内容
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。 代码未整理，...
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。
js模拟滚动条(横向竖向)，需要的朋友可以参考一下
使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。 效果如下： Js代码如下： var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动...
漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用
JS模仿横向滚动条
ScrollBar.js - 模拟滚动条特性支持竖向(v)、横向(h)、自动双向(auto)三种方向设置支持自动检查容器大小变化而重新调整(多用于图片加载，ajax填充内容等)支持响应鼠标滚轮，触屏设备的touch行为资源引用<...
下面小编就为大家带来一篇js 简易版滚动条实例(适用于移动端H5开发)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
本文主要介绍了js动画模拟滚动条的实现原理以及分享了通过滚动条实现的几个应用的实例代码:1.通过移动滚动条来实现数字的加减;2.通过拖动滚动条来实现元素尺寸的变化，以改变元素宽度为例;3.通过拖动滚动条来实现...
simScroll插件使用图片模拟滚动条，个人觉得从功能上来说已接近完美了，不过还是有点东西要完善的。就目前来说它支持的功能有： 1、上下按钮、滚动区域，支持切换快速滚动;遗憾的地方：滚动区域翻页滚动时，当...
本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动...
滚动条,模拟IE的滚动条，在div中可以通过此插件修改滚动条样式
本文给大家分享的是使用原生javascript实现模拟滚动条的方法及代码，效果非常棒，有需要的小伙伴可以参考下。
我们可以自己通过标准的html元素模拟来实现自定义的滚动条。 这里是自己在工作不太忙的时候写出来了一个用户可以自定义的滚动条jscroll，以下简称jscroll。jscroll默认只提供一种滚动条样式，部分样式来自google web...