jQuery实现网站图片放大效果

Posted 2020-08-14 noaman_wgs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery实现网站图片放大效果相关的知识，希望对你有一定的参考价值。

实现效果：当鼠标指向商品图片时，图片会自动放大。

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>文字放大</title>
 6     
 7 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"></script>
 8 <style type="text/css">
 9     body{
10     margin:0;
11     padding:40px;
12     background:#fff;
13     font:80% Arial, Helvetica, sans-serif;
14     color:#555;
15     line-height:180%;
16 }
17 img{border:none;}
18 ul,li{
19     margin:0;
20     padding:0;
21 }
22 li{
23     list-style:none;
24     float:left;
25     display:inline;
26     margin-right:10px;
27     border:1px solid #AAAAAA;
28 }
29 
30 /* tooltip */
31 #tooltip{
32     position:absolute;
33     border:1px solid #ccc;
34     background:#333;
35     padding:2px;
36     display:none;
37     color:#fff;
38 }
39 </style>
40 <script type="text/javascript">
41     $(document).ready(function(){
42         var x =10;
43         var y =20;
44         $("a.tooltip").mouseover(function(e){
45               this.myTitle = this.title;
46               this.title="";
47               var imgTitle=this.myTitle?"<br/>"+this.myTitle:"";
48             var tooltip = "<div id=‘tooltip‘><img src=‘ "+this.href+"‘ alt=‘产品预览图‘/>"+imgTitle+"</div>";
49             $("body").append(tooltip);
50             
51             $("#tooltip").css({
52                             "top":(e.pageY+y)+"px",
53                             "left":(e.pageX+x)+"px"
54                             })
55                         .show("fast");
56         }).mouseout(function(){
57             this.title=this.myTitle;
58             $("#tooltip").remove();
59         }).mousemove(function(e){
60             $("#tooltip")
61                 .css({
62                     "top": (e.pageY+y) + "px",
63                     "left": (e.pageX+x)  + "px"
64                 });
65         });
66     });
67 </script>
68 </head>
69 <body>
70     <h2>图片放大</h2>
71     <ul>
72         <li>
73             <p><a href="images/apple_1_bigger.jpg" class="tooltip" title="苹果iPod"><img src="images/apple_1.jpg" alt="苹果iPod"></a></p>
74         </li>
75         <li>
76             <p><a href="images/apple_2_bigger.jpg" class="tooltip" title="苹果iPod nano"><img src="images/apple_2.jpg" alt="苹果iPod nano"></a></p>
77         </li>
78         <li>
79             <p><a href="images/apple_3_bigger.jpg" class="tooltip" title="苹果iPhone"><img src="images/apple_3.jpg" alt="苹果iPhone"></a></p>
80         </li>
81         <li>
82             <p><a href="images/apple_4_bigger.jpg" class="tooltip" title="苹果 Mac"><img src="images/apple_4.jpg" alt="苹果 Mac"></a></p>
83         </li>
84     </ul>
85 </body>
86 </html>

以上是关于jQuery实现网站图片放大效果的主要内容，如果未能解决你的问题，请参考以下文章