javascript案例---简单的视觉效应

浅浅的花香味﹌ 2021-09-14 06:10 287阅读 0赞

大家好，现在给大家展示一个视觉效应的案例；

思路：一张背景图，一张图片，产生重叠，通过鼠标的移动，让2张图片的跟随移动

代码如下：

<!DOCTYPE html> <html> <head> <meta charset="{CHARSET}"> <title></title> <style> *{margin:0;padding:0;} ul,ol,li{list-style:none;} .vision{width:750px;height:200px;position:relative;overflow:hidden;left: 100px;} .vision li{width:850px;height:200px;position:absolute;top:0;left:-50px;} .zz{width:750px;height:200px;position:absolute;top:0;left:0;border: 1px solid red;} </style> </head> <body> <ul class="vision"> <li><img src="1.png" alt="" /></li> <li><img src="2.png" alt="" /></li> <div class="zz"></div> </ul> <script> var odiv = document.getElementsByClassName("vision")[0]; var oli = odiv.getElementsByTagName("li"); var ozz = odiv.getElementsByClassName("zz")[0]; ozz.onmouseover = function(){ ozz.onmousemove = function(evt){ evt = evt || window.event; var a = 50 * evt.offsetX / ozz.offsetWidth; var b = 2 * a; oli[0].style.left = a - 75 + "px"; oli[1].style.left = b - 100 + "px"; } ozz.onmouseout = function(){ ozz.onmousemove = null; } } </script> </body> </html>

![Center][]![Center 1][]

效果如下：![Center 2][]

[Center]: https://img-blog.csdn.net/20170922162058711?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzk5ODU1MTE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center
[Center 1]: /images/20210813/1c7ddd8fb8a24bfaa42cd11bba560890.png
[Center 2]: /images/20210813/38eb22a0665b4d46b96a34ebc674e093.png

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关相对论效应

任何理论都不是终极理论。相对论也不例外，它肯定会被发展，就像牛顿力学一样。要发展或推倒相对论，必须找准相对论的软肋。否则，很难成功。看到网站上批评、质疑相对论的人很多，但似乎都

痛定思痛。/ 2023年10月15日 11:18/ 0 赞/ 65 阅读

相关【计算机视觉】计算机视觉的简单入门代码介绍（含源代码）

文章目录一、介绍二、项目代码 2.1 导入三方包 2.2 读取和展示图片 2.3 在图像上绘画 2.

我会带着你远行/ 2023年10月12日 18:56/ 0 赞/ 62 阅读

相关机器视觉-简单入门小例子

读入图像 read_image (Image, 'fabrik') 获取图像大小 get_image_size (Image, Width, H

墨蓝/ 2022年12月28日 04:23/ 0 赞/ 178 阅读

相关融云PC端javascript即时通讯简单案例

进入页面引入：二选一 <script src="http://cdn.ronghub.com/RongIMLib-2.1.3.min.js"></script> <sc

朴灿烈づ我的快乐病毒、/ 2022年09月22日 11:46/ 0 赞/ 228 阅读

相关狼群效应-霍桑效应-磨合效应

狼群效应-所谓狼群效应是指，为了达到某种目标和愿景而组合起来的具有明确分工、默契合作、组织性强、协同作战、反应机敏、巧用策略、极富耐心、不惧失败、不达目的绝不放弃的优秀团队精神

客官°小女子只卖身不卖艺/ 2022年07月12日 11:07/ 0 赞/ 996 阅读

相关 R语言︱线性混合模型理论与案例探究（固定效应&随机效应）

http://blog.csdn.net/sinat\_26917383/article/details/51636011 线性混合模型与普通的线性模型不同的地方是除了有固定

约定不等于承诺〃/ 2022年06月05日 08:28/ 0 赞/ 467 阅读

相关雪崩效应

![70][] 如果在A的链路上某个或几个被调用的子服务不可用或延迟较高，则会导致调用A服务的请求被堵住。堵住的请求会消耗占用掉系统的线程、io等资源，当该类请求越来越

梦里梦外;/ 2022年05月22日 07:48/ 0 赞/ 232 阅读

相关雪崩效应

全文转自：https://blog.csdn.net/hash\_Delhi/article/details/82690757?utm\_source=copy 雪崩效应

柔情只为你懂/ 2022年05月09日 06:18/ 0 赞/ 267 阅读

相关网络的瓶颈效应

目录一、网络的瓶颈效应一、网络的瓶颈效应上一节，我们讲到机器语言、汇编语言和高级语言，毫无疑问，机器语言和汇编语言我们可以放弃学习，谁想学让谁学去吧！我们

浅浅的花香味﹌/ 2021年11月23日 23:42/ 0 赞/ 300 阅读

相关 javascript案例---简单的视觉效应

大家好，现在给大家展示一个视觉效应的案例；思路：一张背景图，一张图片，产生重叠，通过鼠标的移动，让2张图片的跟随移动代码如下： <!DOCTYPE html>

浅浅的花香味﹌/ 2021年09月14日 06:10/ 0 赞/ 288 阅读