图片放大效果

秒速五厘米 2021-10-08 05:28 560阅读 0赞

<style type="text/css">
    *{margin:0;padding:0;}
    
    /*****小图样式******/
    #smallimg{
    width:320px;
    float:left;
    position:relative;
    border:1px solid red;
    }
    #smallimg img{ 
    width:320px;
    }
    
    /*****选取的预览区域样式******/
    #showimg{
    width:100px;
    height:100px;
    background:#fff;
    cursor:move;/*鼠标样式*/
    position:absolute;
    border:1px solid #666;
    opacity:0.5;/*半透明*/
    filter:alpha(opacity=50);display:none;
    }
    
    /*****大图样式******/
    #bigimg{
    float:left;
    width:400px;
    height:400px;
    margin-left:40px;
    border:1px solid #ccc;
    display:none;
    }
    </style>

<div id="smallimg">
    <img id="demo" src="m.jpg"/> 
    
    <div id="showimg"> </div> 
    
    </div>
    <div id="bigimg"> </div>

var smallimg = document.getElementById("smallimg");
    var showimg = document.getElementById("showimg"); //滤镜图片
    var bigimg = document.getElementById("bigimg");
    var small_url = document.getElementById("demo").getAttribute("src");
    var cenpint = 0; //中间点
    //选取层的活动范围
    var maxWidth = maxHeight = 0;
    //小图上的鼠标悬停事件
    //浏览区及大图区域
    //得到浏览区的活动区域尺寸
    smallimg.onmouseover = function() {
        showimg.style.display = "block";
        bigimg.style.display = "block";
        //cenpint=50;
        cenint = showimg.offsetHeight / 2;
        maxWidth = smallimg.clientWidth - showimg.offsetWidth;
        maxHeight = smallimg.clientHeight - showimg.offsetHeight;
        // alert("maxWidth="+maxWidth+"maxHeight"+maxHeight);
    };
    smallimg.onmousemove = function(e) {
        //原图的鼠标移动事件
        //1.获得事件对象
        //3.判断移动超过最大范围时的处理
        //4.取得选取层进行最大处理
        if (e == "undefined") {
            //2.给选取层跟随鼠标移动
            var e = window.event;
        }
        var Top = 0;
        var Left = 0;
        Top = e.clientY - cenpint; //-cenpint 意思是放大镜只能在中间显示
        Left = e.clientX - cenpint;
        //maxWidth = maxHeight
        if (Top > maxHeight) {
            //限制放大镜上下范围
            Top = maxHeight;
        } else if (Top < 0) {
            Top = 0;
        }
        if (Left > maxWidth) {
            //限制左右范围
            Left = maxWidth;
        } else if (Left < 0) {
            Left = 0;
        }
    
    
        showimg.style.top = Top;
        showimg.style.left = Left;
    
    
        bigimg.style.background = "url(" + small_url + ") -" + Left * 4 + "px -" + Top * 4 + "px no-repeat";
    
    
    };
    smallimg.onmouseout = function() {
        showimg.style.display = "none";
        bigimg.style.display = "none";
    
    
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，560人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS实现鼠标移入时图片的放大效果及缓慢过渡效果-案例

> `transform:scale()`可以实现按比例放大或者缩小功能。 > `transition`可以设置动画执行的时间，实现缓慢或者快速的执行动画 <bo

秒速五厘米/ 2022年09月10日 10:19/ 0 赞/ 244 阅读

相关 js点击图片放大效果ImageZoom代码下载

原文：[js点击图片放大效果ImageZoom代码下载][js_ImageZoom] 源代码下载地址：[http://www.zuidaima.com/share/17957

╰+攻爆jí腚メ/ 2022年08月22日 15:18/ 0 赞/ 372 阅读

相关下拉放大效果

static CGFloat headerHeight = 250; static CGFloat headerWidth = 320; \- (void)scroll

待我称王封你为后i/ 2022年08月13日 00:56/ 0 赞/ 219 阅读

相关 jquery与jQzoom实现图片放大效果

前段时间在网店看到物体图片放大的功能，我一直再猜这是怎么实现的，直到今天才知道原来是jquery与jQzoom结合的效果。下面是从官网抠过来的文字： 1.引用js

阳光穿透心脏的1/2处/ 2022年08月05日 15:15/ 0 赞/ 240 阅读

相关 css3鼠标经过，图片放大效果

css代码 /图片划过改变图片大小效果/ .list ul li { width: 228px; height: 270px; overflow: hidde

旧城等待，/ 2022年07月14日 15:29/ 0 赞/ 348 阅读

相关商品详情放大效果

//页面布局： <div class="box"> <div class="disImg">

男娘i/ 2022年06月12日 12:14/ 0 赞/ 257 阅读

相关 Android浏览图片，点击放大至全屏效果

最近做一个项目类似于QQ空间，做到照片浏览的功能，对于QQ空间中点击图片放大至全屏，感觉效果很赞，于是也做了个类似的效果。如下。 ![201405102301501

￡神魔★判官ぃ/ 2022年05月13日 03:04/ 0 赞/ 459 阅读

相关图片放大效果

<style type="text/css"> {margin:0;padding:0;} /小图样式/ smallimg{

秒速五厘米/ 2021年10月08日 05:28/ 0 赞/ 561 阅读

相关自定义ImageView实现图片手势滑动、放大缩小效果

上一节说了通过自定义来加载超大图片，同时实现手指的拖动效果。不过，另一种情况就是，我们希望应用能够加载整张图片，如果图片太大就先压缩，如果小于屏幕就直接显示，同时用户可以拖拽移

深藏阁楼爱情的钟/ 2021年09月22日 05:00/ 0 赞/ 759 阅读

相关图片居中放大

> 图片居中放大 1.外层一个固定宽高的div,背景图片，相对定位position：relative; 2.div里面包含一个img标签，初始宽高为0px；绝对定位

阳光穿透心脏的1/2处/ 2021年09月10日 08:12/ 0 赞/ 517 阅读