jquery事件处理之随着鼠标移动图像模糊或明亮-mouseover，mouseout，mousedown和opacity属性

 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>
posted on 2017-01-21 22:03 Sharpest 阅读(291) 评论(0) 收藏举报