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 validata插件实现方法
Jun 25 jQuery
jQuery实现checkbox的简单操作
Nov 18 jQuery
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
jQuery NProgress.js加载进度插件的简单使用方法
Jan 31 jQuery
jQuery中each方法的使用详解
Mar 18 jQuery
基于jQuery.i18n实现web前端的国际化
May 04 jQuery
jQuery事件多次绑定与解绑问题实例分析
Feb 19 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
Jquery异步上传文件代码实例
Nov 13 jQuery
jQuery实现高度灵活的表单验证功能示例【无UI】
Apr 30 jQuery
jQuery 移除事件的方法
Jun 20 jQuery
jQuery实现计算器功能
Oct 19 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
迅雷下载《中学科技》怀旧期刊下载
2021/02/27 无线电
php 无极分类(递归)实现代码
2010/01/05 PHP
PHP闭包(Closure)使用详解
2013/05/02 PHP
php使用Imagick生成图片的方法
2015/07/31 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
iframe 异步加载技术及性能分析
2011/07/19 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JavaScript获取table中某一列的值的方法
2014/05/06 Javascript
js实现简单的验证码
2015/12/25 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
基于Vue实现支持按周切换的日历
2020/09/24 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
解决js中的setInterval清空定时器不管用问题
2020/11/17 Javascript
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
python实现求特征选择的信息增益
2018/12/18 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python基于mediainfo批量重命名图片文件
2020/12/29 Python
CSS3 box-sizing属性
2009/04/17 HTML / CSS
关于html字符串正则判断和匹配的具体使用
2019/12/12 HTML / CSS
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
解释i节点在文件系统中的作用
2013/11/26 面试题
优秀研究生自我鉴定
2013/12/04 职场文书
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
情况说明书格式范文
2014/05/06 职场文书
土建工程师岗位职责
2014/06/10 职场文书
反四风对照检查材料
2014/09/22 职场文书
2014小学一年级班主任工作总结
2014/12/05 职场文书
班主任先进事迹材料
2014/12/17 职场文书
医院见习总结
2015/06/24 职场文书
2016国培研修心得体会
2016/01/08 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS