当前位置:首页 > 程序心得 > 正文内容

Jq 网页点击图片放大效果(单张)

admin9年前 (2016-07-26)程序心得1836

首先引入jq文件:  <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>

$(function(){
    $('.slideBox1 p span img,.slideBox1 p img,.slideBox1 img').click(function(){
        var url = $(this).attr('src');//如果不想添加orgurl路径或者说src属性就是实际的路径这里可以改成$(this).attr('src')
        showBigImage(url,$(this));
    });
})
function showBigImage(url,obj){
    var maxWidth = 800;   //限制图片的最大宽度
    var offset = obj.offset();
    var start = {
        width:obj.attr('width')||parseInt(obj.css('width')),
        height:obj.attr('height')||parseInt(obj.css('height'))
    }; 
    $('<div></div>').attr('id', 'div_img_cover')
    	.css({ 'position': 'absolute', 'top': '0', 'left': '0', 'z-index': 9999, 
	        'width': "100%", 
	        'height': getWaitHeight(),
	        'text-align': 'center',
	        'font': 'bold 24px arial',
	        'background-repeat': 'no-repeat',
	        'background-position': 'center',
	        'background-attachment': 'fixed',
	        'opacity':0.8,
	        'background':'#000'
	        })
	    .appendTo('body');
    
    
    var img = new Image();
    $(img).css(start);
    if(img.attachEvent){
        img.attachEvent('onload',imgLoaded)
    }else{
        img.addEventListener('load',imgLoaded,false);
    }
    img.src = url;

    function imgLoaded(){
        var imgWidth = img.width*1.5,imgHeight = img.height*1.5;    //设置图片放大的比例,最好保持宽高放大等比
        var newWidth = imgWidth > maxWidth ? maxWidth : imgWidth;
        var newHeight = imgHeight/imgWidth*newWidth
        var end = {
            width:parseInt(newWidth),
            height:parseInt(newHeight)
        }
        var container = $('<div></div>').appendTo('body');
        container.css('position','absolute');
        container.css(offset);
        container.attr('id','container');
        container.append(img);
        var css = setElementCenter('#container',1,end);
        $(img).animate(end,200);
        container.animate(css,200);
        $('#div_img_cover').click(function(){
            var that = $(this);
            $(img).animate(start,200);
            container.animate(offset,200,function(){
                that.remove();
                $(this).remove();
            });
        });
    }
    
    function setElementCenter(selector,pos,finalSize){
        var position = $(selector).css('position')=='fixed';
        var winSize = myGetWinSize();
        var elementSize = finalSize || getElementSize(selector);
        var finalTop =(winSize.height-elementSize.height)/2 + parseInt((!position ? winSize.scrollTop : 0)),
            finalLeft=(winSize.width-elementSize.width)/2+winSize.scrollLeft;
        var finalCss = {
            left:finalLeft,
            top:position ? finalTop : (finalTop<winSize.scrollTop ? winSize.scrollTop : finalTop)
        }
        if(!pos){
            $(selector).css({'position':position ?'fixed' : 'absolute','z-index':10000});
            $(selector).css(finalCss);
        }
        $(selector).css({'z-index':10000});
        return finalCss;
    }
    function myGetWinSize(){
        var size = {
            width:document.documentElement.clientWidth || document.body.clientWidth,
            height:document.documentElement.clientHeight || document.body.clientHeight,
            scrollTop:$(window).scrollTop(),
            scrollLeft:$(window).scrollLeft()
        }
        return size;
    }
    function getElementSize(selector){
        return {
            width:$(selector).width(),
            height:$(selector).height()
        }
    }
    function getWaitHeight(){
        var scrollHeight,
            offsetHeight;
        // handle IE 6
        if ($.browser.msie && $.browser.version < 7) {
            scrollHeight = Math.max(
                 document.documentElement.scrollHeight,
                 document.body.scrollHeight
            );
            offsetHeight = Math.max(
                     document.documentElement.offsetHeight,
                     document.body.offsetHeight
            );
        
            if (scrollHeight < offsetHeight) {
                     return $(window).height() + 'px';
            } else {
                     return scrollHeight + 'px';
            }
        // handle "good" browsers
        } else {
            return $(document).height() + 'px';
        }
    }}
</script>


效果如下:

blob.png

分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:http://yuyunhe.cn/index.php/post/167.html

分享给朋友:

“Jq 网页点击图片放大效果(单张)” 的相关文章

月薪3万的程序员都避开了哪些坑

月薪3万的程序员都避开了哪些坑

程序员薪水有高有低,有的人一个月可能拿30K、50K,有的人可能只有2K、3K。同样有五年工作经验的程序员,可能一个人每月拿20K,一个拿5K。是什么因素导致了这种差异?我特意总结了容易导致薪水低的九大行为表现,避开这些大坑,你就离高薪不远了。习惯即刻回报他不懂得只有春天播种,秋天才会有收获。刚刚付...

jQuery ajax使用$(this).parent()无效解决方法

本文章来给各位同学介绍一下关于jQuery ajax使用$(this).parent()无效解决方法,希望此方法对各位同学人有所帮助哦html 代码如下复制代码<p class="item"><input type="text" n...

SVN Skipped 'xxx' -- Node remains in conflict 错误的解决办法

svn提交发现错误#cd /home/svn/app/# svn upUpdating '.':Skipped 'xxx' -- Node remains in conflictAt revision 1054.Summary of conflicts: ...

Thinkphp3.2.x 多图上传几个注意点

1、<form enctype="multipart/form-data">2、<form enctype="multipart/form-data">3、<input type="file...

Mysql 触发器使用(含navicat使用案例)

Mysql 触发器使用(含navicat使用案例)

CREATE TRIGGER updateutime2 BEFORE UPDATE on yp_cms_score for EACH ROW BEGIN  SET NEW.utime= ...

MySQL获得当前日期时间\时间戳函数

MySQL获得当前日期时间\时间戳函数 1.1 获得当前日期+时间(date + time)函数:now()mysql> select now();+———————+| now() |+———————+| 2008-08-08 22:20:46 |+———————+除了 now()...

发表评论

访客

看不清,换一张

◎欢迎参与讨论,请在这里发表您的看法和观点。