用原生javascript写了一个放大镜效果后,用插件简单地再做一下下。必须得承认,用插件来实现绝对是偷懒的好方法。如果要考虑性能来说的话,用原生的比用插件的更优化,毕竟实现的目的很简单,用插件实现的话导致加载了很多多余的数据,大大滴影响了性能。可是这真的是大大滴减少了开发的时间呢。
下面给个效果看看(当然这只是最简单的一个效果,其他复杂点的好看点的效果~~~~等待你去用咯):
下面贴出代码
<!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> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> <script src="http://www.elevateweb.co.uk/wp-content/themes/radial/jquery.elevatezoom.min.js" type="text/javascript"></script> </head> <body> <img style="border:1px solid #e8e8e6;" id="pic" src="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/small/image1.png" data-zoom-image="http://www.elevateweb.co.uk/wp-content/themes/radial/zoom/images/large/image1.jpg" width="411" /> <script> $('#pic').elevateZoom(); </script> </body> </html>