<!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>
分享到：
相关推荐
总的来说，使用JavaScript模拟滚动条涉及到HTML布局、CSS样式和JavaScript事件处理等多个方面。虽然实现起来相对复杂，但能够带来更好的设计灵活性和用户体验。在实际项目中，可以参考现有的库，如Perfect Scrollbar...
JavaScript模拟滚动条是通过监听滚动事件、计算元素的可视区域与总内容的关系，然后手动更新和控制一个自定义滚动条的样式和位置。这通常涉及到CSS定位（positioning）和尺寸计算（dimensions calculation）。 2. ...
通过JavaScript模拟滚动条不仅可以提高页面的美观度，还可以实现更复杂的交互效果。本文介绍了如何使用JavaScript结合CSS来实现横向和纵向的滚动条，包括关键的技术点和实现思路。希望这些内容能够帮助开发者更好地...
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。 代码未整理，...
系统默认的滚动条很丑，用这个可以自己换成图片等。 主要事件： 上、下按钮按住，内容慢慢滚动。 拖动滚动条，内容快速滚动。 点击滚动条空闲位置，内容定位。 鼠标滚轮在内容中滚动时，内容滚动。
"很好的jq模拟滚动条"是一个专门针对jQuery库开发的插件，它提供了一种自定义和美化滚动条的方法，以增强网页的视觉效果和用户体验。 jQuery，简称jq，是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历...
比如`perfect-scrollbar`、`malihu-custom-scrollbar-plugin`等，这些库通过JavaScript模拟滚动条，可以提供高度自定义的滚动体验，同时处理好不同浏览器的兼容问题。 例如，`perfect-scrollbar`的使用方法如下： ...
"模拟滚动条"这个主题涉及的技术点主要包括CSS3、JavaScript（特别是jQuery或更现代的库如Vue.js、React.js）以及可能的插件应用。 首先，我们来了解一下什么是滚动条。滚动条是用户界面中的一个重要元素，用于在...
4. **响应用户交互**：通过JavaScript监听滚动事件，例如`scroll`事件，来更新模拟滚动条的位置。根据实际滚动位置，调整模拟滚动条滑块的CSS属性，如`transform`或`left/top`，使其与实际滚动保持同步。 5. **添加...
本主题聚焦于"jQuery实现模拟滚动条插件版"，这是一个能够自定义网页滚动条外观和行为的工具。通过使用这样的插件，开发者可以为网站提供更加个性化和一致的用户体验。 首先，我们需要理解jQuery的基本用法。jQuery...
在当前的Web开发中，使用JavaScript模拟滚动条是一个常见的需求，尤其是在那些原生滚动条无法满足特定交互效果的情况下。根据提供的文件信息，内容主要涉及如何使用JavaScript以及CSS来创建一个自定义的滚动条，并且...
为了实现跨浏览器的JS自定义滚动条，我们可以借助JavaScript库，如Perfect Scrollbar、SimpleBar、Malihu Custom Scrollbar等。这些库通过监听滚动事件并模拟滚动行为，来实现自定义滚动条的功能。例如，Perfect ...
使用Js模拟滚动条。简易模式，类似手机上常见的滚动条。 效果如下： Js代码如下： var scrollMoveObj = null, scrollPageY = 0, scrollY = 0; var scrollDivList = new Array(); // obj需要添加滚动条的对象 w滚动...
1. 基本原理：JS自定义滚动条通常通过监听滚动事件，然后使用CSS对滚动条进行隐藏和替换，用自定义的UI元素模拟滚动条的功能。这种方法可以让开发者完全控制滚动条的样式和行为，例如改变滚动条的颜色、宽度、形状等...
3. Nicescroll：提供模拟滚动条，可以替换默认的浏览器滚动条，支持自定义颜色和动画效果。 4. malihu custom scrollbars：提供了大量的选项和设置，可以创建高度定制的滚动条，包括鼠标滚轮和触摸设备的支持。 三...
1. **理解`jscroll.js`工作原理**：`jscroll.js`通常通过监听滚动事件，然后使用CSS或JavaScript模拟滚动条。它会覆盖浏览器的原生滚动条，创建一个自定义的容器，并通过计算内容的大小来模拟滚动效果。 2. **动态...
漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用 漂亮的JS+css 模拟 带滚动条的select 可以重复使用
"JS模仿横向滚动条"这个主题，就是利用JavaScript来创建一个自定义的、模仿原生浏览器滚动条的行为，以提供更美观或者更符合设计需求的用户体验。 在传统的HTML页面中，滚动条是浏览器默认提供的，其样式和行为由...
这些库通过监听滚动事件并创建自定义的滚动元素来模拟滚动条，从而实现全浏览器兼容。 - `SimpleBar`: - `PerfectScrollbar`: 安装并使用`SimpleBar`： ```bash npm install simplebar ``` ```...