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中关于bind()方法的使用技巧分享
Mar 30 jQuery
jQuery获取table下某一行某一列的值实现代码
Apr 07 jQuery
jQuery 表单序列化实例代码
Jun 11 jQuery
jQuery实现键盘回车搜索功能
Jul 25 jQuery
jQuery EasyUI的TreeGrid查询功能实现方法
Aug 08 jQuery
jQuery图片缩放插件smartZoom使用实例详解
Aug 25 jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现form表单基于ajax无刷新提交方法实例代码
Nov 04 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery中getJSON跨域原理的深入讲解
Sep 02 jQuery
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
Mar 31 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中养成7个面向对象的好习惯
2010/01/28 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
经验几则 推荐
2006/09/05 Javascript
javascript for循环设法提高性能
2010/02/24 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js中replace的用法总结
2013/12/27 Javascript
JavaScript中日期的相关操作方法总结
2015/10/24 Javascript
使用Chart.js图表库制作漂亮的响应式表单
2015/10/28 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
jQuery查找dom的几种方法效率详解
2017/05/17 jQuery
Vue CLI2升级至Vue CLI3的方法步骤
2019/05/20 Javascript
微信小程序登录对接Django后端实现JWT方式验证登录详解
2019/07/29 Javascript
vue实现购物车功能(商品分类)
2020/04/20 Javascript
JavaScript代码简化技巧实例解析
2020/09/09 Javascript
Python基于动态规划算法计算单词距离
2015/07/25 Python
python实现音乐下载器
2018/04/15 Python
Python get获取页面cookie代码实例
2018/09/12 Python
Python中遍历列表的方法总结
2019/06/27 Python
Python Request爬取seo.chinaz.com百度权重网站的查询结果过程解析
2019/08/13 Python
CSS3 函数技巧 用css 实现js实现的事情(clac Counters Tooltip)
2017/08/15 HTML / CSS
英国潮流网站:END.(全球免邮)
2017/01/16 全球购物
伦敦鲜花递送:Flower Station
2021/02/03 全球购物
大学生怎样进行自我评价
2013/12/07 职场文书
安全生产宣传标语
2014/06/06 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
教育见习报告范文
2014/11/03 职场文书
一年级数学下册复习计划
2015/01/17 职场文书
社会实践活动总结
2015/02/05 职场文书
2015年财务工作总结范文
2015/03/31 职场文书
法律意见书范文
2015/06/04 职场文书
车间安全生产管理制度
2015/08/06 职场文书
大队委员竞选稿
2015/11/20 职场文书
Go遍历struct,map,slice的实现
2021/06/13 Golang
对讲机知识
2022/04/07 无线电