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 相关文章推荐
vue中如何引入jQuery和Bootstrap
Apr 10 jQuery
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
jQuery实现动态控制页面元素的方法分析
Dec 20 jQuery
jQuery实现模糊搜索功能的方法分析
Jun 29 jQuery
JQuery Ajax动态加载Table数据的实例讲解
Aug 09 jQuery
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 jQuery
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
jQuery实现的图片点击放大缩小功能案例
Jan 02 jQuery
jQuery实现鼠标放置名字上显示详细内容气泡提示框效果的方法分析
Apr 04 jQuery
jQuery实现鼠标滑动切换图片
May 27 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
自己动手做一个SQL解释器
2006/10/09 PHP
php下过滤html代码的函数 提高程序安全性
2010/03/02 PHP
zf框架的校验器InArray使用示例
2014/03/13 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
ajax的hide隐藏问题解决方法
2012/12/11 Javascript
分享一个我自己写的ToolTip提示插件(附源码)
2013/01/20 Javascript
jquery访问ashx文件示例代码
2014/08/11 Javascript
JavaScript函数学习总结以及相关的编程习惯指南
2015/11/16 Javascript
AngularJS 路由详解和简单实例
2016/07/28 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
jQuery UI制作选项卡(tabs)
2016/12/13 Javascript
nodejs中解决异步嵌套循环和循环嵌套异步的问题
2017/07/12 NodeJs
AngularJS2 与 D3.js集成实现自定义可视化的方法
2017/12/01 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
NodeJS实现不可逆加密与密码密文保存的方法
2018/03/16 NodeJs
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
vue v-on:click传递动态参数的步骤
2020/09/11 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
python编程开发之textwrap文本样式处理技巧
2015/11/13 Python
Python执行时间的计算方法小结
2017/03/17 Python
python ansible服务及剧本编写
2017/12/29 Python
对Python 网络设备巡检脚本的实例讲解
2018/04/22 Python
Python字符串、整数、和浮点型数相互转换实例
2018/08/04 Python
对python中的乘法dot和对应分量相乘multiply详解
2018/11/14 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python 根据网易云歌曲的ID 直接下载歌曲的实例
2019/08/24 Python
使用Python给头像加上圣诞帽或圣诞老人小图标附源码
2019/12/25 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Python新手学习装饰器
2020/06/04 Python
捷克厨房用品购物网站:Tescoma
2018/07/13 全球购物
高中军训感言1000字
2014/03/01 职场文书
小学班长竞选演讲稿
2014/04/24 职场文书
预防传染病方案
2014/06/14 职场文书
Windows Server 2012 R2 磁盘分区教程
2022/04/29 Servers