JS：放大镜效果

最新推荐文章于 2023-01-16 17:12:52 发布
最新推荐文章于 2023-01-16 17:12:52 发布
阅读量419 收藏
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u010200222/article/details/45622707
版权
实现效果：
JS：放大镜效果 - 鬼眼邪神 - 鬼眼邪神
所用图片：
JS：放大镜效果 - 鬼眼邪神 - 鬼眼邪神
代码：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>放大镜效果</title>
		<meta name="author" content="鬼眼邪神"/>
		<meta name="description" content="鬼眼邪神的博客，http://cyg7561.blog.163.com/"/>
		<style>
			* {
				margin:0;
				padding:0;
			}
			.magnify {
				float:left;
			}
			.left {
				float:left;
				position:relative;
				width:190px;
				height:240px;
				border:5px solid #000;
			}
			.left img {
				display:block;
				width:190px;
				height:240px;
			}
			.left div {
				position:absolute;
				top:0;
				left:0;
				display:none;
				width:100px;
				height:100px;
				background:rgb(0,200,200);
				cursor:move;
				opacity:0.4;
				filter:alpha(opacity=40);
			}
			.right {
				display:none;
				position:absolute;
				top:0;
				left:220px;
				width:300px;
				height:300px;
				border:1px solid #000;
				overflow:hidden;
			}
			.right img {
				display:block;
				width:570px;
				height:720px;
			}
		</style>
		<script>
			window.οnlοad=function(){
				var left=document.getElementById("left");
				var move=document.getElementById("move");
				var right=document.getElementById("right");
				
				left.οnmοusemοve=function(event){
					var event=window.event||event;
					//让滤镜和右边的大图进行显示
					move.style.display="block";
					right.style.display="block";
					//获取滤镜相对于父元素的坐标，并使鼠标在滤镜中始终居中显示
					var moveLeft=event.clientX-move.offsetWidth/2-left.offsetLeft-left.clientLeft;
					var moveTop=event.clientY-move.offsetHeight/2-left.offsetTop-left.clientTop;
					//获取滤镜的移动范围
					var moveRangeWidth=left.clientWidth-move.offsetWidth;
					var moveRangeHeight=left.clientHeight-move.offsetHeight;
					
					//判断临界值
					if (moveLeft<=0){
						moveLeft=0;
					}else if(moveLeft>=moveRangeWidth){
						moveLeft=moveRangeWidth;
					}

					if (moveTop<=0){
						moveTop=0;
					}else if (moveTop>=moveRangeHeight){
						moveTop=moveRangeHeight;
					}

					//让鼠标带着小块移动
					move.style.left=moveLeft+"px";
					move.style.top=moveTop+"px";
					//放大镜效果
					right.scrollLeft=moveLeft*3;
					right.scrollTop=moveTop*3;
				}
				left.οnmοuseοut=function(){
					right.style.display="none";
				}
			}
		</script>
	</head>

	<body>
		<div class="magnify">
			<div class="left" id="left">
				<img src="girl.jpg" alt="" id="leftImg"/>
				<div id="move">
					
				</div>
			</div>
			<div class="right" id="right">
				<img src="girl.jpg" alt="" id="rightImg"/>
			</div>
		</div>
	</body>
</html>
鬼眼邪神
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现放大镜效果代码示例
10-15
主要介绍了JavaScript实现放大镜效果代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
js放大镜放大图片效果
10-30
非常漂亮的js放大镜效果代码，对于浏览图片效果应该不错哦
JavaScript：京东放大镜效果
qq_54517101的博客
08-22 368
值得注意的是，最后 右边大盒子的移动距离采用的是比例的计算方法，即。= 阴影区移动距离*大图片最大移动距离/阴影区最大移动距离。small是阴影区 biggr是右边的放大区。
JS案例：放大镜效果
pe11223的博客
01-16 95
JS案例：放大镜
js实现放大镜效果
qq_65325072的博客
03-15 6225
思路： 先让mask块和bigImg块、big块隐藏，当鼠标经过pre_img就显示遮罩层mask和big块，获取鼠标当前的位置，根据“ 大图片移动距离 = 遮挡层移动距离*大图片最大移动距离 / 遮挡层最大移动距离 ”实现放大镜效果 大概思路实现图： html + css 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></t...
JS练习二：放大镜效果的实现
langyixuan的博客
05-11 227
简单放大镜效果的实现 鼠标放在小图上时，在小图上显示遮罩层和右边放大效果的图片，根据鼠标的移动，可查看想要放大的部位。 代码实现： HTML+CSS <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>放大镜效果</title> <style>
js仿京东放大镜效果
10-14
主要为大家详细介绍了js仿京东放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JavaScript实现放大镜效果
09-11
运用 JavaScript以及HTML5实现三种放大镜的效果，包括圆形放大镜效果，直接矩形放大镜效果以及仿淘宝或者京东商品展示放大镜效果。
JS实现放大镜效果
10-14
主要为大家详细介绍了JS实现放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS：document.documentElement对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
热门推荐
鬼眼邪神
05-10 2万+
document.documentElement.clientWidth 获取浏览器窗口文档显示区域的宽度，不包括滚动条。 document.documentElement.clientHeight 获取浏览器窗口文档显示区域的高度，不包括滚动条。 浏览器兼容性 所有浏览器解释都一样。 document.documentElement.offsetWidth 获取DOM文档的根节点html元素对象
JS：window对象的pageXOffset、innerWidth、outerWidth、screenLeft、screenX
鬼眼邪神
09-02 5550
window.pageXOffset 获取页面文档向右滚动过的像素数。 window.pageYOffset 获取页面文档向下滚动过的像素数。 浏览器兼容性 IE7、8不支持，可以使用document.documentELement.scrollLeft/scrollTop来代替。 window.innerWidth 设置或获取浏览器窗口文档显示区域的宽度，包括滚动条。 windo
JS：body元素对象的clientWidth、offsetWidth、scrollWidth、clientLeft、offsetLeft、scrollLeft
鬼眼邪神
05-10 2639
document.body.clientWidth 获取body元素对象的内容可视区域的宽度，即clientWidth=width+padding，不包括滚动条。 document.body.clientHeight 获取body元素对象的内容可视区域的高度，即clientHeight=height+padding，不包括滚动条。 浏览器兼容性 在IE7中，如果给body设置滚动条的话，滚动条是出
JS中的转义字符
鬼眼邪神
05-10 1957
对于某些特殊的字符，无法用键盘直接键入，这时就需要使用转义字符。 还有一些字符用于特殊的用途，比如引号，如果要在字符串内包含引号，就需要使用转义字符。 每一个转义字符都是以反斜杠“\”开始的。
JS转换数值函数Number()、parseInt()、parseFloat()
鬼眼邪神
08-24 1932
JS中有三种函数可以将非数值转换成数值：Number()、parseInt()和parseFloat()。第一个函数，即转型函数Number()可以用于任何数据类型，而另外两个函数则专门用于把字符串转换成数值。这3个函数对于同样的输入会返回不同的结果。 Number() Number()函数的转换规则如下： 如果参数是Date对象，返回从1970年1月1日至今的毫秒数。如果是Boolea
JS：clientX/Y、screenX/Y、pageX/Y、offsetX/Y、layerX/Y、x/y
鬼眼邪神
05-10 1432
Event对象 Event对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。 Event对象只在事件发生的过程中才有效。 浏览器兼容性 FF：没有window.event对象。可以通过给函数的参数传递event对象。
JS：传值与传址
鬼眼邪神
05-10 1338
1. 传值变量 简单数据类型是按照传值进行传递的（有关数据类型请参见JS中的数据类型），当按照传值进行传递时，计算机就会在内存中开辟一块空间将值复制到里面。这样即使改变原变量的值也不会影响新的变量，反过来也一样。两者是独立的。
JS：连续赋值运算
鬼眼邪神
05-10 970
首先来看一段代码： 1 2 3 var o = {a:1}; o.b = o = {a:2}; alert(o.b); // undefined 以上第二句 o.b = o = {a:2} 是一个连续赋值表达式。那么在这个过程中究竟发生了什么呢？ 在ECMAS
JS逻辑运算符
鬼眼邪神
08-25 845
逻辑NOT运算符（！） 与逻辑OR和逻辑AND运算符不同的是，逻辑NOT运算符返回的一定是Boolean值。它会先将运算数转换成一个Boolean值，然后再对其进行求反。 逻辑NOT运算符在运算时遵循以下规则： 如果运算数是对象，返回false。如果运算数是数字0，返回 true。如果运算数是0以外的任何数字，返回false。如果运算数是空字符串，返回true。如果运算数是非空字符串，返
threejs 放大镜效果
最新发布
05-23
three.js 中实现放大镜效果可以通过以下步骤： 1. 创建一个渲染器和场景。 2. 创建一个透视相机并设置其位置和朝向。 3. 加载模型并添加到场景中。 4. 创建一个平面几何体并将其作为放大镜的视图。 5. 将放大镜视图添加到场景中。 6. 创建一个 RenderTarget，并将其绑定到放大镜视图上。 7. 创建一个材质并将 RenderTarget 作为其贴图。 8. 创建一个圆形几何体并将其用作放大镜的外观。 9. 将材质应用于圆形几何体。 10. 将放大镜外观添加到场景中。 11. 创建一个鼠标事件监听器。 12. 在鼠标移动事件中更新放大镜视图的位置和渲染。 以下是示例代码： ```javascript //1.创建渲染器和场景 const renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); const scene = new THREE.Scene(); //2.创建透视相机 const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000); camera.position.set(0, 0, 50); scene.add(camera); //3.加载模型 const loader = new THREE.GLTFLoader(); loader.load('model.gltf', function(gltf) { scene.add(gltf.scene); }); //4.创建平面几何体 const viewGeometry = new THREE.PlaneGeometry(10, 10); const viewMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); const viewMesh = new THREE.Mesh(viewGeometry, viewMaterial); viewMesh.position.set(20, 20, 0); scene.add(viewMesh); //5.将放大镜视图添加到场景中 const viewScene = new THREE.Scene(); viewScene.add(camera); //6.创建RenderTarget const renderTarget = new THREE.WebGLRenderTarget(256, 256); renderTarget.texture.magFilter = THREE.LinearFilter; renderTarget.texture.minFilter = THREE.LinearFilter; //7.创建材质 const material = new THREE.MeshBasicMaterial({ map: renderTarget.texture }); //8.创建圆形几何体 const radius = 5; const segments = 32; const circleGeometry = new THREE.CircleGeometry(radius, segments); const circleMaterial = new THREE.MeshBasicMaterial({ color: 0xffffff }); const circleMesh = new THREE.Mesh(circleGeometry, material); circleMesh.position.set(-20, -20, 0); scene.add(circleMesh); //9.将材质应用于圆形几何体 circleMesh.material = material; //10.将放大镜外观添加到场景中 scene.add(circleMesh); //11.创建鼠标事件监听器 const raycaster = new THREE.Raycaster(); const mouse = new THREE.Vector2(); function onMouseMove(event) { event.preventDefault(); //将鼠标位置转换为three.js坐标 mouse.x = (event.clientX / window.innerWidth) * 2 - 1; mouse.y = -(event.clientY / window.innerHeight) * 2 + 1; //更新放大镜视图的位置 raycaster.setFromCamera(mouse, camera); const intersects = raycaster.intersectObjects(scene.children); if (intersects.length > 0) { viewMesh.position.copy(intersects[0].point); viewMesh.lookAt(camera.position); } } window.addEventListener('mousemove', onMouseMove, false); //12.渲染场景 function render() { renderer.setRenderTarget(renderTarget); renderer.render(viewScene, camera); renderer.setRenderTarget(null); renderer.render(scene, camera); requestAnimationFrame(render); } render(); ``` 这段代码中的 `model.gltf` 是指需要加载的模型文件，你需要将其替换为你自己的模型文件路径。同时，你也可以根据自己的需要调整放大镜的大小、位置和样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值