JS图片放大1

$(function () {
//$(".pimg").click(function () {
$(".layer-photos-demo img").click(function () {
var _this = $(this);//将当前的pimg元素作为_this传入函数
imgShow("#outerdiv", "#innerdiv", "#bigimg", _this);
});
});

function imgShow(outerdiv, innerdiv, bigimg, _this) {
var src = _this.attr("src");
$(bigimg).attr("src", src);

/*获取当前点击图片的真实大小,并显示弹出层及大图*/
$("<img/>").attr("src", src).load(function () {
var windowW = $(window).width();
var windowH = $(window).height();
var realWidth = this.width;
var realHeight = this.height;
var imgWidth, imgHeight;
var scale = 0.8;

if (realHeight > windowH * scale) {
imgHeight = windowH * scale;
imgWidth = imgHeight / realHeight * realWidth;
if (imgWidth > windowW * scale) {
imgWidth = windowW * scale;
}
} else if (realWidth > windowW * scale) {
imgWidth = windowW * scale;
imgHeight = imgWidth / realWidth * realHeight;
} else {
imgWidth = realWidth;
imgHeight = realHeight;
}
$(bigimg).css("width", imgWidth);

var w = (windowW - imgWidth) / 2;
var h = (windowH - imgHeight) / 2;
$(innerdiv).css({ "top": h, "left": w });
$(outerdiv).fadeIn("fast");
});
$(outerdiv).click(function () {
$(this).fadeOut("fast");
});
}

原文地址:https://www.cnblogs.com/Ly426/p/9768613.html

时间: 2024-10-29 12:20:35

JS图片放大1的相关文章

js图片放大

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>mutiplier</title> <style type="text/css"> .conteainer{ width: 800px; height: 900px; /*margin-left: 50px auto;*/ p

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

js图片点击放大特效代码

原文:js图片点击放大特效代码 源代码下载:http://www.zuidaima.com/share/1550463485676544.htm 图片放大js代码实现,运行效果如下:

推荐两款简单好用的图片放大jquery插件

一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可js里加入 调用插件的函数 $('这里写要放大的图片').zoomify();如果有ajax 新生成的图片,要在ajax里再次调用一遍该函数. 二.zoomooz.js 推荐这里下载 使用说明: 这个插件有很多种 放大功能,可进行优雅的缩放操作,特别适用相册网站.这个图片方法不是 单独图片跳脱出来的放

jQuery图片放大

jQuery图片放大 <!DOCTYPE HTML> <html> <head> <title></title> <script src="jquery-1.7.1.min.js"></script> <style> #d{ width:300px; height:300px; background-color:pink; color:white; display:none; positio

jQuery Lightbox图片放大预览

简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://hovertree.com/texiao/jqimg/6/ 效果图如下: 源码下载:http://hovertree.com/h/bjaf/hdhgnftp.htm HTML文件代码: <!DOCTYPE html> <html lang="zh"> <head

图片放大居中

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>图片放大</title> <meta name="description" content=&

图片放大源码

<a path="images/be830324916476d709ef7f1e547042d0.jpg" class="preview" href="http://www.17sucai.com/">jquery选项卡插件制作标签标题内容slider滑动切换特效</a><Br /><Br /> <a path="images/39c118198047e3b7da820d162e71

jQuery实现网站图片放大效果

实现效果:当鼠标指向商品图片时,图片会自动放大. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>文字放大</title> 6 7 <script type="text/javascript" src="../../scripts/jquery-1.7.2.js"><