CSS3 html5+jQuery图片放大镜效果

2024-09-05 12:18:55

字体：大中小

来源：转载

供稿：网友

CSS3 html5+jQuery图像放大镜效果，请使用CHROME或火狐浏览器，IE9以下版本不支持本效果，如果是IE8，则会看不到圆形镜头，但可以正常放大图片，一种有多种放大显示和调用方式，希望对您有所帮助。

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS3 html5+jQuery图像放大镜效果</title><script src="/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='http://www.aspku.com"%20+%20imageSrc%20+%20"'%20/>";%20%20%20%20%20%20var%20widthRatio%20=%200;%20%20%20%20%20%20var%20heightRatio%20=%200;%20%20%20%20%20%20$(imageTag).load(function()%20{%20%20%20%20%20%20%20%20widthRatio%20=%20$(this).width()%20/%20obj.width();%20%20%20%20%20%20%20%20heightRatio%20=%20$(this).height()%20/%20obj.height();}).appendTo($(this).parent());%20%20%20%20%20target.css({%20%20%20%20%20%20%20%20backgroundImage:%20"url('"%20+%20imageSrc%20+%20"')"%20%20%20%20%20%20});%20%20%20%20%20%20target.mousemove(setPosition);%20%20%20%20%20%20$(this).mousemove(setPosition);%20%20%20%20%20%20function%20setPosition(e)%20{%20%20%20%20%20%20%20%20var%20leftPos%20=%20parseInt(e.pageX%20-%20offset.left);%20%20%20%20%20%20%20%20var%20topPos%20=%20parseInt(e.pageY%20-%20offset.top);%20%20%20%20%20%20%20%20if%20(leftPos%20<%200%20||%20topPos%20<%200%20||%20leftPos%20>%20obj.width()%20||%20topPos%20>%20obj.height())%20{%20%20%20%20%20%20%20%20%20%20target.hide();%20%20%20%20%20%20%20%20}%20else%20{%20%20%20%20%20%20%20%20%20%20target.show();%20%20%20%20%20%20%20%20%20%20leftPos%20=%20String(((e.pageX%20-%20offset.left)%20*%20widthRatio%20-%20target.width()%20/%202)%20*%20(%20-%201));%20%20%20%20%20%20%20%20%20%20topPos%20=%20String(((e.pageY%20-%20offset.top)%20*%20heightRatio%20-%20target.height()%20/%202)%20*%20(%20-%201));%20%20%20%20%20%20%20%20%20%20target.css({%20%20%20%20%20%20%20%20%20%20%20%20backgroundPosition:%20leftPos%20+%20'px%20'%20+%20topPos%20+%20'px'%20%20%20%20%20%20%20%20%20%20});%20%20%20%20%20%20%20%20%20%20leftPos%20=%20String(e.pageX%20-%20target.width()%20/%202);%20%20%20%20%20%20%20%20%20%20topPos%20=%20String(e.pageY%20-%20target.height()%20/%202);%20%20%20%20%20%20%20%20%20%20target.css({%20%20%20%20%20%20%20%20%20%20%20%20left:%20leftPos%20+%20'px',%20%20%20%20%20%20%20%20%20%20%20%20top:%20topPos%20+%20'px'%20%20%20%20%20%20%20%20%20%20});%20%20%20%20%20%20%20%20}%20%20%20%20%20%20}%20%20%20%20});%20%20};})(jQuery);$(function%20()%20{	$("#img_01").imageLens();	$("#img_02").imageLens({%20lensSize:%20200%20});	$("#img_03").imageLens({%20imageSrc:%20"/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.aspku.com/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.aspku.com/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设计出花朵图案的网站Logo标志

下一篇：HTML5 Canvas原子球粒子运动效果