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

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

思路：一张背景图，一张图片，产生重叠，通过鼠标的移动，让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>

效果如下：

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

JavaScript案例之使用验证码进行简单判断
JavaScript案例之使用验证码进行简单判断源代码: <!DOCTYPE html> <html><head><meta charset="u ...
javascript案例_如何在JavaScript中使用增强现实-一个案例研究
javascript案例 by Apurav Chauhan 通过Apurav Chauhan 如何在JavaScript中使用增强现实-一个案例研究 (How to use Augmented Re ...
盘点三个JavaScript案例——实现限时秒杀、定时跳转、改变盒子大小
前言今天来给大家盘点三个JavaScript案例,分别是实现限时秒杀.定时跳转.改变盒子大小案例,一起来看看吧! 一.实现限时秒杀案例 1.在淘宝网中,商家为了促销经常搞一些活动,例如限时秒杀是常见 ...
微信小程序小案例——简单数据增删改查模拟
微信小程序小案例--简单数据增删改查模拟应同学导师之邀,要做一个微信小程序,虽然没接触过,本着不会就学的态度就接了.这里就简单记录下制作过程,方便以后自己查找.(此处是粗糙版本,练习用的数据模拟)也 ...
如何仅使用HTML和JavaScript构建简单的URL缩短器
by Palash Bauri 由Palash Bauri 如何仅使用HTML和JavaScript构建简单的URL缩短器 (How to build a simple URL shortener w ...
JavaScript设计模式--简单工厂模式例子---XHR工厂
JavaScript设计模式--简单工厂模式例子---XHR工厂第一步,Ajax操作接口(目的是起一个接口检测作用) (1)引入接口文件 //定义一个静态方法来实现接口与实现类的直接检验 //静态方 ...
js实现html页面倒计30秒,javascript实现简单页面倒计时
这篇文章主要为大家详细介绍了javascript实现简单页面倒计时,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了javascript实现简单页面倒 ...
JavaScript如何简单而准确地判断复杂数据类型
javaScript如何简单而准确地判断复杂数据类型? 1:typeof 只能判断出基本数据类型例如: var a = 3; typeof a 的结果为 number var b = []; typ ...
javascript 代码_如何使您JavaScript代码简单易读
javascript 代码 by Arthur Arakelyan 通过亚瑟·阿拉克利安(Arthur Arakelyan) 如何使您JavaScript代码简单易读 (How to keep you ...
Javascript闭包简单理解
Javascript闭包简单理解原文:Javascript闭包简单理解提到闭包,想必大家都早有耳闻,下面说下我的简单理解. 说实话平时工作中实际手动写闭包的场景并不多,但是项目中用到的第三方框架和 ...

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

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

最新文章

热门文章