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

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



<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个小图片。想看高清的图片,让用户自己单击并在主页面弹出高清图片。。好像有什么代码可以做到。我忘了。
请大家帮助我!


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


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


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


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


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

【热门文章】
【热门文章】