CSS3 html5+jQuery图像放大镜效果

时间：2013-10-16 15:43 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS3 html5+jQuery图像放大镜效果</title>
<script src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
(function($) {
$.fn.imageLens = function(options) {
    var defaults = {
      lensSize: 100,
      borderSize: 4,
      borderColor: "#888"
};
    var options = $.extend(defaults, options);
    var lensStyle = "background-position: 0px 0px;width: " + String(options.lensSize) + "px;height: " + String(options.lensSize) + "px;float: left;display: none;border-radius: " + String(options.lensSize / 2 + options.borderSize) + "px;border: " + String(options.borderSize) + "px solid " + options.borderColor + ";background-repeat: no-repeat;position: absolute;";
    return this.each(function() {
      obj = $(this);
      var offset = $(this).offset();
      var target = $("<div style='" + lensStyle + "' class='" + options.lensCss + "'> </div>").appendTo($(this).parent());
      var targetSize = target.size();
      var imageSrc = options.imageSrc ? options.imageSrc: $(this).attr("src");
      var imageTag = "<img style='display:none;' src='" + imageSrc + "' />";
      var widthRatio = 0;
      var heightRatio = 0;
      $(imageTag).load(function() {
        widthRatio = $(this).width() / obj.width();
        heightRatio = $(this).height() / obj.height();
}).appendTo($(this).parent());
     target.css({
        backgroundImage: "url('" + imageSrc + "')"
      });
      target.mousemove(setPosition);
      $(this).mousemove(setPosition);
      function setPosition(e) {
        var leftPos = parseInt(e.pageX - offset.left);
        var topPos = parseInt(e.pageY - offset.top);
        if (leftPos < 0 || topPos < 0 || leftPos > obj.width() || topPos > obj.height()) {
          target.hide();
        } else {
          target.show();
          leftPos = String(((e.pageX - offset.left) * widthRatio - target.width() / 2) * ( - 1));
          topPos = String(((e.pageY - offset.top) * heightRatio - target.height() / 2) * ( - 1));
          target.css({
            backgroundPosition: leftPos + 'px ' + topPos + 'px'
          });
          leftPos = String(e.pageX - target.width() / 2);
          topPos = String(e.pageY - target.height() / 2);
          target.css({
            left: leftPos + 'px',
            top: topPos + 'px'
          });
        }
      }
    });
  };
})(jQuery);

$(function () {
	$("#img_01").imageLens();
	$("#img_02").imageLens({ lensSize: 200 });
	$("#img_03").imageLens({ imageSrc: "http://www.codefans.net/jscss/demoimg/201310/sample01.jpg" });
	$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
});	
</script>
<style type="text/css">
body { margin: 0px; font-family: "Trebuchet MS", Arial, Sans-Serif; font-size: 14px; }
a { color: #0066CC; text-decoration: none; }
a:hover { color: #CC0000; text-decoration: underline; }
</style>
</head>
<body style="margin-left: 25px;">
<table>
<tr>
<td>
	<p><i>Note -如果是IE8，则会看不到圆形镜头</i></p>
	<h3>Demo 1 - Default lens</h3>
	<p><img id="img_01" src="http://www.codefans.net/jscss/demoimg/201310/sample01.jpg" width="384" height="240" /></p>
	<pre>$("#img_01").imageLens();</pre>
	<p> </p><h3>Demo 2 - Custom lens size</h3><p>
	<img id="img_02" src="http://www.codefans.net/jscss/demoimg/201310/sample01.jpg" width="384" height="240" /></p>
	<pre>$("#img_02").imageLens({ lensSize: 200 });</pre></td>
   <td valign="top" style="text-align: right;"> 
   </td>
</tr>
</table>
</body>
</html>

CSS3 html5+jQuery图像放大镜效果

网页特效