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

浅浅的花香味﹌ 2021-09-14 06:10 279阅读 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 条评论，279人围观）

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

相关阅读

相关相对论效应

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

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

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

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

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

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

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

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

相关 JavaScript-&& ||的案例使用

JavaScript\-&& ||的案例使用用到的知识点： 1.&&，前面条件成立的话，继续往后面执行。否则，就不继续往后执行了。 2.||，前面条件不成立的话，

- 日理万妓/ 2022年06月11日 04:59/ 0 赞/ 193 阅读

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

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

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

相关 JavaScript.案例

window弹窗案例 \-实现过程 1、创建一个页面 \\ 有两个输入项和一个按钮 \\ 按钮上面有一个事件：弹出一个新窗口 open 2、创建弹出页面

分手后的思念是犯贱/ 2022年06月04日 05:10/ 0 赞/ 259 阅读

相关雪崩效应

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

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

相关雪崩效应

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

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

相关网络的瓶颈效应

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

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

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

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

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