网页上的前后左右滚动特效代码示例

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<HTML>
<HEAD>
<TITLE>滚动效果</TITLE>
</HEAD>
<BODY STYLE="overflow: hidden; border: 0" topmargin=0 leftmargin=0>
<table>
<tr><td style="padding: 5">
<div id="testDiv" style="border: buttonface 2 solid">
<img src="/favicon.ico">
</div>
<script language="JScript">
function scroll(obj, oWidth, oHeight, direction, drag, zoom, speed)
{
	var scrollDiv		= obj
	var scrollContent	= document.createElement("span")
	scrollContent.style.position = "absolute"
	scrollDiv.applyElement(scrollContent, "inside")
	var displayWidth	= (oWidth  != "auto" && oWidth ) ? oWidth  : scrollContent.offsetWidth  + parseInt(scrollDiv.currentStyle.borderRightWidth)
	var displayHeight	= (oHeight != "auto" && oHeight) ? oHeight : scrollContent.offsetHeight + parseInt(scrollDiv.currentStyle.borderBottomWidth)
	var contentWidth	= scrollContent.offsetWidth
	var contentHeight	= scrollContent.offsetHeight
	var scrollXItems	= Math.ceil(displayWidth  / contentWidth)  + 1
	var scrollYItems	= Math.ceil(displayHeight / contentHeight) + 1
	scrollDiv.style.width	 = displayWidth
	scrollDiv.style.height	 = displayHeight
	scrollDiv.style.overflow = "hidden"
	scrollDiv.setAttribute("state", "stop")
	scrollDiv.setAttribute("drag", drag ? drag : "horizontal")
	scrollDiv.setAttribute("direction", direction ? direction : "left")
	scrollDiv.setAttribute("zoom", zoom ? zoom : 1)
	scrollContent.style.zoom = scrollDiv.zoom
	
	var scroll_script =	"var scrollDiv = " + scrollDiv.uniqueID										+"\n"+
				"var scrollObj = " + scrollContent.uniqueID									+"\n"+
				"var contentWidth = " + contentWidth + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"	+"\n"+
				"var contentHeight = " + contentHeight + " * (scrollObj.runtimeStyle.zoom ? scrollObj.runtimeStyle.zoom : 1)"	+"\n"+
				"var scrollx = scrollObj.runtimeStyle.pixelLeft"								+"\n"+
				"var scrolly = scrollObj.runtimeStyle.pixelTop"									+"\n"+
				"switch (scrollDiv.state.toLowerCase())"								+"\n"+
				"{"													+"\n"+
					"case ('scroll')	:"									+"\n"+
						"switch (scrollDiv.direction)"								+"\n"+
						"{"											+"\n"+
							"case ('left')		:"							+"\n"+
								"scrollx = (--scrollx) % contentWidth"					+"\n"+
								"break"									+"\n"+
							"case ('right')	:"								+"\n"+
								"scrollx = -contentWidth + (++scrollx) % contentWidth"			+"\n"+
								"break"									+"\n"+
							"case ('up')	:"								+"\n"+
								"scrolly = (--scrolly) % contentHeight"					+"\n"+
								"break"									+"\n"+
							"case ('down')	:"								+"\n"+
								"scrolly = -contentHeight + (++scrolly) % contentHeight"		+"\n"+
								"break"									+"\n"+
							"case ('left_up')	:"							+"\n"+
								"scrollx = (--scrollx) % contentWidth"					+"\n"+
								"scrolly = (--scrolly) % contentHeight"					+"\n"+
								"break"									+"\n"+
							"case ('left_down')	:"							+"\n"+
								"scrollx = (--scrollx) % contentWidth"					+"\n"+
								"scrolly = -contentHeight + (++scrolly) % contentHeight"		+"\n"+
								"break"									+"\n"+
							"case ('right_up')	:"							+"\n"+
								"scrollx = -contentWidth + (++scrollx) % contentWidth"			+"\n"+
								"scrolly = (--scrolly) % contentHeight"					+"\n"+
								"break"									+"\n"+
							"case ('right_down')	:"							+"\n"+
								"scrollx = -contentWidth + (++scrollx) % contentWidth"			+"\n"+
								"scrolly = -contentHeight + (++scrolly) % contentHeight"		+"\n"+
								"break"									+"\n"+
							"default		:"							+"\n"+
								"return"								+"\n"+
						"}"											+"\n"+
						"scrollObj.runtimeStyle.left = scrollx"							+"\n"+
						"scrollObj.runtimeStyle.top = scrolly"							+"\n"+
						"break"											+"\n"+
	
					"case ('stop')	:"										+"\n"+
					"case ('drag')	:"										+"\n"+
					"default	:"										+"\n"+
						"return"										+"\n"+
				"}"
	
	var contentNode = document.createElement("span")
	contentNode.runtimeStyle.position = "absolute"
	contentNode.runtimeStyle.width = contentWidth
	scrollContent.applyElement(contentNode, "inside")
	for (var i=0; i <= scrollXItems; i++)
	{
		for (var j=0; j <= scrollYItems ; j++)
		{
			if (i+j == 0)	continue
			var tempNode = contentNode.cloneNode(true)
			var contentLeft, contentTop
			scrollContent.insertBefore(tempNode)
			contentLeft = contentWidth * i
			contentTop = contentHeight * j
			tempNode.runtimeStyle.left = contentLeft
			tempNode.runtimeStyle.top  = contentTop
		}
	}
	scrollDiv.onpropertychange = function()
	{
		var propertyName = window.event.propertyName
		var propertyValue = eval("this." + propertyName)
		
		switch(propertyName)
		{
			case "zoom"		:
				var scrollObj = this.children[0]
				scrollObj.runtimeStyle.zoom = propertyValue
				var content_width  = scrollObj.children[0].offsetWidth  * propertyValue
				var content_height = scrollObj.children[0].offsetHeight * propertyValue
				scrollObj.runtimeStyle.left = -content_width  + (scrollObj.runtimeStyle.pixelLeft % content_width)
				scrollObj.runtimeStyle.top  = -content_height + (scrollObj.runtimeStyle.pixelTop  % content_height)
				break
		}
	}
	
	scrollDiv.onlosecapture = function()
	{
		this.state = this.tempState ? this.tempState : this.state
		this.runtimeStyle.cursor = ""
		this.removeAttribute("tempState")
		this.removeAttribute("start_x")
		this.removeAttribute("start_y")
		this.removeAttribute("default_left")
		this.removeAttribute("default_top")
	}
	
	scrollDiv.onmousedown = function()
	{
		if (this.state != "drag")	this.setAttribute("tempState", this.state)
		this.state = "drag"
		this.runtimeStyle.cursor = "default"
		this.setAttribute("start_x", event.clientX)
		this.setAttribute("start_y", event.clientY)
		this.setAttribute("default_left", this.children[0].style.pixelLeft)
		this.setAttribute("default_top", this.children[0].style.pixelTop)
		this.setCapture()
	}
	
	scrollDiv.onmousemove = function()
	{
		if (this.state != "drag")	return
		var scrollx = scrolly = 0
		var zoomValue = this.children[0].style.zoom ? this.children[0].style.zoom : 1
		var content_width = this.children[0].children[0].offsetWidth * zoomValue
		var content_Height = this.children[0].children[0].offsetHeight * zoomValue
		if (this.drag == "horizontal" || this.drag == "both")
		{
			scrollx = this.default_left + event.clientX - this.start_x
			scrollx = -content_width + scrollx % content_width
			this.children[0].runtimeStyle.left = scrollx
		}
		if (this.drag == "vertical" || this.drag == "both")
		{
			scrolly = this.default_top + event.clientY - this.start_y
			scrolly = -content_Height + scrolly % content_Height
			this.children[0].runtimeStyle.top = scrolly
		}
	}
	
	scrollDiv.onmouseup = function()
	{
		this.releaseCapture()
	}
	
	scrollDiv.state = "scroll"
	setInterval(scroll_script, speed ? speed : 20)
}
</script>
<script language="JScript">
window.onload = new Function("scroll(document.all['testDiv'], 325)")
</script>
<br>
<button onclick="testDiv.direction='up'; testDiv.state='scroll'"><span style="font-family: Webdings">5</span>向上</button>
<button onclick="testDiv.direction='left'; testDiv.state='scroll'"><span style="font-family: Webdings">3</span>向左</button>
<button onclick="testDiv.state='stop'"><span style="font-family: Webdings">;</span>停止</button>
<button onclick="testDiv.state='scroll'"><span style="font-family: Webdings">8</span>播放</button>
<button onclick="testDiv.direction='right'; testDiv.state='scroll'"><span style="font-family: Webdings">4</span>向右</button>
<button onclick="testDiv.direction='down'; testDiv.state='scroll'"><span style="font-family: Webdings">6</span>向下</button>
<br>
缩放：
<select onchange="testDiv.zoom = this.options[selectedIndex].value">
	<option value=1>100%</option>
	<option value=2>200%</option>
	<option value=3>300%</option>
</select>　　　　　
托动范围：
<select onchange="testDiv.drag = this.options[selectedIndex].value">
	<option value="both">随意</option>
	<option value="horizontal" selected>横向</option>
	<option value="vertical">纵向</option>
</select>
</td></tr>
</table>
</BODY>
</HTML>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

网页上的前后左右滚动特效代码示例

分类

图片代码

描述

网页上的滚动效果代码，前后左右滚动的示例，上下左右都可滚动，随你的控制，很实用的代码吧。在滚动的时候，鼠标还可以拖动，但是你会发现，即使你拖动了，它还是照样会按照原来的方向滚动。