jQuery实现图片点击放大缩小(小案例)

标签: jQuery 点击放大 css
166人阅读 评论(0) 收藏 举报
分类:

    我们不废话,直接上例子。首先利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度可能会超出屏幕 的高度)。

    来看css部分代码:

<style>
    /*全屏显示大图*/
    .opacityBottom{
        width: 100%;
        height: 100%;
        position: fixed;
        background:rgba(0,0,0,0.8);
        z-index:1000;
        top: 0;
        left: 0
    }
    .none-scroll{
        overflow: hidden;
        height: 80%;
    }
    .bigImg{
        width:80%;
        height: 80%;
        left:10%;
        top:10%;
        position:fixed;
        z-index: 10001;

    }
</style>

    咱们再来看下js部分的代码:

$(".image_click").click(function () {
    var imgsrc = $(this).attr("src");
    var opacityBottom = '<div id="opacityBottom" style="display: none"><img class="bigImg" src="'+ imgsrc +'" ></div>';
    $(document.body).append(opacityBottom);
    toBigImg();//变大函数
});

function toBigImg(){

    $("#opacityBottom").addClass("opacityBottom");
    $("#opacityBottom").show();
    $("html,body").addClass("none-scroll");//下层不可滑动
    $(".bigImg").addClass("bigImg");
    /*隐藏*/
    $("#opacityBottom").bind("click",clickToSmallImg);
    $(".bigImg").bind("click",clickToSmallImg);
    var imgHeight = $(".bigImg").prop("height");
    if(imgHeight < h){
        $(".bigImg").css({"top":(h-imgHeight)/2 + 'px'});

    }else{
        $(".bigImg").css({"top":'0px'});
    }
    function clickToSmallImg() {
        $("html,body").removeClass("none-scroll");
        $("#opacityBottom").remove();
    }
};
    image_click是绑定图片的class值,这个案例非常简单,还可以通过修改css来展示不同的样式的图片,大家有时间可以研究下,今天有点懒,直接贴的代码。如果感觉不错的话,请多多点赞支持哦。。。
查看评论

zoomove-jQuery图片内部放大和移动插件

  • 2017年07月04日 09:24
  • 124KB
  • 下载

jquery鼠标移动图片上实现放大效果

jquery鼠标移动图片上实现放大效果 首先界面上要有图片,下面是图片 其次在script代码段中加入如下代码,进行适量修改即可 $(document).ready(function () { ...
  • hello_mr_anan
  • hello_mr_anan
  • 2017-06-25 08:33:16
  • 724

JS(jquery)实现图片放大镜效果

呵呵,我又看到了一种jquery的插件jquzoom, JS(jquery)实现图片放大镜效果  http://www.vancl.com/css/jqzoom.css" type="text/cs...
  • Mlive
  • Mlive
  • 2008-07-31 15:04:00
  • 890

jquery实现图片放大功能

最近做的一个项目中需要图片放大的功能,所需要的jquery组件在百度云盘里边链接:http://pan.baidu.com/s/1dEKZQ29 密码:fyl8,也可以自己下载最新版的。 然后需要添加...
  • wojiaohuangyu
  • wojiaohuangyu
  • 2016-08-23 11:59:17
  • 2134

利用html和Jquery实现照片墙(点击之后放大,再点击缩小)

$(function(){ initimg(); initposition(); $(window).resize(initposition); $(".wrap .i...
  • superwoman_yy
  • superwoman_yy
  • 2017-10-19 22:54:38
  • 385

前端jquery实现图片点击放大缩小

利用dom的垂直分层实现图片的点击放大和缩小(手机上使用的效果较好),在图片放大的时候同时禁止页面的滑动,如果在web端的话可以不禁止屏幕的滚动(因为图片放大是将图片的宽度变成100%,在web上长度...
  • gjq1993
  • gjq1993
  • 2017-02-15 17:37:38
  • 2977

JQuery实现图片放大的动态菜单效果

div, img, ul, li { margin: 0; padding: 0; } .head img { border: 0 none; vertical-ali...
  • whisperapart
  • whisperapart
  • 2011-11-03 11:42:55
  • 267

JS实现图片的放大和缩小

示例代码:
  • qq_23994787
  • qq_23994787
  • 2017-09-11 00:44:42
  • 333

jquery点击图片放大与缩小

在web项目中图片的放大与缩小,比如:列表里显示的图片,相册图片等 引用以下文件1、 2、 2、 3、...
  • panyuanyuan
  • panyuanyuan
  • 2017-05-03 10:56:55
  • 261

jQuery实现放大镜效果

1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果。 在接下来的博文中,我们...
  • swazer_z
  • swazer_z
  • 2016-01-27 15:15:40
  • 315
    个人资料
    专栏达人 持之以恒
    等级:
    访问量: 44万+
    积分: 6952
    排名: 4177