html展示图片div,CSS+DIV实现图片动态显示(完美版)_html/css_WEB-ITnose

Show Photo

function ImageDivMouseOver(obj)

{

document.getElementById(obj).style.left=window.event.x+15+document.documentElement.scrollLeft;

document.getElementById(obj).style.top=window.event.y+15+document.documentElement.scrollTop;

}

.showImage a{

display:block;/**//*让链接以块状呈现，这样不用点中链接文字就可以响应链接*/

}

.showImage a img{

display: none; visibility:hidden;/**//*初始化信息面板不显示*/

}

.showImage a:hover{_border:none;text-decoration:none;}/**//*IE7以下版本A状态伪类bug*/

.showImage a:hover img{

display:block;

visibility:visible;

position: absolute;

display:block;

width: 139px;/**//*只给出宽度，高让它随内容多少自动调整*/

border: 1px solid rgb(91,185,233);

background-color: rgb(228,246,255);

z-index:999;/**//*把信息面板提到一个较高的位置，使链接文字过长时不会与面板重叠,但这只对FF有效*/

}

.showImage a img{

border:none;/**//*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/

display:block;

position: absolute;/**//*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/

left:80px;

top:30px;

}

.imgStyle{z-index:10px; position:absolute}

优化内容:

1.跟随鼠标

2.增加考虑滚动条因素

3.图片最前位置显示

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理