jquery预览图片实现鼠标放上去显示实际大小
发布时间:2020-12-14 22:40:05 所属栏目:资源 来源:网络整理
导读:复制代码 代码如下: !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; ch
复制代码 代码如下: <!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>jQuery图片预览-jQuery在线演示-jQuery学习</title> <link href="http://www.jquery001.com/css/Stylesheet_min.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <style type="text/css"> img { border: none; } ul,li { margin: 0; padding: 0; } li { list-style: none; float: left; display: inline; margin-right: 10px; } #imglist img { width: 150px; height: 120px; } #imgshow { position: absolute; border: 1px solid #ccc; background: #333; padding: 5px; color: #fff; display: none; } </style> <script type="text/javascript"> var ShowImage = function () { xOffset = 10; yOffset = 30; $("#imglist").find("img").hover(function (e) { $("<img id='imgshow' src='" + this.src + "' />").appendTo("body"); //下面是两种样式赋值方法 //$("#imgshow").css("top",(e.pageY - xOffset) + "px").css("left",(e.pageX + yOffset) + "px").fadeIn("slow"); $("#imgshow").css({"top":(e.pageY - xOffset) + "px","left":(e.pageX + yOffset) + "px"}).fadeIn("slow"); },function () { $("#imgshow").remove(); }); }; jQuery(document).ready(function () { ShowImage(); }); </script> </head> <body> <div id="page-wrap"> <div id="content-wrap"> <div id="content-left" class="demo"> <ul id="imglist"> <li><a> <img src="/uploads/201709/11/15051443841.jpg" alt="图片" /></a></li> <li><a> <img src="/uploads/201709/11/15051443852.jpg" alt="图片" /></a></li> </ul> </div> </div> </div> </body> </html> (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |