mlens是一款优秀的图片放大镜插件
1、引入以下的js和css文件
1 2 | < script type = "text/javascript" src = "js/jquery-1.8.2.min.js" ></ script > < script type = "text/javascript" src = "js/jquery.mlens-1.0.min.js" ></ script > |
2、在head标签中加入以下js代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < script type = "text/javascript" > $(document).ready(function() { $("#green_monster").mlens( { imgSrc: $("#green_monster").attr("data-big"), // path of the hi-res version of the image lensShape: "circle", // shape of the lens (circle or square) lensSize: 180, // size of the lens (in px) borderSize: 4, // size of the lens border (in px) borderColor: "#fff", // color of the lens border (#hex) borderRadius: 0 // border radius (optional, only if the shape is square) }); }); </ script > |
3、在body标签中加入以下格式的html代码
1 | < img id = "green_monster" src = "images/GreenMonster_640px.jpg" alt = "green monster graffiti by Kotzian" data-big = "images/GreenMonster_1280px.jpg" > |
特别申明:
本站所有资源都是由网友投稿发布,或转载各大下载站,请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:lei1294551502@163.com