2014 | phper `blog

内容文章页内图片放大功能

By admin 2014年6月24日 Javascript No Comments

3739

内容文章页内图片放大功能。先上效果（可点击啊）代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>弹出层</title>
    <meta charset="utf-8">
    <script src="js/jquery-1.10.2.min.js" ></script>
    
    <style>
    *{margin:0;padding: 0}
    .article{width:700px;min-height: 1500px;margin: 0 auto;padding:10px;border: 1px solid #3C3F41;box-sizing: border-box;}
    .article img{width: 100;height:200px;}
     /*弹层样式*/
    .big-image-window{display:none;width: 100%;height: 100%;background-color:rgba(0,0,0,.4);position:fixed;top:0;left: 0;z-index: 99999;}
    .big-image-image-warp{height:auto;width:auto;background: rgba(255,255,255,.8);padding:10px;position:fixed;border-radius: 10px;}
    .big-image-button{width: 40px;height: 40px;position:absolute;top:-25px;right:-25px;background-color: #fff;border-radius: 20px;text-align: center;font-size:12px;color:#FF7C00;line-height: 40px;cursor: pointer;-webkit-transition:-webkit-transform .5s,background .5s,color .5s;-moz-transition:-moz-transform .5s,background .5s,color .5s;transition:transform .5s,background .5s,color .5s;}
    .big-image-button:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background: #FF7C00;color: #fff;}
    .big-image-window img{height:auto;width:auto;}
    </style>
    <script>
    $(function(){
        var $imgs = $(".article img").not($(".article a img")); //待显示图片集合
        /*
        弹层部分
         */
        var $bigWindow = $(".big-image-window");//弹出层
        var $showDiv = $(".big-image-image-warp");//显示图层
        var $closeBtn = $(".big-image-button");//关闭按钮
        var $winImage = $("#big-image-window-image");//图片元素
        var curIndex = 0;//元素索引
        //图片点击
        $imgs.click(function(){
            var $cur,src;
            $cur = $(this);
            src = $cur.attr("src");
            setSize(src,$showDiv,$winImage);
            $winImage.attr("src",src);
            curIndex = $imgs.index($cur);
            $bigWindow.show();
        });
        //切换图片
        $winImage.click(function(){
            var src;
            curIndex++;
            if(curIndex==$imgs.length) curIndex=0;
            src = $imgs.eq(curIndex).attr("src");
            $winImage.attr("src",src);
            setSize(src,$showDiv,$winImage);
        });
        //关闭弹层
        $closeBtn.click(function(){
            $bigWindow.hide();
        });
    });
    //根据图片大小修改DIV大小
    function setSize(src,resizeA,resizeB){
         var img,imgWidth,imgHeight,maxWidth,maxHeight;
         if(document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth)
         {
            maxWidth = document.documentElement.clientWidth;//最大宽度
            maxHeight = document.documentElement.clientHeight;//最大高度
         }else{
            maxWidth  = 1000;
            maxHeight = 1000;
         }
         img = new Image();
         img.src = src;
         imgWidth = parseInt(img.width)*1.1;//放大至原始宽度1.1倍
         imgHeight =parseInt(img.height)*1.1;//放大至原始高度1.1倍
         if(imgWidth>maxWidth) imgWidth = maxWidth*0.8;
         if(imgHeight>maxHeight) imgHeight = maxHeight*0.8;
         resizeA.width(imgWidth);
         resizeA.height(imgHeight);
         resizeA.css({"top":maxHeight/2-(imgHeight/2+20),"left":maxWidth/2-(imgWidth/2+20)});
         resizeB.width(imgWidth);
         resizeB.height(imgHeight);
    }
    </script>
</head>
<body>
    <div class="article">
        <img src="images/1.jpg">
        <img src="images/2.jpg">
        <a href="http://www.baidu.com" ><img src="images/3.jpg"></a>
        <img src="images/4.jpg">
        <img src="images/5.jpg">
        <hr />
        <b>备注：不经过服务器环境打开时，Chrom等浏览器弹层图片不会显示</b>
    </div>

<!--图片弹出层begin-->
<div class="big-image-window">
   <div class="big-image-image-warp">
        <div class="big-image-button">关闭</div>
        <img src="images/1.jpg" id="big-image-window-image">
   </div>
   <span id="xy" style="position: absolute;right:0;bottom:0;">dd</span>
</div>
<!--图片弹出层end-->

</body>
</html>

100

101

<!DOCTYPE html>

<html>

<head>

<style>

*{margin:0;padding: 0}

.article{width:700px;min-height: 1500px;margin: 0 auto;padding:10px;border: 1px solid #3C3F41;box-sizing: border-box;}

.article img{width: 100;height:200px;}

/*弹层样式*/

.big-image-window{display:none;width: 100%;height: 100%;background-color:rgba(0,0,0,.4);position:fixed;top:0;left: 0;z-index: 99999;}

.big-image-image-warp{height:auto;width:auto;background: rgba(255,255,255,.8);padding:10px;position:fixed;border-radius: 10px;}

.big-image-button{width: 40px;height: 40px;position:absolute;top:-25px;right:-25px;background-color: #fff;border-radius: 20px;text-align: center;font-size:12px;color:#FF7C00;line-height: 40px;cursor: pointer;-webkit-transition:-webkit-transform .5s,background .5s,color .5s;-moz-transition:-moz-transform .5s,background .5s,color .5s;transition:transform .5s,background .5s,color .5s;}

.big-image-button:hover{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);transform:rotate(360deg);background: #FF7C00;color: #fff;}

.big-image-window img{height:auto;width:auto;}

</style>

$(function(){

var $imgs = $(".article img").not($(".article a img")); //待显示图片集合

弹层部分

var $bigWindow = $(".big-image-window");//弹出层

var $showDiv = $(".big-image-image-warp");//显示图层

var $closeBtn = $(".big-image-button");//关闭按钮

var $winImage = $("#big-image-window-image");//图片元素

var curIndex = 0;//元素索引

//图片点击

$imgs.click(function(){

var $cur,src;

$cur = $(this);

src = $cur.attr("src");

setSize(src,$showDiv,$winImage);

$winImage.attr("src",src);

curIndex = $imgs.index($cur);

$bigWindow.show();

});

//切换图片

$winImage.click(function(){

var src;

curIndex++;

if(curIndex==$imgs.length) curIndex=0;

src = $imgs.eq(curIndex).attr("src");

$winImage.attr("src",src);

setSize(src,$showDiv,$winImage);

});

//关闭弹层

$closeBtn.click(function(){

$bigWindow.hide();

});

//根据图片大小修改DIV大小

function setSize(src,resizeA,resizeB){

var img,imgWidth,imgHeight,maxWidth,maxHeight;

if(document.documentElement && document.documentElement.clientHeight &&document.documentElement.clientWidth)

{

maxWidth = document.documentElement.clientWidth;//最大宽度

maxHeight = document.documentElement.clientHeight;//最大高度

}else{

maxWidth = 1000;

maxHeight = 1000;

}

img = new Image();

img.src = src;

imgWidth = parseInt(img.width)*1.1;//放大至原始宽度1.1倍

imgHeight =parseInt(img.height)*1.1;//放大至原始高度1.1倍

if(imgWidth>maxWidth) imgWidth = maxWidth*0.8;

if(imgHeight>maxHeight) imgHeight = maxHeight*0.8;

resizeA.width(imgWidth);

resizeA.height(imgHeight);

resizeA.css({"top":maxHeight/2-(imgHeight/2+20),"left":maxWidth/2-(imgWidth/2+20)});

resizeB.width(imgWidth);

resizeB.height(imgHeight);

}

</script>

</head>

<body>

<hr />

<b>备注：不经过服务器环境打开时，Chrom等浏览器弹层图片不会显示</b>

</div>

</div>

</div>

</body>

</html>

百度网盘带走？http://pan.baidu…

phper `blog

一个phper技术分享博客，发表自己最新的开发心得，关注最新的IT技术

百度排名规则与谷歌排名规则的区别

WordPress自定义函数获取特定分类文章数

PHP中定界符<<<的用法

DedeCms织梦教程

MySQL中max_allowed_packet设置及问题

Apache中.htaccess25种技巧

wordpress中hook钩子机制

PHP中func_get_args函数的使用

内容文章页内图片放大功能

HTML中IE兼容性