CSS3实现穿墙广告效果
㈠分享一组很有趣的代码：
具体如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>穿墙广告</title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
ul{
overflow:hidden;
width:630px;
margin:100px auto;
}
ul li{
float:left;
position:relative;
width:200px;
height:200px;
background:#ccc;
margin:5px;
overflow:hidden;
}
ul li span{
position:absolute;
width:100%;
height:100%;
background:rgba(255,0,0,0.3);
left:-200px;
top:0;
}
</style>
<script>
function getStyle(obj,sName){
return (obj.currentStyle||getComputedStyle(obj,false))[sName];
}
function move(obj,json,options){
options = options||{};
options.duration = options.duration||700;
options.easing = options.easing||'ease-out';
var start = {};
var dis = {};
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name]-start[name];
}
var count = Math.floor(options.duration/30);
var n = 0;
clearInterval(obj.timer);
obj.timer = setInterval(function(){
n++;
for(var name in json){
switch(options.easing){
case 'linear':
var cur = start[name]+dis[name]*n/count;
break;
case 'ease-in':
var a = n/count;
var cur = start[name]+dis[name]*Math.pow(a,3);
break;
case 'ease-out':
var a = 1-n/count;
var cur = start[name]+dis[name]*(1-Math.pow(a,3));
break;
}
if(name=='opacity'){
obj.style.opacity = cur;
obj.style.filter = 'alpha(opacity:'+cur*100+')';
}else{
obj.style[name] = cur+'px';
}
}
if(n==count){
clearInterval(obj.timer);
options.complete&&options.complete();
}
},30);
}
function a2d(n){
return n*180/Math.PI;
}
function hoverDir(ev,obj){
var a = ev.clientX-obj.offsetLeft-obj.offsetWidth/2;
var b = obj.offsetTop+obj.offsetHeight/2-ev.clientY;
return Math.round((a2d(Math.atan2(b,a))+180)/90)%4;
}
function through(obj){
var oS = obj.children[0];
obj.onmouseenter = function(ev){
var oEvent = ev||event;
var dir = hoverDir(oEvent,obj);
switch(dir){
case 0:
//左
oS.style.left = '-200px';
oS.style.top = 0;
break;
case 1:
//下
oS.style.left = 0;
oS.style.top = '200px';
break;
case 2:
//右
oS.style.left = '200px';
oS.style.top = 0;
break;
case 3:
//上
oS.style.left = 0;
oS.style.top = '-200px';
break;
}
move(oS,{left:0,top:0});
};
obj.onmouseleave = function(ev){
var oEvent = ev||event;
var dir = hoverDir(oEvent,obj);
switch(dir){
case 0:
move(oS,{left:-200,top:0});
break;
case 1:
move(oS,{left:0,top:200});
break;
case 2:
move(oS,{left:200,top:0});
break;
case 3:
move(oS,{left:0,top:-200});
break;
}
};
}
window.onload = function(){
var aLi = document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
through(aLi[i]);
}
};
</script>
</head>
<body>
<ul>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
<li><span></span></li>
</ul>
</body>
</html>
㈡部分效果图如下：
第一幅：
第二幅：
第三幅：
第四幅：
第五幅：
还有更多的效果，那就去敲敲代码，仔细去看相关的效果了。
来源：https://www.php.cn/css-tutorial-381739.html
CSS3实现穿墙广告效果的更多相关文章
- css3图片模糊过滤效果
css3图片过滤效果,鼠标放上后其它图片模糊,鼠标所在位置的图片是清淅的,有效索引出当前的图片,对图片的模糊处理是本特效的亮点,你完全可以将模糊的效果应用于其它的图片特效中,你同样也可借此代码研究一下 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- 24个 HTML5 & CSS3 下拉菜单效果及制作教程
下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...
- 学习使用 jQuery & CSS3 制作照片堆栈效果
在这个小实验中,我们使用 jQuery & CSS3 创建了一个交互式的照片堆栈效果.提供了一些模拟现实的互动的可能性给用户.这个想法的思路是:有一些照片在桌面上可以拖放一样,堆放和删除,每个 ...
- 3D Grid Effect – 使用 CSS3 制作网格动画效果
今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...
- JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- css3.0新属性效果在ie下的解决方案(兼容性)
css3.0增加的新属性,如投影.渐变.旋转.圆角等等!这些新标准属性在ie6.ie7.ie8浏览器版本里得不到很好的支持,相信ie以后的新版本也会支持这些新属性的.目前ie6.ie7.ie8浏览器不 ...
- 25个CSS3 渐变和动画效果教程
随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...
- CSS3实现时间轴效果
原文:CSS3实现时间轴效果 最近打开电脑就能看到极客学院什么新用户vip免费一个月,就进去看看咯,这里就不说它的课程怎么滴了,里面实战路径图页面看到了这个效果: 有点像时间轴的赶脚,而且每一块鼠标悬 ...
随机推荐
- oracle在group by时某列有多个值的拼接
最近编码过程中出现了group by后,某些列会有多个值,而我需要把这些多个值的列进行拼接的情况,和大家分享一下. 有如下表student: 我们希望以class分组,每组的信息平铺,效果如下 分组首 ...
- <<大道至简>>伪代码
import.java.大道至简.* public class YuGong { public static void main(String [] args) throws IOException ...
- 设计模式:状态模式(Status)
在介绍状态模式之前,我们先来看这样一个实例:你公司力排万难终于获得某个酒店的系统开发项目,并且最终落到了你的头上.下图是他们系统的主要工作(够简单). 当你第一眼看到这个系统的时候你就看出来了这是一个 ...
- Centos7 更换为网易YUM源
当我们刚刚安装系统的时候 yum 的速度那是真滴慢所以我们就需要一个更加快速的镜像,这时候网易镜像带给我们便捷.下面来一起更换吧! 备份当前的 yum 源 # yum 源在目录 /etc/yum.re ...
- python协程gevent案例：爬取斗鱼美女图片
分析 分析网站寻找需要的网址 用谷歌浏览器摁F12打开开发者工具,然后打开斗鱼颜值分类的页面,如图: 在里面的请求中,最后发现它是以ajax加载的数据,数据格式为json,如图: 圈住的部分是我们需要 ...
- 牛客 2C 圈圈
题面: shy有一个队列a[1], a[2],…,a[n].现在我们不停地把头上的元素放到尾巴上.在这过程中我们会得到n个不同的队列,每个队列都是a[k],a[k+1],…,a[n],a[1],…,a ...
- sql server 函数详解（4）日期和时间函数
时间和日期函数第一部分 时间和日期函数第二部分
- [转载]汇编语言assume伪指令的作用
原文:https://blog.csdn.net/u010234808/article/details/38366943 摘出关键部分: 编写程序,是写给编译软件的.由编译软件,编译成机器码,再去控制 ...
- Scala新版本学习(1):
1.进官网:https://www.scala-lang.org/ 上面就是进入Scala社区后的一个画面,官方对Scala的简单介绍是:Scala将面向对象和函数式编程集合在一个简洁的高级语言中,S ...
- Jquery.serializeArray()可看表单提交内容