实例介绍
【实例简介】调用方法如下:
<!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 runat="server"> <title>便携式电子万年历 - 积分兑换 - 名吉管理处</title> <style type="text/css"> #ShowPictureBox { width:300px; height:300px;overflow:hidden; } </style> <script type="text/javascript" language="javascript" src="jquery.js"></script> <script type="text/javascript" language="javascript" src="jquery.JNMagnifier.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#ShowPictureBox").JNMagnifier({ renderTo:"#ShowBigPictureBox" }); }); </script> </head> <body> <div id="ShowPictureBox"> <img src="2011111614473078125001746.jpg" width="200" height="200"> </div> <div id="ShowBigPictureBox" style=" position:absolute; top:20px; left:250px; overflow:hidden; display:none; border:3px solid #ccc; padding:5px; background-repeat:no-repeat; background-color:#fff; width:300px; height:300px;"> </div> </body> </html>
【实例截图】
【核心代码】
(function($){ $.fn.JNMagnifier=function(setting){ if(setting&&setting.renderTo){ if(typeof(setting.renderTo)=="string"){ setting.renderTo = $(setting.renderTo); } }else{ return; } var _img_org_ = this.children("img"); _img_org_.css("cursor","pointer"); var __w = 0; var __h = 0; var __left = this.offset().left; var __top = this.offset().top; if(this.offsetParent()) { __left =this.offsetParent().offset().left; __top =this.offsetParent().offset().top; } var _move_x = 0; var _move_y = 0; var _val_w = (setting.renderTo.width() / 2); var _val_h = (setting.renderTo.height() / 2); _img_org_.mouseover(function(){ setting.renderTo.html('<img src="' _img_org_.attr("src") '" style="position:absolute;" id="JNMagnifierrenderToImg" />'); setting.renderTo.show(); var timer = setInterval(function(){ __w = $("#JNMagnifierrenderToImg").width() / _img_org_.width(); __h = $("#JNMagnifierrenderToImg").height() /_img_org_.height(); if(__w>0){ clearInterval(timer); } },100); }); _img_org_.mouseout(function(){ setting.renderTo.hide(); }); _img_org_.mousemove(function(e){ _move_x =0-Math.round((document.documentElement.scrollLeft e.clientX-__left) * __w - _val_w); _move_y =0-Math.round((document.documentElement.scrollTop e.clientY-__top) * __h - _val_h); $("#JNMagnifierrenderToImg").css({"left":_move_x "px ","top":_move_y "px"}); }); } })(jQuery);
好例子网口号:伸出你的我的手 — 分享!
网友评论
小贴士
感谢您为本站写下的评论,您的评论对其它用户来说具有重要的参考价值,所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字,对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙,所以请不要反馈意义不大的重复字符,也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明,或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦,又没人会搭理,于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享,对搜索内容的合法性不具有预见性、识别性、控制性,仅供学习研究,请务必在下载后24小时内给予删除,不得用于其他任何用途,否则后果自负。基于互联网的特殊性,平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查;无论平台是否已进行审查,用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场,基于网友分享,根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定,若资源存在侵权或相关问题请联系本站客服人员,点此联系我们。关于更多版权及免责申明参见 版权及免责申明
支持(0) 盖楼(回复)
支持(0) 盖楼(回复)