`
yangkai0332
  • 浏览: 10753 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论
阅读更多
/**
 * 平滑移动滚动条
 * 如果是IE就直接跳吧.慢死了.
 */
var phydgdt = function(){
	this.w = document.body.scrollWidth;	//滚动条的总宽度
	this.h = document.body.scrollHeight;	//滚动条的总高度
	this.x = document.body.scrollLeft;	//滚动条横向位置
	this.y = document.body.scrollTop;	//滚动条纵向位置
	this.id = -1;
	this.list = [];
	this.isIE = !+ [ 1, ] ? true : false;
}
phydgdt.prototype = {
	start : function(type,to){
		if(this.id != -1){
			this.list.push({type:type,to:to});
			return "等待";
		}
		this.bool = to > (type === "x" ? this.x : this.y);	//是用加还是用减
		this.sd = 15;	//每次移动的大小
		this.time = 1;
		if(to < 0)to = 0;
		if(this.isIE){		//IE直接条
			if(this.type === "x"){
				scrollTo(to,this.y);
			}else{
				scrollTo(this.x,to);
			}
			fddiv.update();
			this.stop();
			return;
		}
		this.id = setInterval((function(param) {
			return function() {
				if(param.type === "x"){
					if(param.bool){
						param.x += param.sd;
						if(param.x < to){
							scrollTo(param.x,param.y);
						}else{
							scrollTo(to,param.y);
							param.stop();
						}
					}else{
						param.x -= param.sd;
						if(param.x > to){
							scrollTo(param.x,param.y);
						}else{
							scrollTo(to,param.y);
							param.stop();
						}
					}
				}else{
					if(param.bool){
						param.y += param.sd;
						if(param.y < to){
							scrollTo(param.x,param.y);
						}else{
							scrollTo(param.x,to);
							param.stop();
						}
					}else{
						param.y -= param.sd;
						if(param.y > to){
							scrollTo(param.x,param.y);
						}else{
							scrollTo(param.x,to);
							param.stop();
						}
					}
				}
				fddiv.update();
			}
		})(this), this.time)
	},
	stop : function(){
		if(this.id != -1){
			clearInterval(this.id);
			this.id = -1;
		}
		this.x = document.body.scrollLeft;	//滚动条横向位置
		this.y = document.body.scrollTop;	//滚动条纵向位置
		if(this.list.length > 0){
			var obj = this.list[0];
			this.list = this.list.slice(0,0).concat(this.list.slice(1,this.list.length));
			this.start(obj.type,obj.to);
		}
	},
	gotoObj : function( id ){
		if(id){
			var el = document.getElementById(id);
			var tl = el.offsetTop - 8;
			this.start("y",tl);
		}
	}
};
//使用方法
var pdt = new phydgdt();
pdt.gotoObj("对象ID");
分享到:
评论

相关推荐

    js模拟滚动条

    确保在窄屏设备或移动设备上,滚动条仍然易于使用和视觉上协调,可能需要调整滚动条的宽度和样式。 6. **兼容性处理**: 不同浏览器对滚动条的支持程度不同,因此需要编写兼容性代码。例如,使用`getComputedStyle...

    js图片左右滚动条切换.zip

    【标题】"js图片左右滚动条切换.zip"所包含的知识点主要是关于JavaScript(JS)实现的图片滚动条交互效果,这种效果通常用于图片相册或展示类网站,以提供用户友好的图片浏览体验。在现代网页设计中,动态且可自定义...

    js滚动条平滑移动示例代码

    在讨论JavaScript (JS) 实现滚动条平滑移动的技术时,需要理解几个核心的Web开发概念。首先,JS是使网页具有交互性的核心脚本语言,它能够控制和操作HTML和CSS,实现动态效果。其次,HTML(超文本标记语言)用于构建...

    js : 隐藏滚动条利用滚轴滚动

    在JavaScript和jQuery的世界里,有时候我们可能需要在页面设计中隐藏滚动条,以达到更加美观或者特定的视觉效果。然而,隐藏滚动条并不意味着要牺牲滚动功能,通过一些技巧,我们依然可以让用户通过滚轴来查看页面...

    滚动条平滑滚动置顶&贴壁滚动层

    总之,“滚动条平滑滚动置顶&贴壁滚动层”是一种提升网页用户体验的技术,通过CSS和JavaScript的结合使用,实现平滑滚动、固定定位和粘性滚动效果,提供更加流畅、直观的浏览体验。在开发过程中,需要兼顾功能实现、...

    webbrowser滚动条隐藏

    同时,我们还可以使用JavaScript库,如Perfect Scrollbar或SimpleBar,它们提供更高级的滚动条定制功能,可以在隐藏滚动条的同时提供平滑滚动效果。 在实际应用中,考虑到浏览器兼容性和用户习惯,通常会结合使用...

    原生JS实现的滚动条支持各种回调支持移动端PC端支持自定义样式

    对于"支持各种回调"这一点,这意味着开发者可以监听滚动事件,当滚动条发生移动时触发特定函数。例如,你可以设置在滚动到底部时加载更多内容,或者在滚动到某个特定位置时执行特定操作。常见的滚动事件有`scroll`,...

    外部滚动条控制iframe

    2. **监听外部滚动条事件**:为外部的滚动容器(如div)添加滚动事件监听器,当外部滚动条移动时触发相应函数。 3. **同步iframe内部滚动位置**:在事件处理函数中,根据外部滚动条的位置,使用JavaScript设置...

    用js自定义滚动条样式(可使用图片哦)

    标题“用js自定义滚动条样式(可使用图片哦)”正是指向这样一个技术主题,即如何利用JavaScript和CSS来定制具有个性化外观的滚动条,特别是通过使用图片来增强其视觉效果。 滚动条是网页中非常常见的一种元素,它...

    简单JS随滚动条滚动导航

    【标题】"简单JS随滚动条滚动导航"所涉及的知识点主要集中在JavaScript的事件监听、DOM操作以及CSS样式实现上。这种类型的导航栏通常用于网页设计中,它能随着用户滚动页面而改变位置,始终保持在可见区域,为用户...

    HTML一张大图片,屏幕显示不下,显示滚动条,拖动滚动条来观看大图片(移动视口).zip

    视口是用户可见的网页部分,移动滚动条实际上是改变了视口的位置。在移动设备上,视口的概念尤为重要,因为设备宽度有限,需要通过CSS的`meta viewport`标签来设置视口大小,以优化移动端显示。 综上所述,解决大...

    js自定义窗口滚动条特效

    2. **JavaScript插件**:对于不支持CSS自定义滚动条的浏览器,我们可以借助JS库或插件,如`Perfect Scrollbar`、`SimpleBar`或`malihu custom scrollbar`。这些插件通过JavaScript实现滚动条的渲染和事件监听,从而...

    动态滚动条动态滚动条

    5. **JavaScript操作**:使用JavaScript,开发者可以实现滚动条的动态效果,如平滑滚动、滚动事件监听等。例如,当用户滚动到页面某个位置时,可以触发特定功能。 6. **响应式设计**:在移动设备上,屏幕尺寸有限,...

    jquery.mCustomScrollbar自定义滚动条插件

    《jQuery.mCustomScrollbar:打造个性化的滚动条体验》 在网页设计中,滚动条作为页面内容超出可视区域时的重要导航工具,其外观和交互性往往影响着用户的浏览体验。jQuery.mCustomScrollbar是一款强大的自定义滚动...

    jQuery实现将div的滚动条滚动到指定位置

    当需要控制div元素中的滚动条滚动到特定位置时,jQuery提供了一个简单易用的方法。本篇文章将深入探讨如何利用jQuery实现这一功能。 首先,我们需要了解几个基本概念: 1. **div**: 在HTML中,div(division)是一...

    jquery多款滚动条插件插件

    jQuery作为一款强大的JavaScript库,提供了许多优秀的滚动条插件,使得滚动条不仅具有基本的滚动功能,还能实现各种酷炫效果,如自定义样式、翻页效果、图片滚动等。本篇文章将详细介绍几款jQuery滚动条插件及其特色...

    全屏焦点图片无滚动条 css3动画特效 图片随鼠标移动而移动

    CSS3的动画功能允许我们创建动态效果,如图片的平滑移动。`@keyframes`规则定义了动画的关键帧,然后通过`animation`属性应用到目标元素上。例如,创建一个图片随着鼠标移动的动画: ```css @keyframes moveImage { ...

    页面布局有滚动条

    为了优化用户体验,可以采用一些滚动相关的JavaScript库或插件,如jQuery ScrollPath或fullPage.js,它们能实现平滑滚动、滚动监听等功能,增强页面的动态效果和互动性。 此外,对于移动设备,由于屏幕尺寸较小,大...

    jquery实现图片样式的滚动条

    1. **滚动条样式自定义**:你可以指定滚动条的外观,包括轨道的颜色、宽度、形状,以及滑块(即实际移动的部分)的样式。甚至可以使用图片作为背景,实现更加个性化的视觉效果。 2. **动态效果**:jQuery的动画功能...

    滚动条案例

    在滚动条案例中,开发者可能使用JavaScript来实现更高级的功能,如平滑滚动、滚动监听、滚动事件处理等。例如,以下代码可以实现平滑滚动: ```javascript function smoothScroll(target) { const speed = 50; // ...

Global site tag (gtag.js) - Google Analytics