javascript 特效收藏

最新推荐文章于 2020-11-04 19:44:29 发布

fredlau

最新推荐文章于 2020-11-04 19:44:29 发布

阅读量763

点赞数

分类专栏： JavaScript 文章标签： javascript object function xhtml border filter

本文链接：https://blog.csdn.net/fredlau/article/details/2451045

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

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">

</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">

</pre>
</p>
</body>
</html>
3,让图片支持缩小放大

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" border="0" style="FILTER: alpha(opacity=100)" οnmοuseοver="nereidFade(this,50,50,5)" οnmοuseοut="nereidFade(this,100,50,5)">

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

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;
// -->