上班,没有功夫看书,只有做项目学习。做了一个小项目,对一排元素,每个元素基本都是一样的属性,只有内容不一样。现在需求就是,点击每个元素,需要把对应的元素放大,铺满全屏。就像这样:

      

每一个点击小黑色心形时候之后,就像这样:

          

 

  很多人都会做这个效果,只要会一点js就可以完成。

  这个效果真的很简单,只要用jq的$(this)就可以抓取当前的点击的元素。但是,在开始思考做这个的时候,走错路了,这样想的:所有的元素都一样,我改怎样绑定元素,因为所有元素都一样,绑定点击的时候,点击的是哪一个呢,需要先获取索引值吗,然后根据索引值,放大对应的元素呢?还是,用html5中,自定义的data属性,来绑定。。。。想的好多,也确实用html5的data属性做了, 但是做着就发现不对路了,其实有一个很简单的做法:---------$(this).

html:

 

js:

然后对应的就是css:

嗯,that all。

  唯一值得讲的就是toggleClass,简单的一句话:有则去掉,没有则添加(className).js的效果就是,点击的时候,取当前的元素,如果有这个class就去掉,没有就加上,同时他的父元素,也进行ToggleClass,添加或删除 fullScream。

  就是这么简单,写这个的原因就是,在学习代码的时候,不要前期就给自己暗示,自己是新手,可以代码多点,只要效果出来就好,我们刚开始就应该用最好方法去解决问题,不然到最后,会发现自己只会敲代码不会思考了,因为你用的都是你的经验来敲代码,而不是自己的思想和脑子。

 

 

补充一个可以粘贴复制的代码:

// 学习页面内容中的图片点击放大$('.zoom').on('click', 'img', function () {  var thi***c = $(this).attr('src');  var bodyModal = '<div class="aly-expand-img-box">'+'<img src="'+ thi***c +'" alt="" class="aly-expand-img"></div></div>'  $('body').addClass('modal-open').append(bodyModal);})$('body').on('click', '.aly-expand-img-box,.aly-expand-img-box img', function () {  $('body').removeClass('modal-open')  $('.aly-expand-img-box').fadeOut();})

  

/* 点击图片放大效果 */.aly-expand-img-box {  position: fixed;  top: 0;  bottom: 0;  right: 0;  left: 0;  background: rgba(0,0,0, .6);  z-index: 1022;}.aly-expand-img-box img {  position: absolute;  top: 0;  left: 0;  right: 0;  bottom: 0;  margin: auto;  max-width: 1000px;  cursor: zoom-out;}.zoom img {  cursor: zoom-in;}

使用:在需要点击放大,出现遮罩层的图片   的 父级元素 加一个 class='zoom'

每日一句:A free man starts a long journey,whose conclusion is uncertain.

翻译:一个自由人开始了漫长的进程,伴随着一个未知的结局。

 

©著作权归作者所有:来自51CTO博客作者迩伶贰的原创作品,如需转载,请注明出处,否则将追究法律责任

更多相关文章

  1. Python中tuple和list的区别?Python基础学习!
  2. python 集合知识
  3. win10怎么设置定时关机计划任务
  4. 01-Vue_常用指令
  5. 02-Vue_事件修饰符
  6. 驰骋工作流引擎设计系列01 流程元素设计
  7. 在eclipse中jflow.properties文件乱码的解决办法
  8. 【php基础入门】PHP中常用的数组操作使用方法笔记整理(推荐)
  9. 学用 ASP.Net 之 "字符串" (4): string 类的扩展方法

随机推荐

  1. 比较C#和JAVA中面向对象语法的区别
  2. 有关UML的基础介绍
  3. C#中匿名对象与var以及动态类型 dynamic
  4. 比较TCP与UDP之间的区别
  5. c# webservice中访问http和https的wsdl以
  6. C语言在屏幕上显示内容
  7. .NET Core2.0小技巧之MemoryCache问题修
  8. .NET CORE如何动态调用泛型解决方法
  9. C#中委托和匿名委托的具体介绍
  10. asp.net mvc如何动态编译生成Controller