利用javaScript+css实现图片跟随鼠标联动效果页面
以前做小型的项目的时候总想着可以做一个很炫酷的主页面来,以前做过一个汽车销售管理系统的主页面,觉得很不错。虽然写这个的人不是我,但是我们觉得可以保存下来以便日后使用和参考。先看一下效果图!这个是可以跟随鼠标动作移动的。
纯手工的css样式结构!
<style type="text/css">html {overflow: hidden;}body {position: absolute;margin: 0px;padding: 0px;background: #EDF3FF;width: 100%;height: 100%;}#screen {position: absolute;left: 10%;top: 10%;width: 80%;height: 80%;background: #EDF3FF;}#screen img {position: absolute;cursor: pointer;visibility: hidden;width: 0px;height: 0px;}#screen .tvover {border: solid #876;opacity: 1;filter: alpha(opacity=100);}#screen .tvout {border: solid #fff;opacity: 0.7;}#bankImages {display: none;}
</style>
然后是JavaScript也是核心的部分。
<script type="text/javascript">
var Library = {};
Library.ease = function () {this.target = 0;this.position = 0;this.move = function (target, speed){this.position += (target - this.position) * speed;}
}var tv = {/* ==== variables ==== */O : [],screen : {},grid : {size : 4, // 4x4 gridborderSize : 6, // borders sizezoomed : false},angle : {x : new Library.ease(),y : new Library.ease()},camera : {x : new Library.ease(),y : new Library.ease(),zoom : new Library.ease(),focalLength : 750 // camera Focal Length},/* ==== init script ==== */init : function (){this.screen.obj = document.getElementById('screen');var img = document.getElementById('bankImages').getElementsByTagName('img');this.screen.obj.onselectstart = function () { return false; }this.screen.obj.ondrag = function () { return false; }/* ==== create images grid ==== */var ni = 0;var n = (tv.grid.size / 2) - .5;for (var y = -n; y <= n; y++){for (var x = -n; x <= n; x++){/* ==== create HTML image element ==== */var o = document.createElement('img');var i = img[(ni++) % img.length];o.className = 'tvout';o.src = i.src;tv.screen.obj.appendChild(o);/* ==== 3D coordinates ==== */o.point3D = {x : x,y : y,z : new Library.ease()};/* ==== push object ==== */o.point2D = {};o.ratioImage = 1;tv.O.push(o);/* ==== on mouse over event ==== */o.onmouseover = function (){if (!tv.grid.zoomed){if (tv.o){/* ==== mouse out ==== */tv.o.point3D.z.target = 0;tv.o.className = 'tvout';}/* ==== mouse over ==== */this.className = 'tvover';this.point3D.z.target = -.5;tv.o = this;}}/* ==== on click event ==== */o.onclick = function (){if (!tv.grid.zoomed){/* ==== zoom in ==== */tv.camera.x.target = this.point3D.x;tv.camera.y.target = this.point3D.y;tv.camera.zoom.target = tv.screen.w * 1.25;tv.grid.zoomed = this;} else {if (this == tv.grid.zoomed){/* ==== zoom out ==== */tv.camera.x.target = 0;tv.camera.y.target = 0;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);tv.grid.zoomed = false;}}}/* ==== 3D transform function ==== */o.calc = function (){/* ==== ease mouseover ==== */this.point3D.z.move(this.point3D.z.target, .5);/* ==== assign 3D coords ==== */var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;var z = this.point3D.z.position * tv.camera.zoom.position;/* ==== perform rotations ==== */var xy = tv.angle.cx * y - tv.angle.sx * z;var xz = tv.angle.sx * y + tv.angle.cx * z;var yz = tv.angle.cy * xz - tv.angle.sy * x;var yx = tv.angle.sy * xz + tv.angle.cy * x;/* ==== 2D transformation ==== */this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);this.point2D.x = yx * this.point2D.scale;this.point2D.y = xy * this.point2D.scale;this.point2D.w = Math.round(Math.max(0,this.point2D.scale * tv.camera.zoom.position * .8));/* ==== image size ratio ==== */if (this.ratioImage > 1)this.point2D.h = Math.round(this.point2D.w / this.ratioImage);else{this.point2D.h = this.point2D.w;this.point2D.w = Math.round(this.point2D.h * this.ratioImage);}}/* ==== rendering ==== */o.draw = function (){if (this.complete){/* ==== paranoid image load ==== */if (!this.loaded){if (!this.img){/* ==== create internal image ==== */this.img = new Image();this.img.src = this.src;}if (this.img.complete){/* ==== get width / height ratio ==== */this.style.visibility = 'visible';this.ratioImage = this.img.width / this.img.height;this.loaded = true;this.img = false;}}/* ==== HTML rendering ==== */this.style.left = Math.round(this.point2D.x * this.point2D.scale +tv.screen.w - this.point2D.w * .5) + 'px';this.style.top = Math.round(this.point2D.y * this.point2D.scale +tv.screen.h - this.point2D.h * .5) + 'px';this.style.width = this.point2D.w + 'px';this.style.height = this.point2D.h + 'px';this.style.borderWidth = Math.round(Math.max(this.point2D.w,this.point2D.h) * tv.grid.borderSize * .01) + 'px';this.style.zIndex = Math.floor(this.point2D.scale * 100);}}}}/* ==== start script ==== */tv.resize();mouse.y = tv.screen.y + tv.screen.h;mouse.x = tv.screen.x + tv.screen.w;tv.run();},/* ==== resize window ==== */resize : function (){var o = tv.screen.obj;tv.screen.w = o.offsetWidth / 2;tv.screen.h = o.offsetHeight / 2;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent){tv.screen.x += o.offsetLeft;tv.screen.y += o.offsetTop;}},/* ==== main loop ==== */run : function (){/* ==== motion ease ==== */tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);tv.camera.y.move(tv.camera.y.target, tv.grid.zoomed ? .25 : .025);tv.camera.zoom.move(tv.camera.zoom.target, .05);/* ==== angles sin and cos ==== */tv.angle.cx = Math.cos(tv.angle.x.position);tv.angle.sx = Math.sin(tv.angle.x.position);tv.angle.cy = Math.cos(tv.angle.y.position);tv.angle.sy = Math.sin(tv.angle.y.position);/* ==== loop through all images ==== */for (var i = 0, o; o = tv.O[i]; i++){o.calc();o.draw();}/* ==== loop ==== */setTimeout(tv.run, 32);}
}/* ==== global mouse position ==== */
var mouse = {x : 0,y : 0
}
document.onmousemove = function(e)
{if (window.event) e = window.event;mouse.x = e.clientX;mouse.y = e.clientY;return false;
}</script>
页面的二结构就比较简单了。而图片也可以选择自己喜欢的图片。
<body><div id="screen"></div><div id="bankImages"><img src="data:images/carP/1.jpg" /><img src="data:images/carP/2.jpg" /><img src="data:images/carP/3.jpg" /><img src="data:images/carP/4.jpg" /><img src="data:images/carP/5.jpg" /><img src="data:images/carP/6.jpg" /><img src="data:images/carP/7.jpg" /><img src="data:images/carP/8.jpg" /><img src="data:images/carP/9.jpg" /><img src="data:images/carP/10.jpg" /><img src="data:images/carP/11.jpg" /><img src="data:images/carP/12.jpg" /><img src="data:images/carP/13.jpg" /><img src="data:images/carP/14.jpg" /><img src="data:images/carP/15.jpg" /><img src="data:images/carP/16.jpg" />
</div><script type="text/javascript">/* ==== start script ==== */onresize = tv.resize;tv.init();
</script></body>
利用javaScript+css实现图片跟随鼠标联动效果页面相关推荐
- 图片跟随鼠标移动效果的抖动问题
场景 图片跟随鼠标移动效果的实现思路: 触发mousemove事件响应时,通过e.offsetX,e.offsetY获取到当前鼠标的位置.再修改图片的css样式中的top, left属性(图片采用绝对 ...
- JavaScript实现一串div跟随鼠标移动效果(幻影效果)
JavaScript实现一串div跟随鼠标移动效果 上一篇博文我们说到了利用JavaScript实现div块跟随鼠标移动的效果.现在来讲一个进阶版,实现一串div跟随鼠标移动效果,鼠标幻影效果.如图: ...
- html浮动跟随鼠标,jQuery 图片跟随鼠标浮动
不知你有没注意到我的网站首页,上面浮动着一层雪花的背景,并且随着鼠标的移动也在移动着. 本文主要讲述了如何判断鼠标的位置,从而实现图片跟随鼠标进行浮动.为了方便查看和理解,在Demo的左下角把各个参数 ...
- 实现图片跟随鼠标移动
下面代码可以实现图片跟随鼠标移动 <html> <head><meta charset="utf-8"><title></ti ...
- 图片跟随鼠标移动并放大js特效
js实现图片放大,并跟随鼠标移动 图片跟随鼠标移动并放大js特效 很多网站有类似于淘宝放大镜的效果,只不过这里说的是 " 不仅能直接放大,而且会跟随鼠标移动 " ! 类似于&quo ...
- 图片跟随鼠标移动案例
文献种类:专题技术总结文献 开发工具与关键技术: DW前端技术 作者:彭学员 :年级:2004 :撰写时间:2021 年 5 月 17日 文献编号: ...
- 利用伪元素给图片在鼠标悬停时添加背景图片
利用伪元素给图片在鼠标悬停的时候添加背景图片,这种效果在电影网站上使用的比较频繁,主要是鼠标悬停的时候显示出播放的图标,点击图片链接后就会进入视频详情页面,而使用伪元素是为了使我们的html代码更加简 ...
- 终于解决!图片随鼠标移动在FireFox下实现,另附一个好玩的图片随鼠标伸缩效果
不用left/top处理(用padding代替): <html> <head> <script type="text/javascript"> ...
- JavaScript+css实现的喜庆活动邀请函多页面html源码
大家好,今天给大家介绍一款,JavaScript+css实现的喜庆活动邀请函多页面html源码(图1).送给大家哦,获取方式在本文末尾. 图1 模板制作精良美观,主题非常喜庆,慢慢向下滑动,可以看到, ...
最新文章
- 灯三段调光原理_球泡灯中国能效标识怎么做,GB30255中国能效报告办理要求
- java中抽象类的匿名子类和匿名对象
- 容器生态系统 - 每天5分钟玩转容器技术(2)
- wifi网络结构(下)
- HBase应用笔记:通过Java Api与HBase交互(转自 Taobao QA Team)
- 【Android笔记】如何创建列表视图3
- get,post请求的编码统一
- python中with是什么意思_python中with的用法
- Unity3d读取.csv文件
- STL之Deque容器
- SAP License:第三只眼看经济-固定资产最佳折旧率的条件
- 铁子们,2019博客之星投票活动开始了!帮我投个票呗
- 图解RGB565、RGB555、RGB16、RGB24、RGB32、ARGB32等格式的区别
- docker 部署zookeeper脚本错误(services.zoo.environment.0 must be a string)
- UART(Universal Asynchronous Receiver/Transmitter)
- c语言水仙花数作业,c语言水仙花数(c语言水仙花数的编程)
- 大学四年的学习规划目标
- hellow word
- dostyle 东格TJ3401 显示器 固件升级
- 婚礼这天你是公主,你的婚礼你做主
热门文章
- 《手把手教你》系列练习篇之9-python+ selenium自动化测试 -番外篇 - 最后一波啊!!!(详细教程)
- thzbt.co forum.php,无线城市掌上公交
- Lison《vue技术栈开发实战》(四)
- 磁环在电磁兼容中的应用
- VMware虚拟机安装macos Ventura 13.0(22A380)教程镜像CDR/ISO下载
- imagemin 在各个平台报错运行报错时替代方案
- 双约束重力模型python实现,以物流需求预测为例
- 2021年低压电工考试题库及低压电工考试资料
- 微信文件只读模式怎么解除,一步解决新版微信接收文件为只读属性的问题,附带多开和消息防撤回功能
- 单周期31条指令CPU设计---bug总结