jQuery实现图片放大预览

最新推荐文章于 2022-05-20 18:05:50 发布

安菲尔德的门柱

最新推荐文章于 2022-05-20 18:05:50 发布

阅读量1k

点赞数

分类专栏： js/jQuery学习文章标签： jquery图片预览放大

本文链接：https://blog.csdn.net/gerrard0616/article/details/11581159

版权

本文详细介绍了如何利用jQuery库来实现在鼠标悬停时，对页面中的图片进行放大预览的功能。通过实例展示，展示了从初始页面状态到鼠标移到第三个图片时的动态效果，揭示了jQuery在图片交互上的应用技巧。

摘要由CSDN通过智能技术生成

对于一些比较小的图片，通过鼠标移动到图片上进行放大显示，原理很简单，就是将图片显示的尺寸变大后放在浏览器的一个指定位置，从而实现图片的放大预览。以下是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>jQuery图片预览</title>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <style type="text/css">
        body{font-size:12px; padding:50px;}
        .clsImg{padding-top:300px;}
        .imgAttr{position:absolute; height:225px; width:300px; border:1px solid #ccc; margin-left:135px; display:none;}
    </style>
    <script type="text/javascript">
        $(function () {
            var x = 0;
            var y = 0;
            $("img").mouseover(function (e) {     //鼠标移动到图片上添加事件，