• 单击文字或图片内容放大,弹出框居中显示


    我们想要实现的效果是:

    点击一张小图,会在页面的居中位置显示一张大图。

    使用了animate动画函数,有从小图到大图,从小图位置到居中位置的轨迹。

    支持IE7及以上浏览器,火狐、谷歌浏览器。

    大图得居中位置,我主要使用了如下代码:

    var width=$('.alert').find('img').width();//大图得宽高
      var height=$('.alert').find('img').height();
      var lwidth=$(window).width();//屏幕中页面可见区域的宽高
      var lheight=$(window).height();
      var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标
       var y2=lheight/2-height/2+$(window).scrollTop();

    这里面加上了滚动条的宽度和高度,这样可以在有滚动条的情况下也是居中显示的。

    主要的代码如下:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>单击文字或图片内容放大显示</title>
        <script src="../jquery-1.8.3.min.js"></script>
        <style>
            *{margin:0;padding:0;}
            ul{overflow:hidden;list-style:none;margin:1000px auto;}
            ul li{float:left;height:150px;width:130px;margin:0 10px;}
            .bigpic{position:absolute;display:none;}
            .alert{background:#fff;border:solid #ccc 1px;padding:10px;}
            .alert a.close{position:absolute;top:0;right:0;}
        </style>
    </head>
    <body>
        <ul>
            <li><img src="mm1.jpg"></li>
            <li><img src="mm2.jpg"></li>
            <li><img src="mm3.jpg"></li>
            <li><img src="mm4.jpg"></li>
        </ul>
        <div class="bigpic" style="display:none;">
            <div class="pic-one"><img src="m1.jpg"></div>
            <div class="pic-two"><img src="m2.jpg"></div>
            <div class="pic-three"><img src="m3.jpg"></div>
            <div class="pic-four"><img src="m4.jpg"></div>
        </div>
        <div class="alert" style="display:none;">
            <a class="close" href="javascript:;">关闭</a>
        </div>
        <script>
            var x=0;
            var y=0;
            $('ul li').click(function(e){
                var index=$(this).index();
                x= e.pageX|| e.clientX+$(window).scrollLeft();//鼠标点击的坐标
                y= e.pageY|| e.clientY+$(window).scrollTop();
                $('.alert').css({position:'absolute',top:y,left:x,'1px',height:'1px',overflow:'hidden'});
                var bigpic=$('.bigpic').find('div').eq(index).find('img').attr('src');//找到相对应的大图片
                $('.alert').find('img').remove();
                $('.alert').append("<img src="+bigpic+">");//添加大图
                $('.alert').show();
                var width=$('.alert').find('img').width();//大图得宽高
                var height=$('.alert').find('img').height();
                var lwidth=$(window).width();//屏幕页面可见区域的宽高
                var lheight=$(window).height();
                var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标
                var y2=lheight/2-height/2+$(window).scrollTop();
                $('.alert img').css({'100%'});
                $('.alert').animate({left:x2,top:y2,width,height:height},300);
            })
            //这出现一个问题,当alert宽度和高度都为15px时或以下,如果不加padding,img是100%,就会造成图片不是从左上角开始的,上面就会有空白,这是因为父元素是块状元素,有自己的行间距,二他的子元素是行内元素,这样就会有空隙,此时解决方法有两个,
            // 给img加上display:block属性,形成块状元素;
            // 或者img还是内联元素,此时使用vertical-align:top可以向上对齐。
            //把父元素的间距设置为0,或者父元素的font-size设置为0yekeyi
            $('.alert a.close').click(function(){
                //console.log(x+'```'+y);
                $('.alert').animate({left:x,top:y,'1px',height:'1px'},300);    //全局变量
                $('.alert').fadeOut(100);
            })
        </script>
    </body>
    </html>

    效果可复制代码,自行在页面中查看。

  • 相关阅读:
    css background详解
    Javascript DOM 编程艺术:ENHANCING CONTENT
    Javascript DOM 编程艺术:创建一个简单的gallery
    js prototype
    Javascript DOM 编程艺术:优雅降级
    php solutions:创建画廊
    Javascript DOM 编程艺术: popUp
    Javascript DOM 编程艺术:Creating Markup on the Fly
    转:Node和Element的区别
    javascript语言精粹:函数
  • 原文地址:https://www.cnblogs.com/zhaixr/p/7070106.html
Copyright © 2020-2023  润新知