jquery单击文字或图片内容放大并居中显示


Posted in jQuery onJune 23, 2017

我们想要实现的效果是:

点击一张小图,会在页面的居中位置显示一张大图。

使用了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 相关文章推荐
jquery append与appendTo方法比较
May 24 jQuery
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
jQuery+ajax实现修改密码验证功能实例详解
Jul 06 jQuery
jQuery取得元素标签名称小结(附代码)
Aug 16 jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
jQuery使用动画队列自定义动画操作示例
Jun 16 jQuery
jQuery实现的五星点评功能【案例】
Feb 18 jQuery
jquery检测上传文件大小示例
Apr 26 jQuery
jquery实现手风琴案例
May 04 jQuery
Jquery高级应用Deferred对象原理及使用实例
May 28 jQuery
ajax jquery实现页面某一个div的刷新效果
Mar 04 jQuery
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 #jQuery
详谈表单格式化插件jquery.serializeJSON
Jun 23 #jQuery
简单谈谈require模块化jquery和angular的问题
Jun 23 #jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 #jQuery
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
基于jquery日历价格、库存等设置插件
Jul 05 #jQuery
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
You might like
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
MySQL的FIND_IN_SET函数使用方法分享
2012/03/27 PHP
PHP使用DES进行加密与解密的方法详解
2013/06/06 PHP
php模拟服务器实现autoindex效果的方法
2015/03/10 PHP
php删除一个路径下的所有文件夹和文件的方法
2018/02/07 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
javascript分页代码(当前页码居中)
2012/09/20 Javascript
javascript实现九宫格相加数值相等
2020/05/28 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
2016/10/12 Javascript
JS实现下拉菜单列表与登录注册弹窗效果
2017/08/10 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
jQuery中ajax请求后台返回json数据并渲染HTML的方法
2018/08/08 jQuery
Vue.js数字输入框组件使用方法详解
2019/10/19 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
2020/04/15 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
Python 字符串中的字符倒转
2008/09/06 Python
Python的Django应用程序解决AJAX跨域访问问题的方法
2016/05/31 Python
django model去掉unique_together报错的解决方案
2016/10/18 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
python实现UDP协议下的文件传输
2020/03/20 Python
python实现密码验证合格程序的思路详解
2020/06/01 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
HTML5 Canvas概述
2009/08/26 HTML / CSS
HTML5+css3:3D旋转木马效果相册
2017/01/03 HTML / CSS
英国轻奢珠宝品牌:Astley Clarke
2016/12/18 全球购物
TripAdvisor德国:全球领先的旅游网站
2017/12/07 全球购物
如何找出EMP表里面SALARY第N高的employee
2013/12/05 面试题
卫生安全检查制度
2014/02/04 职场文书
大学毕业生求职自荐信
2014/02/20 职场文书
农村婚庆司仪主持词
2014/03/15 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
2014教师党员自我评议(5篇)
2014/09/20 职场文书
市级三好生竞选稿
2015/11/21 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
个人职业生涯规划之自我评估篇
2019/09/03 职场文书