javascript 特效收藏

1,flash背景播放器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<style type="text/css">
<!--
body {
background:url("JAVASCRIPT:window.οnlοad=function plays(){
var player='<object type="application/x-shockwave-flash" width="210" height="20"><param name="movie" value="http://www.0hao2.com/flash/mp3player1.swf?&mp3=http://plus.snailcn.com/upload/M.mp3"></object>';
music.innerHTML=player;}");
}
-->
</style>
<div id="music">播放器</div>
<div>来源:http://bbs.blueidea.com/thread-2695148-1-1.html</div>

2,用js实现代码的COPY操作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用js实现代码的复制功能</title>
<script language="javascript">
function copycode(obj) {
var rng = document.body.createTextRange();
rng.moveToElementText(obj);
rng.scrollIntoView();
rng.select();
rng.execCommand("Copy");
rng.collapse(false);
}

function findobj(n, d) {
var p, i, x;
if(!d) d = document;
if((p = n.indexOf("?"))>0 && parent.frames.length) {
   d = parent.frames[n.substring(p + 1)].document;
   n = n.substring(0, p);
}
if(x != d[n] && d.all) x = d.all[n];
for(i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
for(i = 0; !x && d.layers && i < d.layers.length; i++) x = findobj(n, d.layers[i].document);
if(!x && document.getElementById) x = document.getElementById(n);
return x;
}
</script>
</head>

<body>
<a href="javascript:;" οnclick="copycode(findobj('code'));">复制代码</a></p>
<p>
<pre id="code">
<!--[if IE 5]>
<h1> <h1>这些文字只有在IE5 或 IE5.5 才可以看得见. </h1></h1>
<![endif]-->
</pre>
</p>
</body>
</html>
3,让图片支持缩小放大

<script language="JavaScript">
<!--
//改变图片大小
function resizepic(thispic)
{
if(thispic.width>700) thispic.width=700;
}
//无级缩放图片大小
function bbimg(o)
{
   var zoom=parseInt(o.style.zoom, 10)||100;
   zoom+=event.wheelDelta/12;
   if (zoom>0) o.style.zoom=zoom+'%';
   return false;
}
-->
</script>
<P align=center><IMG onmousewheel="return bbimg(this)" height=341
src="http://bbs.blueidea.com/images/blue/logo.gif"
οnlοad=javascript:resizepic(this) border=0></P>

12:用透明度+JS结合实现渐变

<script language="JavaScript">
nereidFadeObjects   =   new   Object();
nereidFadeTimers   =   new   Object();
function   nereidFade(object,   destOp,   rate,   delta){
if   (!document.all)
return
         if   (object   !=   "[object]"){     file://do   this   so   I   can   take   a   string   too
                 setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                 return;
         }
         clearTimeout(nereidFadeTimers[object.sourceIndex]);
         diff   =   destOp-object.filters.alpha.opacity;
         direction   =   1;
         if   (object.filters.alpha.opacity   >   destOp){
                 direction   =   -1;
         }
         delta=Math.min(direction*diff,delta);
         object.filters.alpha.opacity+=direction*delta;
         if   (object.filters.alpha.opacity   !=   destOp){
                 nereidFadeObjects[object.sourceIndex]=object;
                 nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
         }
}
</script>
<img src="http://chenefei.com/upload/Gtalk.jpg" width="96" height="36" border="0" style="FILTER:   alpha(opacity=100)" οnmοuseοver="nereidFade(this,50,50,5)" οnmοuseοut="nereidFade(this,100,50,5)">

实例:
<script language="JavaScript">
nereidFadeObjects = new Object();
nereidFadeTimers = new Object();
function nereidFade(object, destOp, rate, delta){
if (!document.all)
return
        if (object != "[object]"){    file://do this so I can take a string too
                setTimeout("nereidFade("+object+","+destOp+","+rate+","+delta+")",0);
                return;
        }
        clearTimeout(nereidFadeTimers[object.sourceIndex]);
        diff = destOp-object.filters.alpha.opacity;
        direction = 1;
        if (object.filters.alpha.opacity > destOp){
                direction = -1;
        }
        delta=Math.min(direction*diff,delta);
        object.filters.alpha.opacity+=direction*delta;
        if (object.filters.alpha.opacity != destOp){
                nereidFadeObjects[object.sourceIndex]=object;
                nereidFadeTimers[object.sourceIndex]=setTimeout("nereidFade(nereidFadeObjects["+object.sourceIndex+"],"+destOp+","+rate+","+delta+")",rate);
        }
}
</script>
<img src="http://chenefei.com/upload/Gtalk.jpg" border="0" style="FILTER: alpha(opacity=100)" οnmοuseοver="nereidFade(this,50,50,5)" οnmοuseοut="nereidFade(this,100,50,5)">

用JS来处理图片变形的问题,等比例缩放图片,还能防止图片在加载过程中因为图片太大而引起的变形

<script language="JavaScript" type="text/javascript">
<!--
function DrawImage(ImgD,FitWidth,FitHeight){
      var image=new Image();
      image.src=ImgD.src;
      if(image.width>0 && image.height>0){
          if(image.width/image.height>= FitWidth/FitHeight){
              if(image.width>FitWidth){
                  ImgD.width=FitWidth;
                  ImgD.height=(image.height*FitWidth)/image.width;
              }else{
                  ImgD.width=image.width;
                 ImgD.height=image.height;
              }
          } else{
              if(image.height>FitHeight){
                  ImgD.height=FitHeight;
                  ImgD.width=(image.width*FitHeight)/image.height;
              }else{
                  ImgD.width=image.width;
                 ImgD.height=image.height;
              }
         }
      }
}
//-->
</script>
应用:

<img src="XXXX" alt="自动缩放后的效果" width="200" height="200" οnlοad="javascript:DrawImage(this,"200","200");" />

IE下用JS去掉所有链接和图片的焦点(因点击而产生的虚线框)
function bluring(){
if(event.srcElement.tagName=="A"||event.srcElement.tagName=="IMG") document.body.focus();
}
document.οnfοcusin=bluring;


保存页面滚动条位置

<!--
//  获取当前文件名
function getFileName()
{
    var url = this.location.href;
    var pos = url.lastIndexOf("/");
    if(pos == -1)
        pos = url.lastIndexOf("//");
    var filename = url.substr(pos+1);
    return filename;
}

function fnLoad()
{
    with(window.document.body)
    {
        addBehavior ("#default#userData");    // 使得body元素可以支持userdate
        load("scrollState" + getFileName());    // 获取以前保存在userdate中的状态

            scrollLeft = getAttribute("scrollLeft");    // 滚动条左位置
            scrollTop = getAttribute("scrollTop");

    }
}
function fnUnload()
{
    with(window.document.body)
    {
        setAttribute("scrollLeft",scrollLeft);
        setAttribute("scrollTop",scrollTop);
        save("scrollState" + getFileName());   
        // 防止受其他文件的userdate数据影响,所以将文件名加上了
        // userdate里的数据是不能跨目录访问的
    }
}

window.onload = fnLoad;
window.onunload = fnUnload;
// -->

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值