jQuery图片跟随鼠标左右摆动.zip资源-CSDN文库

共132个文件

jpg：118个

js：5个

png：5个

版权申诉

javascript

html5

jQuery

76 浏览量 2022-11-22 17:15:52 上传评论收藏 2.68MB ZIP 举报

在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理、动画设计以及Ajax交互。在这个"jQuery图片跟随鼠标左右摆动"的示例中，我们将探讨如何利用jQuery实现一个有趣的用户交互效果：让图片根据鼠标的移动在页面上左右摆动。我们需要在HTML文件中设置基本的结构，包括引入jQuery库和定义图片元素。HTML5的`<script>`标签用于引入外部JavaScript文件，通常放置在`<head>`或`<body>`的底部，确保DOM加载完成后再执行脚本。 ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>jQuery图片跟随鼠标左右摆动</title> <style> #follow-image { position: absolute; top: 50px; /* 设置初始位置 */ left: 50px; } </style> </head> <body> <img id="follow-image" src="your-image.jpg" alt="跟随鼠标摆动的图片"> <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <script src="script.js"></script> </body> </html> ``` 接下来，我们创建一个名为`script.js`的JavaScript文件，编写jQuery代码来实现图片的动态跟随效果。这里的关键是监听`mousemove`事件，然后计算图片的新位置，使其相对于鼠标有一定的偏移量，并加上一个简单的物理摆动效果。 ```javascript $(document).ready(function() { var $image = $('#follow-image'); var xDiff = 20; // 鼠标与图片之间的水平偏移量 var yDiff = 20; // 鼠标与图片之间的垂直偏移量 var speed = 10; // 动画速度 $(document).mousemove(function(event) { var mouseX = event.pageX; var mouseY = event.pageY; // 计算新的left和top值，加上物理摆动效果 var newX = mouseX - xDiff + Math.sin((new Date().getTime() / 1000) * speed) * 10; var newY = mouseY - yDiff; // 使用animate方法平滑地改变图片位置 $image.animate({ left: newX + 'px', top: newY + 'px' }, 10); }); }); ``` 在这个代码中，我们设置了水平和垂直方向的偏移量（`xDiff`和`yDiff`），以便图片不会完全紧贴鼠标，而是有一定的距离。`speed`变量决定了图片摆动的速度。`mousemove`事件处理器计算出鼠标的位置，并根据当前时间进行物理摆动的模拟。`Math.sin()`函数结合当前时间产生一个周期性的变化，使得图片在左右摆动时具有真实感。我们通过`animate`方法平滑地更新图片的`left`和`top`属性，使图片在页面上流畅地跟随鼠标移动并摆动。这个效果可以增强用户的互动体验，为网站增添趣味性。当然，你可以根据项目需求调整偏移量、摆动速度等参数，以适应不同的视觉效果。这个示例只是一个起点，你可以在此基础上探索更多的jQuery动画技巧和交互设计。

资源推荐

资源详情

资源评论

收起资源包目录

jQuery图片跟随鼠标左右摆动.zip （132个子文件）

base.css 15KB

reset.css 968B

index.html 3KB

jQuery图片跟随鼠标左右摆动.jpg 57KB

42.jpg 32KB

44.jpg 32KB

40.jpg 32KB

45.jpg 32KB

43.jpg 32KB

41.jpg 31KB

37.jpg 31KB

39.jpg 31KB

46.jpg 31KB

47.jpg 31KB

38.jpg 31KB

35.jpg 31KB

33.jpg 31KB

34.jpg 31KB

36.jpg 31KB

31.jpg 30KB

32.jpg 30KB

48.jpg 30KB

49.jpg 30KB

50.jpg 29KB

30.jpg 29KB

51.jpg 29KB

29.jpg 29KB

28.jpg 28KB

52.jpg 28KB

27.jpg 28KB

26.jpg 27KB

53.jpg 27KB

54.jpg 27KB

25.jpg 27KB

24.jpg 26KB

23.jpg 26KB

22.jpg 25KB

21.jpg 25KB

20.jpg 25KB

56.jpg 24KB

16.jpg 24KB

17.jpg 24KB

10.jpg 24KB

57.jpg 24KB

11.jpg 24KB

55.jpg 24KB

11.jpg 24KB

18.jpg 24KB

19.jpg 24KB

14.jpg 24KB

82.jpg 24KB

8.jpg 24KB

9.jpg 24KB

8.jpg 24KB

7.jpg 24KB

1.jpg 24KB

12.jpg 24KB

59.jpg 24KB

6.jpg 24KB

81.jpg 24KB

4.jpg 24KB

80.jpg 24KB

13.jpg 24KB

9.jpg 24KB

5.jpg 24KB

6.jpg 24KB

7.jpg 24KB

5.jpg 24KB

15.jpg 24KB

63.jpg 24KB

61.jpg 24KB

2.jpg 24KB

10.jpg 24KB

12.jpg 24KB

1.jpg 23KB

60.jpg 23KB

4.jpg 23KB

79.jpg 23KB

65.jpg 23KB

64.jpg 23KB

58.jpg 23KB

3.jpg 23KB

62.jpg 23KB

3.jpg 23KB

13.jpg 23KB

66.jpg 23KB

78.jpg 23KB

67.jpg 23KB

69.jpg 23KB

68.jpg 22KB

77.jpg 22KB

70.jpg 22KB

76.jpg 22KB

71.jpg 22KB

75.jpg 22KB

14.jpg 22KB

73.jpg 22KB

72.jpg 22KB

74.jpg 21KB

共 132 条

<!doctype html> <html> <head> <meta charset="utf-8"> <script type="text/javascript">try{Typekit.load();}catch(e){}</script> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>jQuery图片跟随鼠标左右摆动 - 网页模板</title> <link rel="stylesheet" href="css/reset.css"> <link rel="stylesheet" href="css/base.css"> <script src="js/jquery-1.8.0.min.js"></script> <script src="js/modernizr.js"></script> <script src="js/lenticular.min.js"></script> <script src="js/base.js"></script> </head> <body> <a href="#" class="previous"></a> <a href="#" class="next"></a> <article class="mobile-examples"> <a href="#" class="victoria-link"></a> <a href="#" class="swanson-link"></a> <a href="#" class="lambo-link"></a> </article> <a href="#" class="mobile-close-btn"></a> <article class="mobile-lenticular"></article> <article class="example"> <div class="description description-1"> <h3>flow-mo</h3> <p>views of sexy ladies dressed like chiquita banana.<p> </div> <div class="description description-2"> <h3>tilt-gifs</h3> <p>of the witty,<br>mustachioed elite.<p> </div> <div class="description description-3"> <h3>spin-a-ma-jigs</h3> <p>of things you'll never own.<p> </div> <div class="qr qr-1"> <div class="mini-phone">  </div> <p><strong>try it on a fancy<br>pocket computer</strong><br>iPhones work well</p> </div> <div class="qr qr-2"> <div class="mini-phone">  </div> <p><strong>try it on a fancy<br>pocket computer</strong><br>iPhones work well</p> </div> <div class="qr qr-3"> <div class="mini-phone">  </div> <p><strong>try it on a fancy<br>pocket computer</strong><br>iPhones work well</p> </div> <div class="ipad"> <div class="camera"></div> <div class="specular-wrapper"> <div class="specular"></div> </div> <div class="ipad-content"> <div class="lenticular swanson"></div> <div class="lenticular lambo"></div> <div class="lenticular victorias-secret"></div> </div> <button class="home-btn"></button> </div> </article> <div style="text-align:center;clear:both"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、世界之窗。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉