搜尋

首頁  >  問答  >  主體

javascript - 知乎、为了方便美观，图片就缩小了。当用户想单击这个较小的图片时就变大起来了。这是什么原理？不会跳到新窗口



<script>

 function op(c_url)
 {
  window.open(c_url)
 }
</script>




</script>

</head>
<body>
<img src="images/zhengce.jpg" width="151" height="100" onclick="op(this.src)" />
<img src="images/1.jpg" width="151" height="100" onclick="op(this.src)" />
<img src="images/2.jpg" width="151" height="100" onclick="op(this.src)" />
<img src="images/3.jpg" width="151" height="100" onclick="op(this.src)" />

我自己写的代码，会跳到新窗口，
我希望我的思路就是这样，不要跳到新窗口。要在主页面里打开并显示图片，用户浏览这个大图片完成之后就关上，然后继续在主页面看N个小图片。想看高清的图片，让用户自己单击并在主页面弹出高清图片。。好像有什么代码可以做到。我忘了。
请大家帮助我！

黄舟黄舟2852 天前621

全部回覆(5)我來回復

  • ringa_lee

    ringa_lee2017-04-10 15:14:00

    用fancybox吧，或者Google“jquery 幻灯片”“jquery modal”“jquery 弹出窗”，这类弹出窗太多太简单了，你离“js大神”距离还有点远。。。

    回覆
    0
  • 高洛峰

    高洛峰2017-04-10 15:14:00

    准备一张大图和小图，点击小图时，将src替换成大图的url或者改变小图的大小

    回覆
    0
  • ringa_lee

    ringa_lee2017-04-10 15:14:00

    你可能需要colorbox或者fancybox一类的灯箱插件。

    回覆
    0
  • 高洛峰

    高洛峰2017-04-10 15:14:00

    准备，一张小图，一张大图，两个p, 大的p先隐藏，点击的时候再显示大的p

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-10 15:14:00

    这其实是图片预加载技术，先先载入小图，当你点击的时候加载原来图片的大小，这里面坑很多，没你写的代码那么简单，坑主要是浏览器兼容性带来的，有空我写个代码再让你瞧瞧吧，当然你也可以使用网上的各种插件来实现，不过我一般喜欢写原生js。

    回覆
    0
  • 取消回覆