滑鼠跟隨js實現_JS代碼實現跟隨滑鼠移動的圖片中細節問題求解謝謝！

『壹』 three.js如何讓場景中模型跟隨滑鼠旋轉呀

引入這個js <script src="../js/controls/OrbitControls.js"></script> 找你自己的路徑哈，在threejs的庫文件裡面有的。然後在代碼中加入
var controls = new THREE.OrbitControls(camera);//創建控制項對版象 camera是你的相權機對象
controls.addEventListener('change', render);//監聽滑鼠、鍵盤事件
就可以隨意旋轉了。

『貳』 JS代碼實現跟隨滑鼠移動的圖片中細節問題求解，謝謝！

1.e就指的事件（event），其中就包括滑鼠x y坐標（clientX clientY）。 e||window.event是為是兼容ie與ff。記住就好了，回當要取得事件時，答加上一個參數。尤其是在ff中，必須這樣傳事件，否則獲取不到事件，而ie可以函數中直接用window.event獲得事件。
2.這樣實現是把他藏在左邊很遠的地方的了。也可以設置他的z-index，但是要指定它的position 為absolute,再指定z-index=-99; 或者直接另它的 display="none"。

『叄』用js控制div跟隨滑鼠移動，滑鼠點擊後，滑鼠離開，div留在當前點擊的位置怎麼做

你要的應該是拖拽效果，可以通過jq插件做

http://www.runoob.com/jqueryui/example-draggable.html

基本原理就是滑鼠按下修改div的left和top（或者right/bottom）。滑鼠離開不變。

<!DOCTYPEhtml>
<html>
<head>
<scriptsrc="/jquery/jquery-1.11.1.min.js">
</script>
<Style>
#test{
position:absolute;
}
</style>
<script>
$(document).mousedown(function(){
$(this).mousemove(function(e){
$("#test").css({"left":e.pageX+"px","top":e.pageY+"px"});
$(document).mouseup(function(){
$(this).unbind('mousemove');
})
})
})
</script>
</head>
<body>
<divid="test">ssssssssss</div>
</body>
</html>

『肆』用JS製作跟隨滑鼠移動的方塊

<!DOCTYPEhtml>
<html>
<head>
	<metacharset=UTF-8>
	<title>Yugi</title>
	<style>
	*{
		margin:0;
		padding:0;
	}
	</style>
	<script>
varYugi=function(w,h,v)
{
this.w=w;
this.h=h;
this.v=v;
};

Yugi.prototype=newYugi;
Yugi.prototype.constructor=Yugi;

Yugi.pointToPoint=function(a,b){
returnMath.sqrt(Math.pow(a[0]-b[0],2)+Math.pow(a[1]-b[1],2));
}

Yugi.pointToAngle=function(origin,point){
varPI=Math.PI;
if(point[0]==origin[0]){
if(point[1]>origin[1])
returnPI*0.5;
returnPI*1.5
}elseif(point[1]==origin[1]){
if(point[0]>origin[0])
return0;
returnPI;
}
vart=Math.atan((origin[1]-point[1])/(origin[0]-point[0])*1);
if(point[0]>origin[0]&&point[1]<origin[1])
returnt+2*PI;
if(point[0]>origin[0]&&point[1]>origin[1])
returnt;
returnt+PI;
}

Yugi.prototype.create=function(e,_sX,_sY)
{
vardiv=document.createElement("div");
div.style.position="absolute";
div.style.cursor="pointer";
div.style.width=this.w+"px";
div.style.height=this.h+"px";
	varL=e.clientX+_sX-this.w/2,T=e.clientY+_sY-this.h/2;
div.style.left=L+"px";
div.style.top=T+"px";
div.style.backgroundColor="red";
document.body.appendChild(div);
this.elem=div;
this.currPoint=[L,T];
};

Yugi.prototype.move=function(e,_sX,_sY)
{
varme=this,x=e.clientX+_sX-me.w/2,y=e.clientY+_sY-me.h/2;
varnewPoint=[x,y];
varsleep=20,speed=me.v/sleep;
me.interval&&clearInterval(me.interval);
me.interval=setInterval(function(){
varlen=Yugi.pointToPoint(me.currPoint,newPoint);
if(len<1){
clearInterval(me.interval);
me.interval=0;
}else{
varangle=Yugi.pointToAngle(me.currPoint,newPoint);
me.currPoint=[me.currPoint[0]+Math.cos(angle)*Math.min(len/2,speed),me.currPoint[1]+Math.sin(angle)*Math.min(len/2,speed)];
me.elem.style.left=me.currPoint[0]+'px';
me.elem.style.top=me.currPoint[1]+'px';
}
},sleep);
};

varyugi=newYugi(30,30,500);
document.onclick=function(e)
{
e=e||window.event;
var_sX=window.pageXOffset||document.documentElement.scrollLeft||document.body.scrollLeft;
var_sY=window.pageYOffset||document.documentElement.scrollTop||document.body.scrollTop;
varme=yugi;
if(!me.elem){
me.create(e,_sX,_sY);
}
else{
if(!me.interval){
varcloned=document.createElement("div");
cloned.innerHTML=me.elem.outerHTML;
document.body.appendChild(cloned.children[0]);
}
me.move(e,_sX,_sY);
}
};

document.oncontextmenu=newFunction("returnfalse");
</script>
</head>
<body></body>
</html>

『伍』求滑鼠移動上去就顯示一張跟在滑鼠的圖片JS代碼

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>網頁特效|JsCode.cn|---跟隨滑鼠的圖片</title>
<script LANGUAGE="javaScript">
var newtop=0
var newleft=0
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}
else
{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
}
function doMouseMove() {
layerName = 'iit'
eval('var curElement='+layerRef+'["'+layerName+'"]')
eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"')
eval('curElement'+styleSwitch+'.visibility="visible"')
eval('newleft=document.body.clientWidth-curElement'+styleSwitch+'.pixelWidth')
eval('newtop=document.body.clientHeight-curElement'+styleSwitch+'.pixelHeight')
eval('height=curElement'+styleSwitch+'.height')
eval('width=curElement'+styleSwitch+'.width')
width=parseInt(width)
height=parseInt(height)
if (event.clientX > (document.body.clientWidth - 5 - width))
{
newleft=document.body.clientWidth + document.body.scrollLeft - 5 - width
}
else
{
newleft=document.body.scrollLeft + event.clientX
}
eval('curElement'+styleSwitch+'.pixelLeft=newleft')
if (event.clientY > (document.body.clientHeight - 5 - height))
{
newtop=document.body.clientHeight + document.body.scrollTop - 5 - height
}
else
{
newtop=document.body.scrollTop + event.clientY
}
eval('curElement'+styleSwitch+'.pixelTop=newtop')
}
document.onmousemove = doMouseMove;
</script>
</head>

<body>

<script language="javascript">
if (navigator.appName == "Netscape") {
}
else
{
document.write('<div ID=OuterDiv>')
document.write('<img ID=iit src="images/flag.gif" STYLE="position:absolute;TOP:5pt;LEFT:5pt;Z-INDEX:10;visibility:hidden;">')
document.write('</div>')
}
</script>
</body>

</html>

『陸』用js控制div跟隨滑鼠移動，滑鼠點擊後，滑鼠離開，div留在當前點擊的位置怎麼做

<!DOCTYPEhtml>
<html>
	<head>
		<metacharset="UTF-8">
		<title></title>
		<styletype="text/css">
			#box{
				width:100px;
				height:100px;
				background-color:skyblue;
				position:absolute;
			}
		</style>
		<scripttype="text/javascript">
			window.onload=function(){
				
				varbox=document.getElementById("box");
				
				varmove=function(event){
					varx=event.pageX;
					vary=event.pageY;
				
					box.style.left=x-0.5*box.offsetWidth+"px";
					box.style.top=y-0.5*box.offsetHeight+"px";
					
				}
				
				box.onclick=function(){
					document.onmousemove=null;
				}
				
				box.ondblclick=function(){
					document.onmousemove=move;
				}
			
				document.onmousemove=move;
			}
		</script>
	</head>
	<body>
		<divid="box"></div>
	</body>
</html>

導航:首頁 > 編程語言 > 滑鼠跟隨js實現

滑鼠跟隨js實現

與滑鼠跟隨js實現相關的資料

友情鏈接