求一JS效果

一个图片在制定区域
随着鼠标的滑动
而滑动

解决方案 »

  1.   


    <!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> 
    <title>无标题页 </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body>
    <div style="width:300px;height:300px;border:1px red solid;position:relative;">
    <img id="moveimg" style="position:absolute" src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif"></img>
    </div>
    <script language="javascript">
    document.onmousemove=function(e){
    var event=e||window.event;
    var img=document.getElementById('moveimg');
    var el=event.clientX;
    var et=event.clientY;
    var dw=document.width;
    var dh=document.height;
    var left=(el/dw)*300
    var right=(et/dh)*300;
    var maxleft=300-img.offsetWidth
    var maxtop=300-img.offsetHeight
    img.style.left=(left<maxleft?left:maxleft)+'px';
    img.style.top=(right<maxtop?right:maxtop)+'px';
    }
    </script>
    </body> 
    </html>
      

  2.   

    好了，试试这个<!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> 
    <title>无标题页 </title> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <body>
    <div style="width:300px;height:300px;border:1px red solid;position:relative;">
    <img id="moveimg" style="position:absolute" src="http://i1.sinaimg.cn/home/deco/2009/0330/logo_home.gif"></img>
    </div>
    <script language="javascript">
    var img=document.getElementById('moveimg');
    var el=0;
    var et=0;
    document.onmousemove=function(e){
    var event=e||window.event;
    el=event.clientX;
    et=event.clientY;
    document.title=el;
    }
    setInterval(function(){
    var dw=document.body.clientWidth;
    var dh=document.body.clientHeight;
    var left=(el/dw)*300
    left=left<0?0:left
    var top=(et/dh)*300;
    top=top<0?0:top;
    var maxleft=300-img.offsetWidth
    var maxtop=300-img.offsetHeight
    img.style.left=(left<maxleft?left:maxleft)+'px';
    img.style.top=(top<maxtop?top:maxtop)+'px';
    },10);
    </script>
    </body> 
    </html>
      

  3.   


    <!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>
      <title> new document </title>
     </head>
     <body>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <script type="text/javascript">
      <!--
        var $ = function(sId){
            return "string" == typeof(sId) ? document.getElementById(sId) : id;
        }
        var Extend = function(distination, source){
            for(var property in source){
                distination[property] = source[property];
            }
            return distination;
        }
        Function.prototype.bind=function(object){
            var method=this;
            return function(){
                 method.apply(object,arguments);
            }
        }
        var Class = {
            create: function(){
                return function(){
                    this.initialize.apply(this, arguments);
                }
            }
        }    var FloatBanner = Class.create();
        FloatBanner.prototype = {
            initialize: function(sid, content, top){
                document.write('<div id='+sid+' style="position:absolute;">'+content+'</div>');        
                this.oContainer = $(sid);
                this.top = top;
                this.oContainer.style.top = top + "px";
                setInterval(this.Scroll.bind(this), 20);
            },
            Scroll: function(){
                this.StartPoint = parseInt(this.oContainer.style.top, 10);
                this.EndPoint = document.documentElement.scrollTop + this.top;    
                if(this.StartPoint != this.EndPoint){
                     this.ScrollAmount = Math.ceil( Math.abs( this.EndPoint - this.StartPoint ) / 15 );
                     this.oContainer.style.top = parseInt(this.oContainer.style.top, 10) + ( ( this.EndPoint<this.StartPoint ) ? -this.ScrollAmount : this.ScrollAmount )+"px";
                }
            }
        }    
        var fb = new FloatBanner("id1","<img src='http://jzyouth.org.cn/images/float/2009Cherry.gif' />",250);
      //-->
      </script>
     
     </body>
    </html>