编程 |  数据库 |  安全 |  系统 |  服务器 |  嵌入式 |  设计 |  基础 |  组网 |  QQ | 

有趣的七彩板 滚动条 滑动DIVJS代码特效

作者:zhulike2011的专栏  发布日期:2013-12-16 21:41:06
  • 收藏本文    我要投稿
  • 把下面的代码运行起来,就会看到用法了,代码里有注释,所以就不多介绍了。

    <!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 type="text/css">
            <!--
            * {margin: 0px;padding:0}
            body {font-size: 14px;line-height: 24px;margin: 0px;padding: 0px;height: 1500px;}
            #show{width:200px;height:200px;background: red;position:fixed;left:-200px;top:220px; border:1px thin red}
            #show ul{list-style: none;font-size: 14px;}
            #show span {padding-Left:9px;width:20px;height:80px;position:absolute;left:200px;top:70px;background:darkseagreen;float: left}
            #nei {width:880px;height: 200px;margin-left: 30px;overflow: hidden}
            #content,#content1,#content2,#content3 { height:200px;margin-top: 40px;float: left;filter:alpha(opacity:30,style:1);opacity: 0.3;}
            #content {width:700px;background-color: red;}
            #content1{width:60px;background-color: green}
            #content2 {width:60px;background-color: yellow;}
            #content3 {width:60px;background-color: blue;}
            #div1 {width:200px; height: 200px;background-color: darkgreen;position: absolute;left:100px;top:230px;float: left}
            #div2{width:200px;height:200px;float:right;background-color:red;position:absolute;right:0;bottom: 0}
            input {size:20px;width:160px;height: 20px;position: relative;left:100px;top:210px;}
            #middle {width:800px;height:450px;position: absolute;left:100px;top:460px;overflow: hidden}
            #ok1le{width:800px;height: 150px;background-color:green;border: 1px red solid; }
            #ok2le{width:800px;height: 150px;background-color:red;border: 1px red solid; }
            #ok3le{width:800px;height: 150px;background-color:yellow;border: 1px red solid; }
            #midd {width:800px;height:450px;position: absolute;left:100px;top:460px;overflow: hidden}
            #ok1{width:800px;height: 150px;background-color:darkgreen;border: 1px red solid; }
            #ok2{width:800px;height: 150px;background-color:darkmagenta;border: 1px red solid; }
            #ok3{width:800px;height: 150px;background-color:yellowgreen;border: 1px red solid; }
            #weibo {position: absolute;left:100px;top:920px;}
            #weibo input {position:relative;left:-5px;top:0px;}
            #weibo ul li {list-style: none;border-bottom:1px dashed ;padding: 4px;width:500px;}
            #weibo ul {border:1px solid;width:500px;overflow:hidden}
            #tuoZhai{position:absolute;left:0px;top:0px;width:55px;height:65px;padding:5px;font-size: 10px;background-color:darkturquoise}
            #dash{position:absolute;left:960px;top:1000px;width:55px;height:65px;padding:5px;font-size: 10px;background-color:greenyellow}
            .box {border:1px dashed black;position: absolute;}
            #yuSu1 {width:1px;height:110px;background-color: black;position:absolute;left:100px;top:1070px;float:left}
            #yuSu2 {width:1px;height:110px;background-color:midnightblue;position:absolute;left:800px;top:1070px;float: left}
            #yuSu3 {width:1px;height:110px;background-color:fuchsia;position:absolute;left:300px;top:1070px;float: left}
            #yuSu4 {width:1px;height:110px;background-color:darkmagenta;position:absolute;left:500px;top:1070px;float: left}
            #yuSu1 span,#yuSu2 span,#yuSu3 span,#yuSu4 span {position:absolute;top:-15px;font-size:20px;color:red;font-weight: bold}
            #grap {width:100px;height:100px;background:darkmagenta;position:absolute;left:300px;top:1074px;float: left;}
            input.ok {width:100px; margin-left:-66px;margin-top:-90px;}
            #scrollBg {position: absolute;left:150px;top:1250px;width:800px;height: 30px;background-color: gray}
            #scrollDiv{position:absolute;left:0px;top:0px;width:50px;height:30px;font-size: 10px;background-color:yellow}
            #scroll {position: absolute;left:160px;top:1300px;width:760px;height:100px;overflow:hidden;border: 1px solid black }
            #scrollText {position:relative;left:10px;top:-100px;width:750px;height:350px;}
            -->
        </style>
        <script type="text/javascript">
            var speed=0;
            var alpha=30;
            var timer;var timerok;var timerscroll
            window.onload=function(){
              //下述代码有好几块都是结构相同,只是变量名不同而已,读者有心的话可以自己修改一下使代码变短
                var odiv=document.getElementById('content');
                var odiv1=document.getElementById('content1');
                var odiv2=document.getElementById('content2');
                var odiv3=document.getElementById('content3');
                var show=document.getElementById('show');
                var arr=[]
                arr=document.getElementById('midd').children;
                    for(var i=0;i<arr.length;i++){
                        arr[i].onmouseover=function(){
                                this.timer;
                                var self=this;
                                rollmove(this,{opacity:100,height:100},function(){
                                    rollmove(self,{height:50});          //链式运动演示
                                })
                        }
                        arr[i].onmouseout=function(){
                            var self=this;
                            rollmove(this,{opacity:30,height:50},function(){
                                rollmove(self,{height:150})
                        })
    
                    }
                }
                //拖拽操作的相关演示代码
                var div=document.getElementById('tuoZhai');
                var parDiv=document.getElementById('back');  //拖拽对象的父对象
                var xDis=0;
                var yDis=0;
                div.onmousedown=function(evt){
                    var pos=evt || event;
                    xDis=pos.clientX-this.offsetLeft;
                    yDis=pos.clientY-this.offsetTop;
                    div.onmousemove=function(evt){
                            var pos=evt || event;
                            var l=pos.clientX-xDis
                            var r=pos.clientY-yDis;
    
                            if(l<20){ l=0;} //磁性吸附的关键代码,就是因为直接将20变为0造成的边缘吸附现象
                            else if ( l>getStyle(parDiv,"width").replace(/px$/,'')-getStyle(div,"width").replace(/px$/,'')-30){
                                l=getStyle(parDiv,"width").replace(/px$/,'')-getStyle(div,"width").replace(/px$/,'')-10;
                            }
                            if(r<20){ r=0; }   //磁性吸附的关键代码,就是因为直接将20变为0造成的边缘吸附现象
                            else if(r>getStyle(parDiv,"height").replace(/px$/,'')-getStyle(div,"height").replace(/px$/,'')-30){
                                r=getStyle(parDiv,"height").replace(/px$/,'')-getStyle(div,"height").replace(/px$/,'')-10;
                            }
                            div.style.left=l+'px';
                            div.style.top=r+'px';
                        }
                        div.onmouseup=function(){
                            div.onmousemove=null; //必须清除
                            if(div.releaseCapture)
                                div.releaseCapture();  //for IE7,开锁动作,对应下面的加锁动作。
                        }
                        if(div.setCapture()) div.setCapture(); //这句话非常重要,但仅针对IE7这样才可以将所有的事件捕获并反应到div对象上,这个动作相当于加锁,要记着开锁
                    return false;// 防止bug
                }
                //虚线框相关演示代码
                var dashDiv=document.getElementById('dash');
                var dxDis=0;
                var dyDis=0;
                dashDiv.onmousedown=function(evt){
                    var pos=evt || event;
    
                    dxDis=pos.clientX-this.offsetLeft;
                    dyDis=pos.clientY-this.offsetTop;
                    var oBox=document.createElement('div')
    
                    oBox.className="box" ;
                    oBox.style.width=this.offsetWidth+'px'
                    oBox.style.height=this.offsetHeight+'px'
                    oBox.style.left=this.offsetLeft+'px'
                    oBox.style.top=this.offsetTop+'px'
                    this.style.backgroundColor='yellow'
                    document.body.appendChild(oBox)
                    document.onmousemove=function(evt){
                        var pos=evt || event;
                        var l=pos.clientX-dxDis
                        var r=pos.clientY-dyDis;
                        oBox.style.left=l+'px';
                        oBox.style.top=r+'px';
                    }
                    document.onmouseup=function(){
                        dashDiv.style.left=oBox.style.left
                        dashDiv.style.top=oBox.style.top
                        dashDiv.style.backgroundColor='greenyellow'
                        document.body.removeChild(oBox);//清除掉虚线框
                        document.onmousemove=null; //必须清除
                    }
                    return false;// 防止bug
                }
                //滚动条滚动文本演示
                var scrollDiv=document.getElementById('scrollDiv');
                var scrollBg=document.getElementById('scrollBg')
                var scroll=document.getElementById('scroll')
                var scrollText=document.getElementById('scrollText')
                var dDis=0;
                var dDis=0;
                scrollDiv.onmousedown=function(evt){
                    var pos=evt || event;
                    dDis=pos.clientX-this.offsetLeft;
                    document.onmousemove=function(evt){
                        var pos=evt || event;
                        var l=pos.clientX-dDis
                        if(l<0)l=0
                        if(l>(scrollBg.offsetWidth-scrollDiv.offsetWidth))l=scrollBg.offsetWidth-scrollDiv.offsetWidth;
                        scrollDiv.style.left=l+'px'
                        var cc=l/(scrollBg.offsetWidth-scrollDiv.offsetWidth);document.title=cc;
                        scrollText.style.top=-cc*(scrollText.offsetHeight-scroll.offsetHeight)+'px '
                    }
                    document.onmouseup=function(){
                        document.onmousemove=null; //必须清除
                    }
                }
                //阻止浏览器默认的右键菜单
                document.oncontextmenu=function(evt){    return false;}
                //数字输入框代码
                var checkNum=document.getElementById('numcheck')
                checkNum.onkeydown=function(etv){
                    var code=etv||event;//alert(code.keyCode),这个keyCode就是关键,代表具体的按键
                    if((code.keyCode<=105&&code.keyCode>=96)||(code.keyCode<=57&&code.keyCode>=48)||(code.keyCode>=37&&code.keyCode<=40)||code.keyCode==8){
                         return true;
                    }
                    return false;
                }
                show.onmouseover=function(){
                    move(0)
                }
                show.onmouseout=function(){
                     move(-200)
                }
                odiv.onmouseover=odiv1.onmouseover=odiv2.onmouseover=odiv3.onmouseover=function(){
                    this.alpha=30;
                    var self=this; this.timer
                    startmove(this,100,function(){
                        rollmove(self,{height:300})
                    });
                }
                odiv.onmouseout=odiv1.onmouseout=odiv2.onmouseout=odiv3.onmouseout=function(){
                    this.alpha=100;
                    var self=this;
                    startmove(this,30,function(){
                        rollmove(self,{height:200})
                    })
                }
            }
            var timer_yu=null;
            function junSu(target){
                    var oDiv=document.getElementById('grap')
                    clearInterval(timer_yu);  //这个地方就是为了防止多次点击速度加快的现象,很重要
                    speed=oDiv.offsetLeft<target?10:-10;
                    timer_yu=setInterval(function(){
                        if(Math.abs(oDiv.offsetLeft-target)<=10){
                            oDiv.style.left=target+'px';  //只要矩形移动到接近到目标点处就直接移动到目标点上,肉眼无法察觉速度变化
                            clearInterval(timer_yu);   document.title="目标"+oDiv.style.left;
                        }
                        else{
                            oDiv.style.left=oDiv.offsetLeft+speed+'px';
                        }
                    },20);
                }
            function fabu(){
                var text=document.getElementById('text')
                var ul=document.getElementById('weibo').getElementsByTagName('ul')[0]
                var li=document.createElement('li');
                li.innerHTML=text.value
                text.value='';
                if(ul.children){
                    ul.insertBefore(li,ul.children[0])
                }else{
                    ul.appendChild(li)
                }
                li.style[height]=0;
                //startmove(li,li.offsetHeight)
            }
            function rollmove(obj,json,end_Fun){
                clearInterval(obj.timer)
                obj.timer=setInterval(function(){
                    for(var attr in json){
                        var cur=null;
                        if(attr=='opacity'){
                            cur=parseFloat(getStyle(obj,attr))*100 ;
                        }
                        else{
                            cur=parseInt(getStyle(obj,attr)) ;
                        }
                        var speed=(json[attr]-cur)/4;
                        if(Math.abs(cur-json[attr])<=5){
                            if(attr=='opacity'){
                                obj.style.filter='alpha(opacity:'+json[attr]+')';
                                obj.style.opacity=json[attr]/100;
                            }else{
                                obj.style[attr]=json[attr]+'px'
                            }
                            clearInterval(obj.timer);
                            if(end_Fun){end_Fun();}
                        }else{
                            if(attr=='opacity'){
                                obj.style.filter='alpha(opacity:'+(cur+speed)+')';
                                obj.style.opacity=(cur+speed)/100;
                            }else{
                                obj.style[attr]=cur+speed+'px'
                            }
                        }
                    }
                },30)
    
            }
            function getStyle(obj,attr){
                if(obj.currentStyle){
                    return obj.currentStyle[attr];
                }
                else {
                    return document.defaultView.getComputedStyle(obj,null)[attr]
                }
            }
            function startmove(obj,iTarget,endFun){
                var name=obj.getAttribute('id')
                var arr=['content1','content2','content','content3'];
                var shuxing=[];
                for(var i=0;i<arr.length;i++){
                    shuxing[i]=document.getElementById(arr[i])
                }
                for(var i=0;i<arr.length;i++){
                    if(shuxing[i].getAttribute('id')==name){
                        obj.style.width='700px'
                        clearInterval(timer);
                        timer=setInterval(function(){
                            speed=obj.alpha<iTarget?5:(obj.alpha==iTarget?0:-5);
                            if(speed==0){
                                clearInterval(timer);
                                if(endFun){
                                  endFun;
                                }
                            }else{
                                obj.alpha += speed;
                                obj.style.filter='alpha(opacity:'+obj.alpha+')';
                                obj.style.opacity=obj.alpha/100;
                            }
                        },30);
                    }else{
                        shuxing[i].style.filter='alpha(opacity:30)';  //IE
                        shuxing[i].style.opacity=0.3; //火狐等现代浏览器
                        shuxing[i].style.width='60px'
                    }
                }
            }
            var timer1=null;
            function move(target){
                var div=document.getElementById('show');
                clearInterval(timer1);
                var speed=div.offsetLeft>target?-10:10;
                timer1=setInterval(function(){
                        if(div.offsetLeft!=target){
                            div.style.left=div.offsetLeft+speed+'px'
                        }else{
                            clearInterval(timer1)
                        }
                },30)
    
            }
            function keyxy(event){
                var obj=document.documentElement;
                var oDiv=document.getElementById("div1");
                oDiv.onmouseover=function(){
                    obj.onmousemove=function(e){
                        oEvent=e||event;
                        var i=oEvent.clientX>1000?1000:oEvent.clientX<200?200:oEvent.clientX;
                        oDiv.style.left=i-100+'px';
                        oDiv.style.filter='alpha(opacity:80)'
                        oDiv.style.opacity=0.8;
                    };
                }
                oDiv.onmouseout=function(){
                    oDiv.style.opacity=1;
                    oDiv.style.filter='alpha(opacity:100)'
                    obj.onmousemove=null;
                }
            }
            function startok(target){
                var div=document.getElementById('div1')
                clearInterval(timerok)
                timerok=setInterval(function(){
                    var speed=(target-div.offsetLeft)/9
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    div.style.left=div.offsetLeft+speed+'px'
    
                    if(div.offsetLeft==target){
                        clearInterval(timerok) ;
                    }
                },20)
            }
            window.onscroll=function(){
                var div=document.getElementById('div2');
                var scrolltop=document.documentElement.scrollTop+document.body.scrollTop; //必须取整,否则会抖动
                scroll(parseInt((document.documentElement.clientHeight-div.offsetHeight)/2)+scrolltop) ;document.title=document.body.offsetWidth
            }
            function scroll(target){
                var div=document.getElementById('div2')
    
                clearInterval(timerscroll)
                timerscroll=setInterval(function(){
                    var speed=(target-div.offsetTop)/9
                    speed=speed>0?Math.ceil(speed):Math.floor(speed);
                    div.style.top=div.offsetTop+speed+'px'
                    if(div.offsetTop==target){
                        clearInterval(timerscroll) ;
                    }
                },20)
            }
        </script>
    </head>
    <body>
    <span>IE下查看本网页特效会有卡顿的现象,暂时没有办法解决</span>
    <div id="nei">
        <div id="content"><!--img src="01img.jpg" width="700px" height="200px"/--></div>
        <div id="content1"><!--img src="02img.jpg" width="700px" height="200px"/--></div>
        <div id="content2"><!--img src="03img.jpg" width="700px" height="200px"/--></div>
        <div id="content3"><!--img src="03img.jpg" width="700px" height="200px"/--></div>
    </div>
    <div id="show">
        <ul>
            <li><a>hello </a></li>
            <li><a>hello </a></li>
        </ul>
        <span>分享到</span>
    </div>
    <div id="div1"onmouseover="keyxy(event)"></div>
    <div id="div2" ></div>
    <input type="button" value="往右推动绿色方框" onclick="startok(900)" />
    <input type="button" value="往左推动绿色方框" onclick="startok(100)" style="margin-left:675px" /><br/>
    <div id="middle">
        <div id="ok1le"></div>
        <div id="ok2le"></div>
        <div id="ok3le"></div>
    </div>
    <div id="midd">
        <div id="ok1"></div>
        <div id="ok2"></div>
        <div id="ok3"></div>
    </div>
    <div style="position: absolute;left:940px;top:500px;width:140px;overflow:inherit;color:purple">
        <p>下面这个输入框只能输入数字,可以移动光标键,尝试输入数字之外的字符是无法输入的,具体代码可以看一下页面文档</p>
        <input type="text" id="numcheck" size="20" style="position:relative;left:0px;top:0px;" />
    </div>
    <div id="back" style="position:relative;left:910px;top:460px;width:220px;height:230px;background-color:peru">
    <div id="tuoZhai">
        拖动窗口演示边缘会吸附
    </div></div>
    <div id="dash">
           拖动导致虚框移动
    </div>
    <div id="weibo">
        <textarea rows="7" cols="80" id="text">
        </textarea>
        <input type="button"  value="发布" onclick="fabu()" />
        <ul>
        </ul>
    </div>
    <div id="yuSu1"><input class="ok" type="button" value="移动到100px处" onclick="junSu(100)"/><span>100px</span></div>
    <div id="yuSu2"><input class="ok" type="button" value="移动到800px处" onclick="junSu(800)"/><span>800px</span></div>
    <div id="yuSu3"><input class="ok" type="button" value="移动到300px处" onclick="junSu(300)"/><span>300px</span></div>
    <div id="yuSu4"><input class="ok" type="button" value="移动到500px处" onclick="junSu(500)"/><span>500px</span></div>
    <div id="grap" ></div>
    <div id="scrollBg">
        <div id="scrollDiv"></div></div>
    <div id="scroll"><div id="scrollText">
        页面导航: 首页 → 网络编程 → PHP编程 → php实例 → 正文内容 PHP 上传图片 删除图片
        简单PHP上传图片、删除图片实现代码
        发布:mdxy-dxy 字体:[增加 减小] 类型:转载
        PHP上传图片、删除图片实现代码,需要的朋友可以参考下。
        上传图片:
        复制代码 代码如下:
        if (!empty($_FILES["img"]["name"])) { //提取文件域内容名称,并判断
        $path=”uppic/”; //上传路径
        if(!file_exists($path))
        { //检查是否有该文件夹,如果没有就创建,并给予最高权限
        mkdir(“$path”, 0700);
        }//END IF
        //允许上传的文件格式
        $tp = array(“image/gif”,”image/pjpeg”,”image/jpeg”);
        //检查上传文件是否在允许上传的类型
        if(!in_array($_FILES["img"]["type"],$tp))
        {
        }//END IF
        $filetype = $_FILES['img']['type'];
        if($filetype == ‘image/jpeg'){
        $type = ‘.jpg'   }
        if ($filetype == ‘image/jpg') {
        $type = ‘.jpg';
        }if ($filetype == ‘image/pjpeg') {
        $type = ‘.jpg';
        }if($filetype == ‘image/gif'){
        $type = ‘.gif';
        }
        if($_FILES["img"]["name"])
        {
        $today=date(“YmdHis”); //获取时间并赋值给变量
        $file2 = $path.$today.$type; //图片的完整路径
        $img = $today.$type; //图片名称
        $flag=1;
        }//END IF
        if($flag) $result=move_uploaded_file($_FILES["img"]["tmp_name"],$file2);
        //特别注意这里传递给move_uploaded_file的第一个参数为上传到服务器上的临时文件
        }//END IF
        //这里再将$img的值写入到数据库中对应的字段</div></div>
    </body>
    </html>


延伸阅读:

Tag标签:有趣  七彩  滚动条  
  • 专题推荐