guanggan123

2008年11月14日

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) 编辑

2008年11月12日

很有意思的一段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) 编辑

2008年7月19日

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) 编辑

2008年7月10日

晚上不睡觉,搞的一个例子《JS实现动画》

照着例子做了一个程序,感觉很爽

点击查看

posted @ 2008-07-10 23:03 红泪 阅读(77) 评论(2) 编辑

2008年7月7日

宁波.NET俱乐部(08年07月06日)网页设计讲座

主讲:红泪

说明:请到群共享里下载课件查看详细 到下面的地址下载 ,欢迎您的评论

2008年7月6日网页设计讲座(上半部分)
2008年7月6日网页设计讲座(下半部分)

相关附件:

标准三行两列CSS代码
二十四种基本配色参考-1
二十四种基本配色参考-2
二十四种基本配色参考-3
二十四种基本配色参考-4

下载说明:由于博客园限制大小,所以内容分两部分上传的,请大家谅解

内容简介:

一、网站配色
 

  l颜色的简单介绍
 
l彩色的搭配

   l基本的配色设计 
    
二、网页制作

  l网页制作流程 

   lTable布局 

  lDIV+CSS布局  


三、案例分析


现场图片




posted @ 2008-07-07 09:58 红泪 阅读(209) 评论(3) 编辑

2008年6月18日

高手赐招 网页制作经典技巧24条

摘要: 高手赐招 网页制作经典技巧24条 提示:使用前请把大写状态下"<>"改为小写状态下的"<>"   01.让背景图不滚动   IE浏览器支持一个Body属性bgproperties,它可以让背景不滚动:   〈BodyBackground="图片文件"bgproperties="fixed"〉   02.让你的网页无法另存为   <noscript><iframesrc=*></ifra...阅读全文

posted @ 2008-06-18 15:40 红泪 阅读(70) 评论(0) 编辑

网页常用特效整理

摘要: 网页常用特效整理:初级篇 1.让文字不停地滚动   <MARQUEE>滚动文字</MARQUEE>   2.记录并显示网页的最后修改时间   <scriptlanguage=JavaScript>   document.write("最后更新时间:"+document.lastModified+"")   </script>   3.关闭当前窗口   <ahref="/"onClick="java...阅读全文

posted @ 2008-06-18 15:24 红泪 阅读(142) 评论(1) 编辑

2008年6月16日

javascript事件详细说明

摘要: javascript事件详细说明javascript事件列表解说javascript事件列表解说事件 浏览器支持 解说一般事件 onclick IE3、N2 鼠标点击时触发此事件ondblclick IE4、N4 鼠标双击时触发此事件onmousedown IE4、N4 按下鼠标时触发此事件onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件onmouseover IE3、N2 当鼠标...阅读全文

posted @ 2008-06-16 10:54 红泪 阅读(113) 评论(0) 编辑

<2012年2月>
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910

导航

统计

公告

昵称:红泪
园龄:3年7个月
粉丝:0
关注:0

搜索

 
 

常用链接

随笔档案

最新评论

阅读排行榜

评论排行榜

推荐排行榜