jQuery点击图片放大显示原图效果

HTML部分:
<div id="append_parent"></div>

JS代码部分:

?


1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

//内容页图片点击放大效果

    var imgBoxMod=$(".ctnlist .text img");

    imgPop(imgBoxMod);

    //内容页图片点击放大效果函数主体开始

    function imgPop(imgBoxMod){

        imgBoxMod.each(function(){

        //超过最大尺寸时自动缩放内容页图片尺寸

        var ctnImgWidth=$(this).width();

        if(ctnImgWidth>618){

                $(this).width(618);

            }

        //点击图片弹出层放大图片效果

        $(this).click( function(){

            $("#append_parent").html("<div id="imgzoom"><div id="imgzoom_zoomlayer" class="zoominner"><p><span class="y"><a title="在新窗口打开" target="_blank" class="imglink" id="imgzoom_imglink" href="">在新窗口打开</a><a title="关闭" class="imgclose">关闭</a></span></p><div id="imgzoom_img" class="hm"><img src="" id="imgzoom_zoom" style="cursor:pointer"></div></div></div><div id="imgzoom_cover"></div>"); //生成HTML代码

            var domHeight =$(document).height(); //文档区域高度

            $("#imgzoom_cover").css({"display":"block","height":domHeight});

            var imgLink=$(this).attr("src");

            $("#imgzoom_img #imgzoom_zoom").attr("src",imgLink);

            $("#imgzoom").css("display","block");

            imgboxPlace();

            })

    })

            //关闭按钮

    $("#append_parent .imgclose").live(‘click‘,function(){

        $("#imgzoom").css("display","none");

        $("#imgzoom_cover").css("display","none");

    })

        //新窗口打开图片

    $("#imgzoom_imglink").live(‘click‘,function(){

        var imgLink=$("#imgzoom_zoom").attr("src");

        $("#imgzoom_imglink").attr("href",imgLink);

    })

    //弹出窗口位置

    function imgboxPlace(){

        var cwinwidth=$("#imgzoom").width();

        var cwinheight=$("#imgzoom").height();

        var browserwidth =$(window).width();//窗口可视区域宽度

        var browserheight =$(window).height(); //窗口可视区域高度

        var scrollLeft=$(window).scrollLeft(); //滚动条的当前左边界值

        var scrollTop=$(window).scrollTop(); //滚动条的当前上边界值

        var imgload_left=scrollLeft+(browserwidth-cwinwidth)/2;

        var imgload_top=scrollTop+(browserheight-cwinheight)/2;

        $("#imgzoom").css({"left":imgload_left,"top":imgload_top});

        }

    }

    //内容页图片点击放大效果函数主体结束  

CSS样式部分:

?


1

2

3

4

5

6

7

8

9

10

11

12

/* 图片放大弹出层 */

.zoominner {background: none repeat scroll 0 0 #FFFFFF; padding: 5px 10px 10px; text-align: left;}

.zoominner p {height:30px; _position:absolute; _right:2px; _top:5px;}

.zoominner p a { background: url("../images/imgzoom_tb.gif") no-repeat scroll 0 0 transparent; float: left; height: 17px; line-height: 100px; margin-left: 10px; overflow: hidden; width: 17px;}

.zoominner p a.imgadjust {background-position: -40px 0;}

.zoominner p a.imgclose { background-position: -80px 0; cursor:pointer;}

.y {float: right; margin-bottom:10px;}

.ctnlist .text img{ cursor:pointer;}

#imgzoom_cover{background-color:#000000; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=70); opacity:0.7; position:absolute; z-index:800; top:0px; left: 0px; width:100%; display:none;}

#imgzoom{ display:none; z-index:801; position:absolute;}

#imgzoom_img{_width:300px; _height:200px; min-width:300px; min-height:200px; background:url(../images/imageloading.gif) center center no-repeat;}

#imgzoom_zoomlayer{ _width:300px; _height:200px; _position:relative; _padding-top:30px; min-width:300px; min-height:200px;}

效果:

效果演示页: http://www.ipsfan.com/koutu/2011-10-02/77.html

http://rt.ipsfan.com/blog-6-41.html

原文地址:https://www.cnblogs.com/hedianzhan/p/8459283.html

时间: 2024-10-16 17:26:59

jQuery点击图片放大显示原图效果的相关文章

jQuery鼠标悬停图片放大显示

jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http:/

jQuery实现的点击图片放大且在当前页面查看原图

jquery在当前页面查看原图,单击图片,显示出大图片,再次单击图片,恢复网页原有状态.不刷新页面的情况下查看原图,在网上类似的应用有很多.有时候朋友们说这是无刷新放大图片的功能,其实也就那么一回事吧,不过从本款代码来看,这功能实现起来并不太复杂,引入了jQuery,代码分享给大家. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT

js+jquery+html实现在三种不通的情况下,点击图片放大的效果

js+jquery+html实现在三种不通的情况下,点击图片放大的效果. 三种情况分别是:图片的父元素宽高固定;  图片的宽高固定;  图片的父元素宽固定,高度不固定 第一种情况:图片的父元素宽高固定: 1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>Title</title> 7

基于jQuery点击淡入淡出显示图片特效

分享一款基于jQuery点击淡入淡出显示图片特效.这是一款基于jQuery+CSS3实现酷炫效果的图片切换特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <center><p style="color:#334960">点击图标进行展示</p></center> <div class="main"> <div id="coolShow"><

高仿新浪点击图片放大(可以拖动,动态缩小放大,以及再次点击图片消失和保存图片的功能)

有图有真相: 最近在做项目的时候用到了点击图片放大效果,于是就开始实现,本以为挺简单的,实现起来还是遇到不少的小问题啊: 第一:只实现点击图片放大,再次点击消失,这个好实现: 第二:只实现图片可以拖动,而且可以动态缩小放大,这个也好实现: 第三:第一 和第二同步实现就出现问题了: 具体的问题是: (1)setOnClickListener 和 setOnTouchListener 同时设置的时候,若是setOnTouchListener的返回值为true,则不会再执行setOnClickList

微信小程序点击图片放大预览

微信小程序点击图片放大预览使用到 wx.previewImage 接口,可以放大.上/下一张 上代码 wxml代码 <view class='content-img' wx:if="{{images}}" > <view wx:for="{{images}}"> <image src="{{item}}" data-src="{{item}}" bindtap="previewImage

jQuery实现的图片等比例缩放效果

jQuery实现的图片等比例缩放效果:如果一个容器中放一个比容器还要大的图,那就可能就造成布局出现问题,就算是不容器大,有时候也看起来不够美观,这时候就要限制图片的尺寸,当然不能变形,否则就难看了,下面就介绍一下如何使用jQuery实现等比例缩放效果.代码如下: <div id="demo"> <img src="a.jpg" width="800" height="300" alt="图片&quo

点击图片放大至原始图片大小

有些时候为了排版的整洁,页面展示的图片不得不都是限定宽高的,如果想要点击图片放大至原始大小进行预览,再次点击回到原来样子,就要用到下面的代码了: var _w = parseInt($(window).width());//获取浏览器的宽度 $("#abc img").each(function(i){     var img = this;     var realWidth;//真实的宽度     var realHeight;//真实的高度     $("<img

点击图片放大功能

<!doctype html> <html> <head> <meta charset="utf-8" /> <title>点击图片放大</title> <style type="text/css"> a img{border:0px;} .latentzoom { CURSOR: pointer; outline: none } .latentzoom-image { BORDER