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实现按比例缩放图片的方法
Apr 29 jQuery
文本溢出插件jquery.dotdotdot.js使用方法详解
Jun 22 jQuery
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
jQuery阻止事件冒泡实例分析
Jul 03 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现高级检索功能
May 28 jQuery
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
Aug 08 jQuery
jQuery实现验证用户登录
Dec 10 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
JQuery省市联动效果实现过程详解
May 08 jQuery
jQuery cookie的公共方法封装和使用示例
Jun 01 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无限遍历目录示例
2014/02/21 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
php实现汉字验证码和算式验证码的方法
2015/03/07 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
代码触发js事件(click、change)示例应用
2013/12/13 Javascript
javascript使用正则获取url上的某个参数
2014/09/04 Javascript
javascript使用正则表达式实现去掉空格之后的字符
2015/02/15 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
2015/11/25 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
Vue下的国际化处理方法
2017/12/18 Javascript
基于webpack.config.js 参数详解
2018/03/20 Javascript
JavaScript+H5实现微信摇一摇功能
2018/05/23 Javascript
你了解vue3.0响应式数据怎么实现吗
2019/06/07 Javascript
JS写滑稽笑脸运动效果
2020/05/28 Javascript
Vue router传递参数并解决刷新页面参数丢失问题
2020/12/02 Vue.js
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
python 布尔操作实现代码
2013/03/23 Python
python实现在目录中查找指定文件的方法
2014/11/11 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
python操作redis方法总结
2018/06/06 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Python 在OpenCV里实现仿射变换—坐标变换效果
2019/08/30 Python
解决jupyter notebook打不开无反应 浏览器未启动的问题
2020/04/10 Python
英国排名第一的在线宠物用品商店:Monster Pet Supplies
2018/05/20 全球购物
学前班教师的自我鉴定
2013/12/05 职场文书
保险专业自荐信范文
2014/02/20 职场文书
英文推荐信格式范文
2014/05/09 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
JS高级程序设计之class继承重点详解
2022/07/07 Javascript