jQuery实现心形图片墙随机放大显示源码资源-CSDN下载

共76个文件

jpg：73个

css：1个

html：1个

5星 · 超过95%的资源需积分: 15 66 浏览量 2015-08-26 10:02:59 上传评论 2 收藏 9.38MB RAR 举报

在本文中，我们将深入探讨如何使用jQuery实现心形图片墙随机放大显示的源码。我们要理解jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等任务。这个项目利用jQuery的强大功能，创建了一个视觉上吸引人的效果，将图片以心形布局展示，并具有动态放大效果。一、心形布局心形布局的实现通常涉及到数学计算和CSS定位。开发者可能使用绝对定位和CSS3的transform属性来调整每个图片元素的位置，使其呈现出心形图案。为了达到这一目标，可能需要计算每个图片元素的坐标，确保它们在页面上正确对齐。这通常涉及计算心形曲线的参数方程，并将其转化为像素坐标。二、jQuery选择器和遍历在jQuery中，选择器用于选取HTML元素。在这个项目中，开发者可能使用类选择器或ID选择器来选取图片元素。例如，`$('.thumbnail')` 将选取所有class为"thumbnail"的元素。遍历这些元素，可以为每个元素添加特定的动画效果。三、动态放大效果这个效果是通过jQuery的动画功能实现的。`$('img').fadeIn()` 和 `$('img').fadeOut()` 可以用来淡入淡出图片，而 `$('img').animate()` 可以用于平滑地改变元素的CSS属性，如宽度、高度或透明度。为了随机选择图片放大，开发者可能用到了 `Math.random()` 函数来生成随机索引，然后应用动画效果到选中的图片。四、事件监听与响应为了使图片在用户交互时放大，例如鼠标悬停时，可以使用jQuery的 `hover()` 方法。例如，`$('img').hover(function() {...}, function() {...})` 将定义两个函数，分别对应鼠标进入和离开元素时的回调。五、CSS和样式压缩包中的 "css" 文件夹可能包含项目的样式表。CSS用于设置图片的大小、边距、背景颜色等属性，以及心形布局所需的定位规则。同时，CSS3的过渡效果（transition）可以与jQuery动画结合，提供更流畅的用户体验。六、JavaScript与HTML交互 `index.html` 文件是项目的主页面，包含了HTML结构和JavaScript脚本的引用。开发者可能使用 `<script>` 标签引入jQuery库和自定义的JavaScript代码。此外，图片元素可能被嵌入在HTML中，或者通过JavaScript动态加载。七、浏览器兼容性考虑到标签中提到的“兼容目前最新的各类主流浏览器”，开发者可能使用了现代浏览器支持的特性，同时也可能应用了polyfill或条件语句来确保在旧版本浏览器中的兼容性。总结，这个项目结合了jQuery的选择器、遍历、动画功能，以及CSS的布局和过渡效果，创建了一个创新且吸引用户的图片墙。通过解析HTML、CSS和JavaScript的交互，我们可以学习到如何利用这些工具实现复杂交互效果。对于想要提升网页动态效果的开发者来说，这是一个很好的学习案例。

资源详情

资源评论

资源推荐

收起资源包目录

jQuery实现心形图片墙随机放大显示源码.rar （76个子文件）

css

index1.css 338B

images

65.jpg 93KB

5.jpg 175KB

24.jpg 143KB

46.jpg 198KB

58.jpg 129KB

35.jpg 133KB

51.jpg 102KB

68.jpg 120KB

29.jpg 150KB

61.jpg 171KB

50.jpg 113KB

3.jpg 110KB

57.jpg 138KB

22.jpg 142KB

21.jpg 159KB

71.jpg 121KB

8.jpg 119KB

27.jpg 145KB

4.jpg 123KB

26.jpg 148KB

54.jpg 108KB

34.jpg 214KB

12.jpg 129KB

30.jpg 148KB

48.jpg 109KB

43.jpg 164KB

70.jpg 149KB

9.jpg 182KB

2.jpg 254KB

23.jpg 136KB

10.jpg 172KB

55.jpg 177KB

72.jpg 121KB

63.jpg 123KB

28.jpg 148KB

69.jpg 139KB

41.jpg 113KB

56.jpg 123KB

62.jpg 193KB

18.jpg 180KB

25.jpg 153KB

44.jpg 99KB

53.jpg 206KB

20.jpg 114KB

19.jpg 239KB

73.jpg 119KB

1.jpg 113KB

45.jpg 177KB

37.jpg 159KB

47.jpg 146KB

33.jpg 143KB

52.jpg 191KB

38.jpg 115KB

11.jpg 111KB

14.jpg 152KB

6.jpg 103KB

66.jpg 92KB

59.jpg 129KB

39.jpg 130KB

15.jpg 150KB

31.jpg 199KB

40.jpg 110KB

64.jpg 114KB

32.jpg 168KB

49.jpg 188KB

67.jpg 145KB

36.jpg 211KB

17.jpg 62KB

16.jpg 121KB

7.jpg 113KB

42.jpg 116KB

60.jpg 185KB

13.jpg 68KB

jquery.min.js 93KB

index.html 17KB

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery心形图片墙随机放大显示特效代码</title> <link href="css/index1.css" rel="stylesheet" /> <script src="js/jquery.min.js"></script> <script> function Showbigimg() { var rom = parseInt(73 * Math.random()); var imgurl = $(".zppic:eq(" + rom + ")").find("img").attr("src"); $(".bigimg").attr({ "src": imgurl }); var bwidth = $(".bigimg").width(); var bheight = $(".bigimg").height(); var o = { left: "50%", width: "800px", height: "600px", top: "100px", "margin-left": "-400px" }; var pic = $(".zppic:eq(" + rom + ")"); $(".bigpic").css({ "left": pic.position().left, "top": pic.position().top }); $(".bigpic").show(); $(".bigpic").animate(o, 2000, function () { setTimeout(function () { $(".bigpic").animate({ width: "100px", left: pic.position().left, top: pic.position().top, "margin-left": "0", "margin-top": "0" }, 1000, function () { $(".bigpic").hide(); setTimeout(Showbigimg, 1000); }); }, 3000) }); } $(function () { Showbigimg(); }) </script> </head> <body> <div class="zp"> <table> <tr> <td></td> <td> <div class="zppic"> <img src="images/1.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/2.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/3.jpg" /> </div> </td> <td></td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/4.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/5.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/6.jpg" /> </div> </td> <td></td> </tr>  <tr> <td> <div class="zppic"> <img src="images/7.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/8.jpg" /> </div> </td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/9.jpg" /> </div> </td> <td></td> <td> <div class="zppic"> <img src="images/10.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/11.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/12.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/13.jpg" /> </div></td> <td> <div class="zppic"> <img src="images/14.jpg" /> </div> </td> </tr>  <tr> <td> <div class="zppic"> <img src="images/15.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/16.jpg" /> </div> </td> <td></td> <td></td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/17.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/18.jpg" /> </div> </td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/19.jpg" /> </div> </td> </tr> <tr> <td> <div class="zppic"> <img src="images/20.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/21.jpg" /> </div> </td> <td></td> <td> <div class="zppic"> <img src="images/22.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/23.jpg" /> </div> </td> <td></td> <td> <div class="zppic"> <img src="images/24.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/25.jpg" /> </div> </td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/26.jpg" /> </div> </td> </tr> <tr> <td> <div class="zppic"> <img src="images/27.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/28.jpg" /> </div> </td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/29.jpg" /> </div> </td> <td></td> <td> <div class="zppic"> <img src="images/30.jpg" /> </div> </td> <td> <div class="zppic"> <img src="images/31.jpg" /> </div> </td> <td></td> <td></td> <td> <div class="zppic"> <img src="images/32.jpg" /> </div> </td> </tr> <tr> <td></td> <td> <div class="zppic"> <img src="images/33.jpg" /> </div> </td> <td> <div