jquery单击文字或图片内容放大并居中显示
我们想要实现的效果是：
点击一张小图，会在页面的居中位置显示一张大图。
使用了animate动画函数，有从小图到大图，从小图位置到居中位置的轨迹。
支持IE7及以上浏览器，火狐、谷歌浏览器。
大图得居中位置，我主要使用了如下代码：
var width=$('.alert').find('img').width();//大图得宽高
var height=$('.alert').find('img').height();
var lwidth=$(window).width();//屏幕中页面可见区域的宽高
var lheight=$(window).height();
var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标
var y2=lheight/2-height/2+$(window).scrollTop();
这里面加上了滚动条的宽度和高度，这样可以在有滚动条的情况下也是居中显示的。
主要的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>单击文字或图片内容放大显示</title>
<script src="../jquery-1.8.3.min.js"></script>
<style>
*{margin:0;padding:0;}
ul{overflow:hidden;list-style:none;margin:1000px auto;}
ul li{float:left;height:150px;width:130px;margin:0 10px;}
.bigpic{position:absolute;display:none;}
.alert{background:#fff;border:solid #ccc 1px;padding:10px;}
.alert a.close{position:absolute;top:0;right:0;}
</style>
</head>
<body>
<ul>
<li><img src="mm1.jpg"></li>
<li><img src="mm2.jpg"></li>
<li><img src="mm3.jpg"></li>
<li><img src="mm4.jpg"></li>
</ul>
<div class="bigpic" style="display:none;">
<div class="pic-one"><img src="m1.jpg"></div>
<div class="pic-two"><img src="m2.jpg"></div>
<div class="pic-three"><img src="m3.jpg"></div>
<div class="pic-four"><img src="m4.jpg"></div>
</div>
<div class="alert" style="display:none;">
<a class="close" href="javascript:;" rel="external nofollow" >关闭</a>
</div>
<script>
var x=0;
var y=0;
$('ul li').click(function(e){
var index=$(this).index();
x= e.pageX|| e.clientX+$(window).scrollLeft();//鼠标点击的坐标
y= e.pageY|| e.clientY+$(window).scrollTop();
$('.alert').css({position:'absolute',top:y,left:x,width:'1px',height:'1px',overflow:'hidden'});
var bigpic=$('.bigpic').find('div').eq(index).find('img').attr('src');//找到相对应的大图片
$('.alert').find('img').remove();
$('.alert').append("<img src="+bigpic+">");//添加大图
$('.alert').show();
var width=$('.alert').find('img').width();//大图得宽高
var height=$('.alert').find('img').height();
var lwidth=$(window).width();//屏幕页面可见区域的宽高
var lheight=$(window).height();
var x2=lwidth/2-width/2+$(window).scrollLeft();//在屏幕居中的坐标
var y2=lheight/2-height/2+$(window).scrollTop();
$('.alert img').css({width:'100%'});
$('.alert').animate({left:x2,top:y2,width:width,height:height},300);
})
//这出现一个问题，当alert宽度和高度都为15px时或以下，如果不加padding，img是100%，就会造成图片不是从左上角开始的，上面就会有空白，这是因为父元素是块状元素，有自己的行间距，二他的子元素是行内元素，这样就会有空隙，此时解决方法有两个，
// 给img加上display:block属性，形成块状元素；
// 或者img还是内联元素，此时使用vertical-align:top可以向上对齐。
//把父元素的间距设置为0，或者父元素的font-size设置为0yekeyi
$('.alert a.close').click(function(){
//console.log(x+'```'+y);
$('.alert').animate({left:x,top:y,width:'1px',height:'1px'},300); //全局变量
$('.alert').fadeOut(100);
})
</script>
</body>
</html>
效果可复制代码，自行在页面中查看。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现等比例缩放大图片让大图片自适应页面布局
在布局页面时,有时会遇到大图片将页面容器"撑破"的情况,尤其是加载外链图片(通常是通过采集的外站的图片).那么本文将为您讲述使用jQuery如何按比例缩放大图片,让大图片自适应页面布局. 通常我们处理缩略图是使用后台代码(PHP..net.Java等)根据大图片生成一定尺寸的缩略图,来供前台页面调用,当然也有使用前台javascript脚本将加载后的大图强行缩放,变成所谓的缩略图,这种方法不可取.但是,针对网站内容页,如本站文章详情页,如果需要加载一张很大的图片时,为了防止"
-
一个CSS+jQuery实现的放大缩小动画效果
今天帮朋友写了一些代码,自己觉得写着写着,好几个版本以后,有点满意,于是就贴出来. 都是定死了的.因为需求就只有4个元素.如果是要用CSS的class来处理,那就需要用到CSS3动画了. 功能 : 在上方的按钮上滑动,可以切换各个page,点击下方的各个page,也可以切换收缩还是展开状态. 初始效果预览 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title> CSS+jQuery动画效果 </title&g
-
jQuery实现图片放大预览实现原理及代码
对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览.以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q
-
jQuery实现响应浏览器缩放大小并改变背景颜色
/*Javascript代码片段*/ //定义一个方法:这个方法控制浏览器页面背景色的切换变化 function myfunction(){ $('body').toggleClass('bgcolor'); } //添加监控页面窗口变化的方法 $(window).resize(myfunction); //并且在页面加载时即调用 myfunction();
-
jQuery当鼠标悬停时放大图片的效果实例
这个效果最初源于小敏同志的一个想法,刚开始做的时候只能实现弹出的图片是固定的,不能随鼠标移动,最后加以改善,终于实现了比较理想的效果.今天就把制作该效果的经验与大家一同分享.先看看最终效果演示: HTML结构部分:先编写一个无序列表的结构,a标签中的img标签用来存放小图片,a标签添加一个rel属性,用来存放大图片的路径. 复制代码 代码如下: <UL id=gallery sizcache="6" sizset="7"> <LI sizcach
-
基于jquery的滚动鼠标放大缩小图片效果
今天要出个鼠标滚动放大缩小图片的功能,看似很简单,从网上一搜,出现的都是onmousewheel的例子,全部只支持IE浏览器,结果查出火狐有对应的DOMMouseScroll来处理这个功能,代码如下,并加上注意的注释项: 复制代码 代码如下: $(function(){ $(".body img").each(function(){ if($.browser.msie){ $(this).bind("mousewheel",function(e){ var e=e|
-
基于jquery实现一张图片点击鼠标放大再点缩小
复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="jquery-1.8.3.min.js"></script> <sc
-
jQuery div层的放大与缩小简单实现代码
复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <style type="text/css"> .content { border: 1px solid #ccc; width: 440px; overflow: hidden; margin: 10p
-
jquery 实现京东商城、凡客商城的图片放大效果
效果如下:看下我们的演示,"运行代码"后请刷新一次: JQzoom Demo div.notes{ font-size:12px; } div.notes a{ color:#990000; } $(function() { $(".jqzoom").jqzoom(); }); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行] 要实现这样的效果,只需要在需要这样效果的页面的区域加入: 复制代码 代码如下: <link rel="styles
-
zShowBox 图片放大展示jquery版 兼容性
zShowBox.js 复制代码 代码如下: /* * zShowBox (图片放大展示) */ function zShowBox(domChunk) { //为每张图片链接加上 class="zshowbox" var zcounter = 0; $(domChunk + ' a').each(function () { var a_href = $(this)[0].href.toLowerCase(); var file_type = a_href.substring(a_hr