摘要:效果轮询改变背景图动画,让世界地图作为背景正向平移。效果二图片描述鼠标移动后背景图根据坐标差计算移动距离。
效果:
body{
margin: 0px; height:100%; width:100%; background-image: url("bg.png"); background-position-x: 0px; background-position-y: 0px; background-repeat: repeat; }
轮询改变body背景图动画,让世界地图作为背景正向平移。
var body = $("body"); var x =0; function polling() { x += 5; body.animate({ "background-position-x": x+"%", }, 400, "linear"); setTimeout(polling,300) } polling(); 效果二: ![图片描述][2] 鼠标移动后背景图根据坐标差计算移动距离。 var last = null; var body = $("body"); $(document).mousemove(function(event){ if(last == null){ last = { x: event.pageX, y: event.pageY }; return; }else{ offset = { x: event.pageX - last.x, y: event.pageY - last.y }; var top = parseInt(body.css("background-position-y"))-offset.y; var max = screen.availHeight - 1024; if(max >= 0) max = 0; if(top > 0) top = 0; if(top < max) top = max; body.css({ "background-position-x":(parseInt(body.css("background-position-x"))-offset.x)+"px", "background-position-y":top+"px" }); last.x = event.pageX; last.y = event.pageY; } });
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/55872.html
摘要:效果轮询改变背景图动画,让世界地图作为背景正向平移。效果二图片描述鼠标移动后背景图根据坐标差计算移动距离。 效果:showImg(https://segmentfault.com/img/bVG0hf?w=1331&h=665); body{ margin: 0px; height:100%; width:100%; ba...
摘要:效果轮询改变背景图动画,让世界地图作为背景正向平移。效果二图片描述鼠标移动后背景图根据坐标差计算移动距离。 效果:showImg(https://segmentfault.com/img/bVG0hf?w=1331&h=665); body{ margin: 0px; height:100%; width:100%; ba...
摘要:非常的庞大,而且它是完全为设计而生的动效库。它运行于纯粹的之上,是目前最强健的动画资源库之一。可能是创建滚动特效最好用的工具,它支持大量的浏览器,只要它们支持和特性。可以通过安装吊炸天了,接近现实生活中的物理运动碰撞惯性动画库。 收集日期为2019-02-28,★代表当时的该项目在github的star数量 Animate.css 56401 ★ 一个跨浏览器的动效基础库,是许多基础动...
摘要:高级特效之酷炫抢红包金币下落动画最近项目需求要求做一个抢红包特效。使用动画让页面跳转更炫酷中引入了很多炫酷的动画效果,便是其中一种。 Android自定义View:一个精致的打钩小动画 一个精致的打钩动画。 Android 自定义水平进度条圆角进度 项目中实现进度条进度过程中显示圆角样式 ViewPager系列之 仿魅族应用的广告BannerView 前言 Banner广告位是APP ...
阅读 3209·2021-10-13 09:39
阅读 1197·2021-10-08 10:05
阅读 2102·2021-09-26 09:56
阅读 2126·2021-09-03 10:28
阅读 2488·2019-08-29 18:37
阅读 1889·2019-08-29 17:07
阅读 474·2019-08-29 16:23
阅读 2024·2019-08-29 11:24