可用鼠标拖动的漂浮图片

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

介绍：页面上漂浮的广告，添加了可以用鼠标拖动的功能。

演示：

<!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">
<div id=img style="LEFT:0px;POSITION: absolute; TOP: 0px;" onmousedown="oMousedown(img);"> 
<img src="/texiao/zzsc_demo/20.jpg" border=0>
</div>
<SCRIPT language=JavaScript> 
document.onmousemove=oMousemove;
document.onmouseup=oMouseup;
var yflag = 0;
var xflag = 0;
var ob = img;
var obj = "";

function check() {
img.style.left=ob.style.pixelLeft+document.body.scrollLeft; 
img.style.top=ob.style.pixelTop+document.body.scrollTop; 

if(xflag) {ob.style.pixelLeft++;}
else {ob.style.pixelLeft--;}

if (ob.offsetLeft<0){
xflag = 1;
ob.style.left = 0;
}
if(ob.offsetLeft>=(document.body.clientWidth+document.body.scrollLeft)-ob.offsetWidth){
xflag = 0;
ob.style.left = (document.body.clientWidth+document.body.scrollLeft)-ob.offsetWidth;
}
if(yflag) {ob.style.pixelTop++;}
else {ob.style.pixelTop--;}
if (ob.offsetTop<0){
yflag = 1;
ob.style.top = 0;
}
if(ob.offsetTop>=(document.body.clientHeight+document.body.scrollTop)-ob.offsetHeight){
yflag = 0;
ob.style.top = (document.body.clientHeight+document.body.scrollTop)-ob.offsetHeight;
}
}

function start() {
interval = setInterval("check();",10);
} 

start();

function oMousedown(object){
obj=object.id;
clearInterval(interval);
document.all(obj).setCapture();
px=event.x-document.all(obj).style.pixelLeft;
py=event.y-document.all(obj).style.pixelTop;
}

function oMousemove(){
if(obj!=""){
if ((event.x-px)>-1 && (event.x-px)<(document.body.scrollLeft+document.body.clientWidth-document.all(obj).offsetWidth)) {document.all(obj).style.left=event.x-px;}
else if ((event.x-px)<0) {document.all(obj).style.left=0;}
else if ((event.x-px)>(document.body.scrollLeft+document.body.clientWidth-document.all(obj).offsetWidth)) {document.all(obj).style.left=document.body.scrollLeft+document.body.clientWidth-document.all(obj).offsetWidth;}
if ((event.y-py)>-1 && (event.y-py)<(document.body.scrollTop+document.body.clientHeight-document.all(obj).offsetHeight)) { document.all(obj).style.top=event.y-py;}
else if ((event.y-py)<0) {document.all(obj).style.top=0;}
else if((event.y-py)>(document.body.scrollTop+document.body.clientHeight-document.all(obj).offsetHeight)){document.all(obj).style.top=document.body.scrollTop+document.body.clientHeight-document.all(obj).offsetHeight;}
}
}


function oMouseup(){
if(obj!=""){
document.all(obj).releaseCapture();
obj="";
}
setTimeout("start()",100);
}
</SCRIPT>
</td>
</tr>
</table>
</body>
</html>

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

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

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

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

<div id=img style="LEFT:0px;POSITION: absolute; TOP: 0px;" onmousedown="oMousedown(img);">
<img src="/texiao/zzsc_demo/20.jpg" border=0>
</div>
<SCRIPT language=JavaScript>
document.onmousemove=oMousemove;
document.onmouseup=oMouseup;
var yflag = 0;
var xflag = 0;
var ob = img;
var obj = "";

function check() {
img.style.left=ob.style.pixelLeft+document.body.scrollLeft;
img.style.top=ob.style.pixelTop+document.body.scrollTop;

if(xflag) {ob.style.pixelLeft++;}
else {ob.style.pixelLeft--;}

if (ob.offsetLeft<0){
xflag = 1;
ob.style.left = 0;
}
if(ob.offsetLeft>=(document.body.clientWidth+document.body.scrollLeft)-ob.offsetWidth){
xflag = 0;
ob.style.left = (document.body.clientWidth+document.body.scrollLeft)-ob.offsetWidth;
}
if(yflag) {ob.style.pixelTop++;}
else {ob.style.pixelTop--;}
if (ob.offsetTop<0){
yflag = 1;
ob.style.top = 0;
}
if(ob.offsetTop>=(document.body.clientHeight+document.body.scrollTop)-ob.offsetHeight){
yflag = 0;
ob.style.top = (document.body.clientHeight+document.body.scrollTop)-ob.offsetHeight;
}
}

function start() {
interval = setInterval("check();",10);
}

start();

function oMousedown(object){
obj=object.id;
clearInterval(interval);
document.all(obj).setCapture();
px=event.x-document.all(obj).style.pixelLeft;
py=event.y-document.all(obj).style.pixelTop;
}

function oMouseup(){
if(obj!=""){
document.all(obj).releaseCapture();
obj="";
}
setTimeout("start()",100);
}
</SCRIPT>