开发者社区> 填坑大人> 正文

鼠标划过时,预览大图片(浮动层)

简介: 当鼠标划过图片时,用浮动层来预览大图片,虽然不算完美,但够一个网站用即可,有需要再拿来改。 无标题文档 .center_div2{ position: absolute; z-index: 1; text-alig...
+关注继续查看

当鼠标划过图片时,用浮动层来预览大图片,虽然不算完美,但够一个网站用即可,有需要再拿来改。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style type="text/css"><!-- .center_div2{ position: absolute; z-index: 1; text-align: center; background-color: #e0e7ef; border:1px solid #F00; } .center_div_tips2 { position: relative; color: Red; } --></mce:style><style type="text/css" mce_bogus="1">.center_div2{ position: absolute; z-index: 1; text-align: center; background-color: #e0e7ef; border:1px solid #F00; } .center_div_tips2 { position: relative; color: Red; }</style> <mce:script language="javascript"><!-- function IsIE() { var OsObject = ""; if (navigator.userAgent.indexOf("MSIE") > 0) { return true; } } function mouseMove(ev) { /*ie 与ff的event 机制不同*/ ev = ev || window.event; var mousePos = mouseCoords(ev); var detailDiv = document.getElementById("detailDiv"); //将要弹出的层 detailDiv.style.left = (mousePos.x + 10) + "px"; detailDiv.style.top = (mousePos.y + 18) + "px"; } function mouseCoords(ev) { var result; if (ev.pageX || ev.pageY) { result = { x: ev.pageX, y: ev.pageY }; } /*ie 与 ff的边界 处理不同*/ else if (IsIE()) { result = { x: ev.clientX + document.documentElement.scrollLeft - document.documentElement.clientLeft, y: ev.clientY + document.documentElement.scrollTop - document.documentElement.clientTop } } else { result = { x: ev.clientX + document.body.scrollLeft - document.body.clientLeft, y: ev.clientY + document.body.scrollTop - document.body.clientTop } } return result; } function preview_show(obj){ document.getElementById("detailDiv").style.display=''; document.onmousemove=mouseMove; var detailImg=document.getElementById('detailImg'); detailImg.src=obj.parentNode.href; } function preview_hidden(){ document.onmousemove=null; document.getElementById("detailDiv").style.display='none'; } // --></mce:script> </head> <body> <div id="detailDiv" class="center_div2"> <img id="detailImg" src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="200" /> </div> <div id="textBox"></div> <table width="65%" border="0" cellspacing="0" cellpadding="0"> <tr> <td height="150"><a href="images/adv-02.jpg" mce_href="images/adv-02.jpg"><img src="images/about.jpg" mce_src="images/about.jpg" width="213" height="325" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> <td><a href="images/about.jpg" mce_href="images/about.jpg"><img src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> </tr> <tr> <td height="100"><a href="images/adv-02.jpg" mce_href="images/adv-02.jpg"><img src="images/adv-06.jpg" mce_src="images/adv-06.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> <td><a href="images/about.jpg" mce_href="images/about.jpg"><img src="images/adv-02.jpg" mce_src="images/adv-02.jpg" width="179" height="56" onmouseover="preview_show(this)" onmouseout="preview_hidden()" /></a></td> </tr> </table> </body> </html>

 

 

#============

参考自:http://www.jb51.net/article/21485.htm

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
使用JCrop进行图片裁剪,裁剪js说明,裁剪预览,裁剪上传,裁剪设计的图片处理的工具类和代码
 1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那些js可以参考JCrop案例: 3.编写的html代码如下: &lt;div id="light" class="white_content"&gt;        &lt
2394 0
Android开发中如何解决加载大图片时内存溢出的问题
Android开发中如何解决加载大图片时内存溢出的问题    在Android开发过程中,我们经常会遇到加载的图片过大导致内存溢出的问题,其实类似这样的问题已经屡见不鲜了,下面将一些好的解决方案分享给大家。
1137 0
鼠标划过时,预览大图片(浮动层)
当鼠标划过图片时,用浮动层来预览大图片,虽然不算完美,但够一个网站用即可,有需要再拿来改。 无标题文档 .center_div2{ position: absolute; z-index: 1; text-alig...
670 0
阿里云服务器如何登录?阿里云服务器的三种登录方法
购买阿里云ECS云服务器后如何登录?场景不同,阿里云优惠总结大概有三种登录方式: 登录到ECS云服务器控制台 在ECS云服务器控制台用户可以更改密码、更换系.
29141 0
Android 解决图片大量下载:软引用必须懂4点
Android 解决图片大量下载:软引用必须懂4点   可能对于Android开发者来说,软引用这个词有的会不是很熟悉,软引用在Java开发中用的比较多,但是,在Android开发中引用软引用,会给我们解决很多难题。
719 0
springboot之文件上传、图片预览(thymeleaf+layui)
springboot自带图片服务器,但是一般我们都不会用,文件这一块因为灵活性比较高,可能每个公司的都不一样,因此最好还是自己来搞定。 一、思路 1、上传①.
3331 0
图片上传预览原理及实现
目前网上有很多支持图片上传时进行预览的插件,功能完备,界面优雅,使用起来也很方便。一直以来也就只是用用,没有想过这些插件背后的实现原理。趁着今天有点时间,也来学习学习。 追根溯源 设想 原理 DataURL浅析 格式 预览实现 HTML JavaScript控制 预览效果 打包封装 简易封装 使用方式 测试 总结 追根溯源 设想 一开始,按照我的思路,预览可能是这么来实现的。
1291 0
+关注
填坑大人
码了十余年砖,谈得了需求、设计得了架构、编得了文档、撸得了代码。写得了前端,做得了后台,搞得了数据。最近对大数据颇感兴趣
84
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载