红泪 - 博客园

js拖动

以下网址是一段js拖动的代码,

http://www.jb51.net/article/10578.htm

我感觉这东西用在网页的广告上很有用，所以记一下

<html>
<head><title>拖动效果函数演示 by Longbill.cn</title>
<style>
body
{
font-size:12px;
color:#333333;
border : 0px solid blue;
}
div
{
position : absolute;
background-color : #c3d9ff;
margin : 0px;
padding : 5px;
border : 0px;
width : 100px;
height:100px;
}
</style>
</head>
<body>
<script>
function drag(o,s)
{
if (typeof o == "string") o = document.getElementById(o);
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
o.orig_index = o.style.zIndex;

o.onmousedown = function(a)
{
this.style.cursor = "move";
this.style.zIndex = 10000;
var d=document;
if(!a)a=window.event;
var x = a.clientX+d.body.scrollLeft-o.offsetLeft;
var y = a.clientY+d.body.scrollTop-o.offsetTop;
//author: www.longbill.cn
d.ondragstart = "return false;"
d.onselectstart = "return false;"
d.onselect = "document.selection.empty();"

if(o.setCapture)
o.setCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);

d.onmousemove = function(a)
{
if(!a)a=window.event;
o.style.left = a.clientX+document.body.scrollLeft-x;
o.style.top = a.clientY+document.body.scrollTop-y;
o.orig_x = parseInt(o.style.left) - document.body.scrollLeft;
o.orig_y = parseInt(o.style.top) - document.body.scrollTop;
}

d.onmouseup = function()
{
if(o.releaseCapture)
o.releaseCapture();
else if(window.captureEvents)
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
d.onmousemove = null;
d.onmouseup = null;
d.ondragstart = null;
d.onselectstart = null;
d.onselect = null;
o.style.cursor = "normal";
o.style.zIndex = o.orig_index;
}
}

if (s)
{
var orig_scroll = window.onscroll?window.onscroll:function (){};
window.onscroll = function ()
{
orig_scroll();
o.style.left = o.orig_x + document.body.scrollLeft;
o.style.top = o.orig_y + document.body.scrollTop;
}
}
}
</script>

<div id="div1" style="left:10px;top:10px;">div1:我可以被拖动</div>
<div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀</div>
<div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:我随便你拖</div>
<div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网页看看</div>
<div id="div5" style="left:120px;top:120px;background-color : #f3d944">作者: Longbill
<a href=http://www.longbill.cn target=_blank>www.longbill.cn</a>
</div>
<div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;">参数说明:

drag(obj [,scroll]);

obj:对象的id或对象本身;

scroll(可选):对象是否随窗口拖动而滑动，默认为否

鼠标右键查看源代码
</div>

<script>
drag("div1");
drag("div2");
drag("div3");
drag("div4",1);
drag("div5",1);
drag("div6",1);

</script>

</body>

posted @ 2008-11-14 14:17 红泪阅读(658) 评论(1) 编辑

很有意思的一段js程序

javascript:R=0;x1=.1;y1=.05;x2=.25;y2=.24;x3=1.6;y3=.24;x4=300;y4=200;x5=300;y5=200;DI=document.images;DIL=DI.length;function A(){for(i=0;i-DIL;i++){DIS=DI[i].style;DIS.position='absolute';DIS.left=Math.cos(R*x1+i*x2+x3)*x4+x5;DIS.top=Math.sin(R*y1+i*y2+y3)*y4+y5}R++}setInterval('A()',5);void(0);

打开个带有图片的网页，把上面代码贴到浏览器地址栏回车看看效果。
好玩吧，呵呵～～

posted @ 2008-11-12 09:32 红泪阅读(171) 评论(3) 编辑

Flash 《水珠上浮效果》

刚发现个Flash实现的水上浮效果的实例，

自己动手做了一下，感觉很好

发上来，大家一起爽一下

下面是代码

具体步骤：

1.开MX新建一文档。并适当修改文档属性（400×300，蓝色背景）。

2.建一个影片剪辑，命名为“h2o”。进入编辑区以后，利用绘图工具，渐变填充绘制一个水泡。

3.回到主场景，把图层1命名为“h2o”。从库中把“h2o”影片剪辑拖放到场景的下方，在下面的属性面板中命名它的分身名为“h2o”。

4.主场景中新建一个图层，命名为“as”。在第1帧添加AS：

i=1
while(i<=30){
       duplicateMovieClip("h2o","h2o"+i,i);
       setProperty("h2o"+i,_x,random(400));
       setProperty("h2o"+i,_y,random(100)+300);
       setProperty("h2o"+i,_xscale,random(60)+40);
       setProperty("h2o"+i,_yscale,getProperty(eval("h2o"+i),_xscale));
       setProperty("h2o"+i,_alpha,random(30)+70);
       i++
}
_root.h2o._visible=0

5.具体解释如下：

i=1                                  //初始化变量
while(i<=30){                             //用来控制水珠的数量
duplicateMovieClip("h2o","h2o"+i,i);         //复制水珠
setProperty("h2o"+i,_x,random(400));        //在X轴上随机分布复制出的水珠
setProperty("h2o"+i,_y,random(100)+300);   //同上，只是换成了Y轴
setProperty("h2o"+i,_xscale,random(60)+40);
setProperty("h2o"+i,_yscale,getProperty(eval("h2o"+i),_xscale));
　　　　                                 //以上两条AS是用来控制水珠大小的。
setProperty("h2o"+i,_alpha,random(30)+70);//用来控制水珠的透明度
i++ ;
}
_root.h2o._visible=0 ;                     //将主场景中的水珠隐藏。

6.选中影片剪辑“H2O”，添加AS：

onClipEvent (load) {
speed = random(5)+3;
}
onClipEvent (enterFrame) {
this._y -= speed;
this._x += random(3)-random(3);
if (this._y<-15) {
this._y = random(100)+315;
}
}

7.上面的AS语句的意思是：

onClipEvent (load) {                 //用来随机赋于水珠的速度，让水珠运动更加真实。
speed = random(5)+3;
}
onClipEvent (enterFrame) {
this._y -= speed;                  //用来改变水珠Y轴的坐标，这样我们看起来水珠是在不断在上升。
this._x += random(3)-random(3);   //为了上水珠运动更真实些，我们上水珠左右晃动一下。
if (this._y<-15) {                  //此IF语句的作用是当水珠移出屏幕时，重新放回屏幕中来。
  this._y = random(100)+315;
}
}

8.保存测试吧！

posted @ 2008-07-19 21:33 红泪阅读(612) 评论(2) 编辑