<style>
#demo{overflow:hidden;width:120px;text-align:center;padding:10px;}
#demo img{border:none;width:100px;height:100px;}
#enlarge_images{position:absolute;display:none;z-index:2;}
</style>
<div id="demo">
<img src="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" />
<img src="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" />
<img src="http://bbs.blueidea.com/attachments/2007/6/13/20070613_c4973b5442984904d1ddU5ChXTh3HECI.jpg" />
</div>
<div id="enlarge_images"></div>
<script>
var demo = document.getElementById("demo");
var gg = demo.getElementsByTagName("img");
var ei = document.getElementById("enlarge_images");
for(i=0; i<gg.length; i++){
var ts = gg[i];
ts.onclick = function(event){
event = event || window.event;
ei.style.display = "block";
ei.innerHTML = '<img src="' + this.src + '" />';
ei.style.top = document.body.scrollTop + event.clientY + 10 + "px";
ei.style.left = document.body.scrollLeft + event.clientX + 10 + "px";
}
ts.onmouseout = function(){
ei.innerHTML = "";
ei.style.display = "none";
}
}
</script>
分享到:
相关推荐
jquery实现网页图片点击查看大图效果,再次点击缩小,移动PC端
jquery响应式图片点击弹出图片放大查看效果
经典,好用的js点击小图出现大图效果,带有上一张,下一张功能,还有关闭等多项功能,是网站开发者的首选! 此文章是从别的网站下载,版权规其本人所有!
jQuery提供两种点击图片放大效果,文章内图片放大浏览时使用
jquery 实现点击图片放大效果
JS 图片 放大 JS放大图片 很好的一个代码.以后还有很多.
纯HTML和JS,CSS实现的点击图片,图片放大的功能
仿QQ空间新版相册点击图片全屏预览大图效果,可以通过在线点击预览大图
用jquery实现的仿微博点击缩略图预览大图效果支持图片旋转,查看原图等功能,可以收起大图返回小图。
最新Lightbox点击图片放大相册效果,图片点击放大图,可以切换图片列表前一张后一张,效果渐变透明柔和过度。 效果预览:http://www.juheweb.com/js/xc/108.html
swiper插件点击图片查看大图幻灯片效果可左右轮播切换代码,swiper选项卡,swiper滚动,swiper放大
HTML css图片放大效果,鼠标放在图片上后图片放大,离开后缩小
jquery点击图片放大jquery点击图片放大jquery点击图片放大jquery点击图片jquery点击图片放大jquery点击图片放大
点击小图对应的大图在上面展示图片轮播效果
例如点击UITableviewCell 上的图片 在当前viewcontroller上全屏显示出来,再次点击即消失,代码实现简单逻辑清楚
JS 图片 放大 JS放大图片 很好的一个代码.以后还有很多.
使用jQuery实现的点击图片放大效果。
Unity3D脚本:点击放大图片 Posted on 2013年02月21日 by U3d / Unity3D脚本/插件/被围观 276 次 Unity3D点击