js放大镜效果

<script type="text/javascript">
window.onload = function(){
var Wrap = document.getElementById("wrap")
var img = document.getElementById("img")
var Wrap1 = document.getElementById("warp1")
//抓粉色的框
var Bor = document.getElementById("border")
//
var meng = document.getElementById("meng")

meng.onmousemove = function(e){
// 做兼容获取事件对象
var e = e || window.event;
//获取鼠标位置
var left = e.offsetX || e.layerX
var top = e.offsetY || e.layerY;
//判断红框的的宽度
if(left<=100){
left=100;
}
if(left>=300){
left=300;
}
if(top<=100){
top=100;
}
if(top>=300){
top=300;
}

//获取到那个红色块的位置-100的意思让鼠标到红色框的中间top和left各减一百
Bor.style.left = left-100+'px';
Bor.style.top = top-100+'px';
//把
img.style.left = -2*left+200+'px';
img.style.top = -2*top+200+'px';



}

}

</script>

//

<div id="wrap">
<img src="img/400.jpg" />
<div id="border">

</div>
<div id="meng">

</div>
</div>
<div id="warp1">
<img style="position: absolute;" src="img/800.jpg" id="img"/>
</div>

/css///

<style type="text/css">
*{
margin: 0;
padding: 0px;
}
#wrap{
width: 400px;
height: 400px;
position: relative;
border: 1px solid;
}
#warp1{
width: 400px;
height: 400px;
position: absolute;
border: 1px solid blue;
left: 450px;
top: 0px;
overflow: hidden;
}
#border{
width: 200px;
height: 200px;
background: pink;
position: absolute;
top: 0px;
left: 0px;
opacity: 0.5;
}
#meng{
width: 400px;
height: 400px;
position: absolute;
top: 0px;
left: 0px;
z-index: 9;
background: black;
opacity: 0.1;
}
</style>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值