【荐】JS+CSS实现的鼠标控制小球特效

您的当前位置：网页代码站 >> 图片特效 >> 【荐】JS+CSS实现的鼠标控制小球特效

【荐】JS+CSS实现的鼠标控制小球特效

分类：图片特效时间：2010-08-08 点击：

关键词：JS|css|网页代码|代码|

<!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>
		<title>【荐】JS+CSS实现的鼠标控制小球特效 - www.webdm.cn</title>
<style type="text/css">

	body {
		margin: 0px;
		padding: 0px;
		background: #000;
		position: absolute;
		width: 100%;
		height: 100%;
	}
	.thumb {
		position: relative;
		float: left;
		display: block;
		width: 47%;
		height: 46%;
		margin-left: 2%;
		margin-top: 2%;
		overflow: hidden;
		cursor: crosshair;
	}
	.thumb img {
		position: absolute;
	}
</style>


<script type="text/javascript">
var thu = [];

function run(){
	for (var i in thu) thu[i].scroll();
	setTimeout(run, 16);
}

function scroll(){
	var div = document.body.getElementsByTagName('div');
	for(var i = 0, n = div.length; i < n; i++) {
		var o = div[i];
		if (o.className.indexOf('thumb') >= 0) {
			thu.push(o);
			o.img = o.getElementsByTagName('img')[0];
			o.nwi = o.img.width;
			o.nhi = o.img.height;
			o.img = o.img.style;
			o.x0  = 0;
			o.y0  = 0;
			o.xm  = 0;
			o.ym  = 0;
			o.onmousemove = function (e) {
				if (window.event) e = window.event;
				this.xm = e.clientX;
				this.ym = e.clientY;
			}
			o.scroll = function () {
				var xmo = Math.min(this.nw, Math.max(0, this.xm - this.nx));
				var ymo = Math.min(this.nh, Math.max(0, this.ym - this.ny));
				var x = -xmo * (this.nwi / this.nw) + xmo;
				var y = -ymo * (this.nhi / this.nh) + ymo;
				this.x0 += ((this.x0 > x) ? -1 : 1) * Math.abs(this.x0 - x) * .1;
				this.y0 += ((this.y0 > y) ? -1 : 1) * Math.abs(this.y0 - y) * .1;
				this.img.left = ''.concat(Math.round(this.x0), 'px');
				this.img.top  = ''.concat(Math.round(this.y0), 'px');
			}
			o.onresize = function () {
				this.nx = 0;
				this.ny = 0;
				this.nw = this.offsetWidth;
				this.nh = this.offsetHeight;
				for (var o = this; o != null; o = o.offsetParent) this.nx += o.offsetLeft, this.ny += o.offsetTop;
			}
			o.onresize();
		}
	}
	run();
}

onload = function() {
	scroll();
}

</script>

	</head>
<body>
<div class="thumb"><img alt="" src="
http://www.webdm.cn/images/20100808/12492980870.jpg"></div>
<div class="thumb"><img alt="" src="
http://www.webdm.cn/images/20100808/12492980871.jpg"></div>

<br />
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质

量的代码！</p>
</body>
</html>

运行代码全选代码复制代码保存代码友情提示

【荐】JS+CSS实现的鼠标控制小球特效，很有立体真实感。

一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。
运行代码方式：
1、点击“复制”按钮；
2、在桌面建立一个txt文档；
3、粘贴复制的代码；
4、最后把txt的扩展名改为“htm”或“html”；
5、完成，打开即可看到效果。

二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！

三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！

四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！

来顶一下

上一篇：JS算算以后的时间
下一篇：光标选择输入框