Gemeinschaft Lernen Tools-Bibliothek Freizeit

Deutsch

Heim > Web-Frontend > js-Tutorial > Js鼠标跟随代码小手点击实例方法_javascript技巧

Js鼠标跟随代码小手点击实例方法_javascript技巧

WBOY

Freigeben： 2016-05-16 17:33:41

Original

1484 Leute haben es durchsucht

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可爱的鼠标跟随</title>
<style>
html{ background:#000;}
body,html,input{ cursor:none;}
body,html{ height:100%;}
#cursor{ position:absolute; left:100px; top:100px; display:block;}
</style>
<script>
 window.onload = function(){
  var oCursor = document.getElementById("cursor");
  document.onmousemove=function (ev){
   var oEvent=ev||event,
    oWidth = document.documentElement.clientWidth,
    oHeight = document.documentElement.clientHeight,
    scrollTop=document.documentElement.scrollTop + oEvent.clientY,
    scrollLeft=document.documentElement.scrollLeft + oEvent.clientX;
   if(scrollTop > oHeight-oCursor.offsetHeight){
    oCursor.style.top = oHeight-oCursor.offsetHeight+'px';
   }else if(scrollTop < 0){
    oCursor.style.top = 0;
   }else{
    oCursor.style.top = scrollTop+'px';
   }
   if(scrollLeft > oWidth-oCursor.offsetWidth){
    oCursor.style.left = oWidth-oCursor.offsetWidth+'px';
   }else{
    oCursor.style.left = scrollLeft+'px';
   }
   document.onmousedown = function(){
    oCursor.innerHTML = "<img  src='http://www.jb51.net/jscss/demoimg/201305/cursor_hover.png' / alt="Js鼠标跟随代码小手点击实例方法_javascript技巧" >"; 
    return false;
   }
   document.onmouseup = function(){
    oCursor.innerHTML = "<img  src='http://www.jb51.net/jscss/demoimg/201305/cursor.png' / alt="Js鼠标跟随代码小手点击实例方法_javascript技巧" >"; 
   }
  };
 }
</script>

<div id="cursor"><img  src="http://www.jb51.net/jscss/demoimg/201305/cursor.png" alt="Js鼠标跟随代码小手点击实例方法_javascript技巧" ></div>
<input type="button" style="font-size:36px; margin:100px;" value="点击" onclick="window.open('http://www.jb51.net')">

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

Verwandte Etiketten：

跟随鼠标

Quelle：php.cn

Vorheriger Artikel：js操纵跨frame的三级联动select下拉选项实例介绍_javascript技巧 Nächster Artikel：javascript检测页面是否缩放的小例子_javascript技巧

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Neueste Artikel des Autors

Was ist eine NullPointerException und wie behebe ich sie?

2024-10-22 09:46:29
Vom Anfänger zum Programmierer: Ihre Reise beginnt mit C-Grundlagen

2024-10-13 13:53:41
Webentwicklung mit PHP freischalten: Ein Leitfaden für Anfänger

2024-10-12 12:15:51
C entmystifizieren: Ein klarer und einfacher Weg für neue Programmierer

2024-10-11 22:47:31
Entfalten Sie Ihr Programmierpotenzial: C-Programmierung für absolute Anfänger

2024-10-11 19:36:51
Entfesseln Sie Ihren inneren Programmierer: C für absolute Anfänger

2024-10-11 15:50:41
Automatisieren Sie Ihr Leben mit C: Skripte und Tools für Anfänger

2024-10-11 15:07:41
PHP leicht gemacht: Ihre ersten Schritte in der Webentwicklung

2024-10-11 14:21:21
Erstellen Sie alles mit Python: Ein Leitfaden für Anfänger, um Ihrer Kreativität freien Lauf zu lassen

2024-10-11 12:59:11
Der Schlüssel zum Programmieren: Die Leistungsfähigkeit von Python für Anfänger freischalten

2024-10-11 12:17:31

Aktuelle Ausgaben

SQL Count() erfordert ebenfalls 0 Ich habe nur eine Tabelle und möchte jeden Eintrag eines Tags zählen, der mit 0 beginnt. J...

Aus 2024-04-06 19:48:53

0

1

449

Wie kann ich in der mobilen Ansicht diese Navigationsleiste schließen, wenn der Benutzer auf den Link klickt? Wenn der Benutzer auf einen Link klickt, um die Website zu durchsuchen, wird die Navigatio...

Aus 2024-04-06 19:23:03

0

1

411

Reine CSS-Methode zum dynamischen Ändern der Bildquelle beim Klicken ohne Verwendung von JavaScript Ich muss den Quellcode eines Bildes per Mausklick ändern, indem ich nur CSS wie img:active...

Aus 2024-04-06 19:25:49

0

1

505

Generieren Sie Standardwerte und CSS-Variablen mit SCSS Ich setze Website-Styling um. Aus Gründen der Legacy-Unterstützung muss ich IE11 zumindest...

Aus 2024-04-06 17:46:54

0

1

355

CSS-Stile werden nicht auf die Website angewendet Ich erstelle eine Website mit Bootstrap5, aber die index.css-Eigenschaften werden nicht au...

Aus 2024-04-06 17:12:23

0

1

336

verwandte Themen

Mehr>

Beliebte Empfehlungen

Beliebte Tutorials

Mehr>

Verwandte Tutorials

Beliebte Empfehlungen

Aktuelle Kurse

Neueste Downloads

Mehr>

Web-Effekte

Quellcode der Website

Website-Materialien

Frontend-Vorlage