jquery 图片放大
上一篇是关于手风琴效果的,但是有时候我们需要放大的图片大小不规律,想要在屏幕中间显示大图。
图片放大可以做为单独的效果,也可以和其他的效果结合起来。比如Demo 里的Demo5.html是以图片无缝切换和图片放大结合的。
整个效果分为两个部分。
1、定义遮罩层
$('.mark').css({
position: "absolute",
top: 0,
backgroundColor: "#777",
zIndex: 1002,
left: 0,
display: " none"
} )
当点击图片显示大图的时候把整个屏幕遮罩,改变透明度
function marked() {
$('.mark').css({
//height: $(window).height(),
//width: $(window).width()
//出现滚动条的时候有问题(2013-11-07)
height: document.documentElement.scrollHeight,
width: document.documentElement.scrollWidth
}).show().animate({opacity: 0.6}, 0);
}
2、定义图片在屏幕中间显示。首先要做的是在a标签链接大图片路径
<li>
<span style="position: absolute;bottom: 5px;width: 100%;text-align: center;">111111</span>
<a class="img_b" href="images/1_b.jpg">
<img class="aa" alt="" width="150" height="150" src="data:images/1_s.jpg"/>
</a>
</li>
获取图片的高宽来判断显示位置,设置图片位置时要在getimg.onload = function () {}里面设置,因为当图片太大时,我们必须要先等它加载完了才知道他的高宽。
function setImg(url) {
var getimg = new Image();
//getimg.src = url;//如果放在这里在IE有问题,点击第一次后就会再也不出现,缓存的原因。把他放到后面(2013-11-07)
var imgh, imgw;
getimg.onload = function () {
imgh = getimg.height;
imgw = getimg.width; var trueW = imgw * (400 / imgh);
if (imgh > 400) {//如果图片太大,高度设为400,宽度等比例缩小
$('.imageBox_bg').css({height: 400, width: trueW});
$('.bigImg').css({height: 400, width: trueW});
}
else {
$('.imageBox_bg').css({height: imgh, width: imgw });
$('.bigImg').css({height: imgh, width: imgw});
}
divCenter(url);
};
getimg.src = url;
}
图片在屏幕中间显示。
function divCenter(url) {
// var top = ($(window).height() - $('.imageBox_bg').height()) / 2,
// left = ($(window).width() - $('.imageBox_bg').width()) / 2;
//当出现滚动条的时候就不能再中间显示(2013-11-07)
var top = ($(window).height() - $('.imageBox_bg').height()) / 2 + $(document).scrollTop(),
left = ($(window).width() - $('.imageBox_bg').width()) / 2 + $(document).scrollLeft();
$('.bigImg').attr("src", url);
$('.imageBox_bg').css({
top: top,
left: left
}).stop().fadeIn(500);
}
在click function里返回值要设为false,不然点击图片的时候会在另一个页面显示图片了。
$(this).click(function () {
var url = $(this).attr("href");
setImg(url);
marked();
return false;
});
除了主要的两个部分,还有一些点击大图后隐藏大图,这些代码比较简单,用hide()函数就可以了。
现在可以把无缝切换和图片放大结合了。效果很不错吧!!
版权所有,转载请注明出处,谢谢!
jquery 图片放大的更多相关文章
- jquery图片放大插件鼠标悬停图片放大效果
都知道jquery都插件是非常强大的,最近分享点jquery插件效果,方便效果开发使用. 一.HTML代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...
- jquery图片放大功能简单实现
图片放大在某些例如商品细节放大图比较常见,本文写了一个图片放大的示例适合日常应付,有需求的朋友可以参考下 <div class="jqzoom"> <img sr ...
- 转载jQuery图片放大插件[twiPicZoom]
转载http://xuzhihong1987.blog.163.com/blog/static/26731587201312821725913/ 功能说明: 双击查看大图,鼠标滚动放大缩小,能够切换到 ...
- jQuery图片放大预览
在线演示 本地下载
- jQuery Lightbox图片放大预览
简介:jQuery Lightbox图片放大预览代码是一款可以在用户点击页面中的小图片时,将该图片的高清版本以Lightbox的方式放大显示在页面的中间,提高用户的体验度. 效果展示 http://h ...
- 推荐两款简单好用的图片放大jquery插件
一.zoomfiy.js 推荐可以从这里下载 使用说明: 使用该jquery 插件引入该插件的js:zoomfiy.js 或 min引入该插件的css:zoomfiy.css 或 min前后顺序都可j ...
- jquery图片查看插件,支持旋转、放大、缩小、拖拽、缩略图(仿qq图片查看)
最近做了一个jquery图片查看的插件,目的是能精确查看图片的详情,插件支持图片旋转.放大.缩小.拖拽.缩略图显示,界面效果是按照window的qq查看图片功能写的,当然不尽相同. 具体功能: 1. ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- jQuery鼠标悬停图片放大显示
jQuery鼠标悬浮放于图片上之后图片放大显示的效果,即鼠标移到图片上图片突出显示,鼠标移开后恢复原来的模样,你可以在图片滚动效果中加上本特效,相信会更炫一些. <!DOCTYPE html P ...
随机推荐
- php语法检查方法——命令行模式和代码形式
1. 命令行形式 php -l /path/to/file.php 2. php代码形式 function php_syntax_check($file){ $code = file_get_cont ...
- html 元素添加 class
<!-- 给 input 添加 class 一个input 可以添加多个class 中间空格隔开. --> @Html.TextBox("txtIDNumber", & ...
- 【BZOJ 1067】 [SCOI2007]降雨量
Description 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小于X年.例如2002,2003,2 ...
- 微软职位内部推荐-Sr SDE-MOD-Beijing
微软近期Open的职位: JOB TITLE: Senior Software Design EngineerDEPARTMENT: Microsoft Office Division ChinaIM ...
- C# - Lambda 表达式
Lambda 表达式分为三个部分: 1 参数定义部分.参数是未类型化的,因此编译器可以根据上下文推断出他们的类型. 2 =>运算符,把Lambda表达式的参数与表达式体分开. 3 表达式体. d ...
- linux内核分析之进程地址空间管理
1.struct task_struct 进程内核栈是操作系统为管理每一个进程而分配的一个4k或者8k内存大小的一片内存区域,里面存放了一个进程的所有信息,它能够完整的描述一个正在执行的程序:它打开的 ...
- 1015: [JSOI2008]星球大战starwar - BZOJ
Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...
- Recommender Systems协同过滤
第一部分是学习ID3时候积累的. 一.以前写的基础知识 1.信息:是用来消除不确定性的度量,信息量的大小,由所消除的不确定性的大小来计量(香农). 2.由于不确定性是由随机性引起的,所以用概率来描述和 ...
- pl/sql developer连接远程数据库
本地不安装oracle client程序,直接使用pl/sql developer连接远程数据库 考虑到机子本身资源有限,一个client会占用很多资源,尝试使用不安装客户端的方式进行远程连接. 需要 ...
- 极客范:如何使用 Cloud Insight 来监控闭路电视?
最近新上线支持 Windows 系统及其组件 监控功能的 Cloud Insight,在系统监控领域基本囊括了对所有主流和部分非主流平台的支持.但是这还不够,Cloud Insight 可不仅仅是一个 ...