jQuery可以通过简单的语法和强大的功能,为我们提供一些好用的方法,其中一种是用来浏览大图的功能。在本文中,我们将介绍如何使用jQuery实现浏览大图的功能。
$(document).ready(function() { // 点击小图预览大图 $(".smallImg").click(function() { var bigSrc = $(this).attr("src"); var imgHtml = ""; $("#bigImg").html(imgHtml); $("#bigImg").fadeIn("slow"); }); // 点击大图关闭预览 $("#bigImg").click(function() { $(this).fadeOut("slow"); }); });
上面的代码用到了jQuery的一些方法,通过点击小图显示大图,再点击大图关闭预览,实现了浏览大图的功能。
其中,$(document).ready()
是jQuery中的一个事件,表示文档加载完成后执行以下函数;$(".smallImg")
表示选取小图的元素,.click()
表示点击事件,.attr()
表示获取或设置元素属性,.html()
表示设置或获取元素内容,.fadeIn()
表示逐渐显示元素。
除了以上代码,还可以通过CSS样式实现更好的体验效果。
#bigImg { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background: rgba(0, 0, 0, 0.75); z-index: 99999; display: none; text-align: center; } #bigImg img { max-width: 80%; max-height: 80%; }
运用CSS样式中的position属性让元素固定在页面上,z-index属性为元素层级,使用display属性隐藏元素,背景颜色为半透明黑色。同时,为了让图片显示更美观,设置max-width和max-height属性控制大小。
至此,一个jQuery实现的浏览大图功能就完成了!