jquery預覽圖片實現滑鼠放上去顯示實際大小

來源:互聯網
上載者:User

 本文為大家介紹的這個樣本為jquery實現的預覽圖片,當滑鼠放上去顯示實際大小,感興趣的朋友可以學習下

代碼如下:<!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="http://g.hiphotos.baidu.com/image/w%3D2048/sign=0a53d9eca1cc7cd9fa2d33d90d39203f/35a85edf8db1cb13efa8fe12df54564e93584bea.jpg" alt="圖片" /></a></li> <li><a> <img src="14300000029584127555444098375.jpg" alt="圖片" /></a></li> </ul> </div> </div>   </div> </body> </html> 
相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。