1.
1 <%@ page language="java" contentType="text/html; charset=UTF-8" 2 pageEncoding="UTF-8"%> 3 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 4 <html> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 7 <title>事件处理之随着鼠标移动图像模糊或明亮</title> 8 <style type="text/css"> 9 .buttons { 10 width: 100px; 11 float: left; 12 text-align: center; 13 margin: 5px; 14 border: 1px solid; 15 font-weight: bold; 16 } 17 img { 18 width: 200px; 19 height: 200px; 20 } 21 </style> 22 <script src="jquery-1.5.2.js" type="text/javascript"></script> 23 <script type="text/javascript"> 24 $(document).ready(function(){ 25 //opacity:不透明性 26 $('img').css('opacity', 0.4); 27 //当鼠标指针位于元素上方时时 28 $('img').mouseover(function(){ 29 //$('img').css('opacity', 1.0); 30 $('img').animate({opacity: 1.0, width: $(this).width()+100, height: $(this).height()+100}, 1000); 31 //$('img').css('width', function(){ 32 //return $(this).width()+50; 33 //}); 34 35 //$('img').css('height', function(){ 36 //return $(this).height()+50; 37 //}); 38 }); 39 //当鼠标从元素上移开时 40 $('img').mouseout(function(){ 41 //$('img').css('opacity', 0.4); 42 //$('img').animate({opacity: 0.4}, 1000); 43 $('img').animate({opacity: 0.4, width: $(this).width()-100, height: $(this).height()-100}, 1000); 44 //$('img').css('width', function(){ 45 //return $(this).width()-50; 46 //}); 47 48 //$('img').css('height', function(){ 49 //return $(this).height()-50; 50 //}); 51 }); 52 53 //$('.buttons').mousedown(function(){ 54 // 55 //}); 56 }); 57 58 </script> 59 <body> 60 <img src="1.jpg" /> 61 </body> 62 </html>
