跟随鼠标的折叠图片

人气：　来源：本站原创　作者：佚名　所属栏目：鼠标类　[切换到繁體中文]

介绍：鼠标移动后折叠图片拉开显示全貌。

演示：

<!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=gb2312" />
<title>站长手册_特效演示_跟随鼠标的折叠图片</title>
<style><!--body,td{font-size: 12px;}--></style>

</head>
<body bgcolor="" 无>
<table width="100%" height="1000" border="0" cellpadding="10" cellspacing="5">
<tr>
<td valign="top">
<SCRIPT>
<!-- Beginning of JavaScript -

// width and height of your image
var imgwidth=238
var imgheight=291

// number of slices the image is cut
var imgslices=12

// URL of your image
var imgurl="/texiao/zzsc_demo/13.jpg"

var width_slice=Math.ceil(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice

var postop=0
var thispos=0

var x,y
var flag=0
var box

function handlerMM(e){
	x = event.clientX
	y = event.clientY
	flag=1
}

if (document.all) {
	document.onmousemove = handlerMM;
}

var xpos=new Array()
for (i=0;i<=imgslices;i++) {
	xpos[i]=-imgwidth
}

var ypos=new Array()
for (i=0;i<=imgslices;i++) {
	ypos[i]=-imgheight
}

function initiateworm() {
	if (document.all) {makeworm()}
}

function makeworm() {
	if (flag==1) {
    	for (i=imgslices; i>=0; i--) {
			thispos=width_slice
   			xpos[i]=xpos[i-1]-thispos
			ypos[i]=ypos[i-1]
    	}
		xpos[0]=x
		ypos[0]=y
		thispos=0
		for (i=0; i<imgslices; i++) {
    		var thisspan = eval("document.all.span"+(i)+".style")
    		thisspan.posLeft=xpos[i]
			thisspan.posTop=ypos[i]
    	}
	}
	var timer=setTimeout("makeworm()",10)
}

document.write('<body bgcolor=#33CC33 onLoad=initiateworm()>')

for (i=0;i<=imgslices-1;i++) {
    document.write("<span id='span"+i+"' style='position:absolute;visibility:visible;left:"+(-imgheight)+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
	document.write("<img src="+imgurl+">")
    document.write("</span>")
	clipleft+=width_slice
	clipright+=width_slice
}

// - End of JavaScript - -->

</SCRIPT>
</td>
</tr>
</table>
</body>
</html>

[Ctrl+A全选提示：你可先修改部分代码，再按运行]

下面教你如何应用此特效：
　--------------------------------------------------------------------------------------
　　需要在<body 这里>加入的代码：无
　--------------------------------------------------------------------------------------

以下代码加到<head>…</head>中

以下代码加到<body>…</body>中

<SCRIPT>
<!-- Beginning of JavaScript -

// width and height of your image
var imgwidth=238
var imgheight=291

// number of slices the image is cut
var imgslices=12

// URL of your image
var imgurl="/texiao/zzsc_demo/13.jpg"

var width_slice=Math.ceil(imgwidth/imgslices)
var cliptop=0
var clipbottom=imgheight
var clipleft=0
var clipright=width_slice

var postop=0
var thispos=0

var x,y
var flag=0
var box

function handlerMM(e){
x = event.clientX
y = event.clientY
flag=1
}

if (document.all) {
document.onmousemove = handlerMM;
}

var xpos=new Array()
for (i=0;i<=imgslices;i++) {
xpos[i]=-imgwidth
}

var ypos=new Array()
for (i=0;i<=imgslices;i++) {
ypos[i]=-imgheight
}

function initiateworm() {
if (document.all) {makeworm()}
}

document.write('<body bgcolor=#33CC33 onLoad=initiateworm()>')

for (i=0;i<=imgslices-1;i++) {
document.write("<span id='span"+i+"' style='position:absolute;visibility:visible;left:"+(-imgheight)+"px;clip:rect("+cliptop+"px "+clipright+"px "+clipbottom+"px "+clipleft+"px)'>")
document.write("<img src="+imgurl+">")
document.write("</span>")
clipleft+=width_slice
clipright+=width_slice
}

// - End of JavaScript - -->

</SCRIPT>