Este artigo compartilha o código de exemplo de efeito especial do JS Mouse para sua referência. O conteúdo específico é o seguinte
Exemplo 1: Desative o botão certo do mouse
<script type = "text/javascript"> // Defina o retorno de chamada para o botão do mouse do documento document.onMousedown = function (event) {// Determine se o valor do evento está clique com o botão direito do mouse if (event.button == 2) {alert ('desativar o botclick!'); // solicita que o usuário desative o clique com o botão direito do mouse}} </sCript>0 sem pressionar botão
1 Pressione o botão esquerdo
2 Pressione o botão certo
3 Pressione as teclas esquerda e direita
4 Pressione a tecla do meio
5 Pressione as chaves esquerda e do meio
6 Pressione as chaves certas e do meio
7 Pressione todas as chaves
Exemplo 2: Defina dinamicamente a forma do ponteiro do mouse
<script type = "text/javascript"> // inicialize a função de forma do mouse initMouse () {// Obtenha o DOM do destino através do nome da tag. Se for uma página completa da web, você pode usar o corpo var pdom = document.getElementsByTagName ("p") [0]; // Modificar a forma do ponteiro do mouse do estilo, o ponteiro é a forma do PDom.style.cursor = 'ponteiro'; } </script>Código do atributo de nome
Cursor do estilo de seta padrão: padrão
Cursor da forma da mão: ponteiro
Cursor da forma da mão: mão
Mova o cursor de seta transversal: mova
Cursor da marca de ajuda: ajuda
Cursor da mira: mira
Cursor de texto/editor: texto
Não é possível liberar (desativar) cursor: sem queda
Desative o cursor: não superado
Cursor automático: Auto
Cursor: Progresso
Alterar tamanho para cima cursor: n-ressente
Altere o tamanho do cursor:
Altere o tamanho para o cursor esquerdo: W-RESIZE
Altere o tamanho para o cursor certo: e-ressente
Altere o tamanho do cursor esquerdo: NW-RESIZE
Mude o tamanho até o cursor esquerdo: SW-RESIZE
Altere o tamanho do cursor direito: NE-RESIZE
Altere o tamanho para o cursor descendente direito: Se-ressetize
Exemplo 3: Alterações no tamanho da fonte quando o mouse entra e sai
<script type = "text/javascript"> // mova o ponteiro do mouse para o Mover de função (pDom) {pdom.style.fontsize = '20px'; // redimensione o tamanho da fonte para 20 pixels} // mova o ponteiro do mouse function mout (pdom) {pdom.style.fontsize = ''; // redimensione o tamanho da fonte para padrão} </sCript> <!-Definir uma área-> <p style = "margem: 5px automático; largura: 100px; altura: 100px; borda: 1px Solid Black;" onMouseOverover = "Mover (this);" onmouseout = "mout (this);"> mova o mouse para esta área </p>Exemplo 4:
<script type = "text/javascript"> var nowpos; // posição atual var mytimer; // função variável do timer startit () {// Start Function // Start Timer, em 10 milissegundos mytimer = window.setInterval ("scrollPage ()", 10); } // Função de parada função stopit () {// Cancelar o timer clearInterval (mytimer); } // função de rolagem ScrollPage () {window.scrollby (0,1); // role em um pixel} document.onmousedown = stopit; // Snap the Click Event Document.ondblClick = startit; // Ouça o evento duplo clique </sCript>Exemplo 5: cores diferentes aparecem no link com o mouse
<script type = "text/javascript"> // Defina a função de evento MouseOver definilElinkColor () {// Obtenha o DOM de todos os links na página da web var linkdoms = document.getElementsByTagName ("a"); // transf os links dom for (var i = 0; i <linkdoms.length; i ++) {// define retorno de chamada para cada link mouseOver linkddoms [i] .onMouseOver = function () {this.style.color = 'vermelho'; // altere o estilo de cor para o link atual} linkdoms [i] .onmouseout = function () {this.style.color = ''; // Restaurar padrão}}}} </sCript>Exemplo 6: Desative a polia do mouse
<script type = "text/javascript"> function init () {// Redefine a função de retorno de chamada do evento do deslizamento da polia do documento de polias document.onmousewheel = function () {alert ('use pollees são proibidos'); // O usuário é solicitado a não usar polias retornam falsas; // retorna false, nada é feito (esta frase não pode ser perdida, caso contrário, ainda rolará)}; } </script>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.