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 11 jQuery
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
jquery+css实现简单的图片轮播效果
Aug 07 jQuery
详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
Nov 08 jQuery
jQuery实现简单的下拉菜单导航功能示例
Dec 07 jQuery
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
jQuery滚动条美化插件nicescroll简单用法示例
Apr 18 jQuery
jQuery实现表格隔行换色
Sep 01 jQuery
jQuery pagination分页示例详解
Oct 23 jQuery
jQuery分组选择器简单用法示例
Apr 04 jQuery
JS JQuery获取data-*属性值方法解析
Sep 01 jQuery
JQuery使用数组遍历跳出each循环
Sep 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
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
第六节--访问属性和方法
2006/11/16 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP+ACCESS 文章管理程序代码
2010/06/21 PHP
php和javascript之间变量的传递实现代码
2012/12/19 PHP
PHP生成验证码时“图像因其本身有错无法显示”的解决方法
2013/08/07 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP实现防止表单重复提交功能【基于token验证】
2018/05/24 PHP
JavaScript prototype对象的属性说明
2010/03/13 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
JavaScript中的View-Model使用介绍
2011/08/11 Javascript
Javascript异步编程的4种方法让你写出更出色的程序
2013/01/17 Javascript
js禁止页面使用右键(简单示例代码)
2013/11/13 Javascript
jQuery实现“扫码阅读”功能
2015/01/21 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
jQuery Ajax 实现在html页面实时显示用户登录状态
2016/12/30 Javascript
设置cookie指定时间失效(实例代码)
2017/05/28 Javascript
详解vue项目中如何引入全局sass/less变量、function、mixin
2018/06/02 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
jQuery 点击获取验证码按钮及倒计时功能
2018/09/20 jQuery
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
浅谈Python访问MySQL的正确姿势
2020/01/07 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
python 3.8.3 安装配置图文教程
2020/05/21 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
鼠标滚轮事件和Mac触控板双指事件
2019/12/23 HTML / CSS
匡威德国官网:Converse德国
2019/01/26 全球购物
什么是GWT的Entry Point
2013/08/16 面试题
银行职员思想汇报
2013/12/31 职场文书
班风学风建设方案
2014/05/06 职场文书
股东授权委托书
2014/10/15 职场文书
财务务虚会发言材料
2014/10/20 职场文书
大学生违纪检讨书300字
2014/10/25 职场文书
浅谈如何写好演讲稿?
2019/06/12 职场文书
《宝可梦》动画制作25周年到来 官方发布特别纪念视频
2022/04/01 日漫