GVKun编程网logo

Html5+css3+js完成无缝跑马灯（js实现无缝跑马灯效果）

12

本文将带您了解关于Html5+css3+js完成无缝跑马灯的新内容，同时我们还将为您解释js实现无缝跑马灯效果的相关知识，另外，我们还将为您提供关于Agile国人出品HTML5+CSS3+JS移动应用

本文将带您了解关于Html5+css3+js完成无缝跑马灯的新内容，同时我们还将为您解释js实现无缝跑马灯效果的相关知识，另外，我们还将为您提供关于Agile国人出品HTML5+CSS3+JS移动应用开发框架_html/css_WEB-ITnose、css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose、css3 transform 3d 使用css3创建动态3d立方体(html5实践)_html5教程技巧、css3 走马灯效果_html/css_WEB-ITnose的实用信息。

本文目录一览：

Html5+css3+js完成无缝跑马灯（js实现无缝跑马灯效果）

Html5+css3+js完成无缝跑马灯（js实现无缝跑马灯效果）

Html5+css3+js完成无缝跑马灯效果

HTML 部分

<!DOCTYPE html>
<html lang="en">

<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
<style>
* {
margin: 0px;
padding: 0px;
}
#a1,
#a2 {
width: 300px;
height: 300px;
overflow: hidden;
white-space: Nowrap;
}
#a1 p,
#a2 p {
float: left;
height: 30px;
line-height: 30px;
}
</style>
</head>

<body>
<div id="a1">
<p>欢迎您，只有努力奋斗</p>
<p>欢迎您，只有努力奋斗才会有美好的未来,哈哈哈哈。</p>
<p>欢迎您，只有努力奋斗才会有美好的未来,哈啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊哈哈哈。</p>
</div>

<div id="a2">

</div>
</body>
<script src="index.js"></script>
<script>
var arrs = ["大神困了就大神了啊啊啊啊啊啊啊啊。","吖，那大家的撒娇单独，萨达撒旦教啊--","奥斯卡级大烧烤加--","卡机的撒娇的萨达哈。卡介绍的---"]
for (let i = 0; i < arrs.length; i++) {
document.querySelector("#a2").innerHTML += `
<p>${arrs[i]}</p>
`
}
document.querySelectorAll("#a2 p").forEach(function (item) {
Roll(item)
})
var arr = document.querySelectorAll("#a1 p");
for (let i = 0; i < arr.length; i++) {
Roll(arr[i]);
};
</script>
</html>

Css部分
.marquee-left {
float: left;
height: 30px;
will-change: transform;
will-change: -webkit-transform;
line-height: 30px;
}

@-webkit-keyframes marquee-left-animate {
0% {
-webkit-transform: translate3d(0,0);
}
100% {
-webkit-transform: translate3d(-50%,0);
}
}
 
Js部分
//divId必须为dom元素
function Roll(divId) {
var str = divId.innerHTML
var time = (leng(str)) / 6 + "s"
//中文字符为2个长度，英文为1个，按需判断
if (leng(str) > 30) divId.style.csstext = "overflow: hidden; text-overflow: ellipsis;white-space: Nowrap; width: 240px;"
else return
divId.onmouseenter = function () {
divId.innerHTML = `<div><span>${str}</span><span>${str}</span></div>`
}
divId.onmouseleave = function () {
divId.innerHTML = str;
}
}
function leng (str) {
return str.replace(/[\u0391-\uFFE5]/g,"aa").length; //先把中文替换成两个字节的英文，在计算长度
};
 

效果基本就是，当你字符超过你设置的字符长度时，首先用css的方法用省略号代替超出部分，当你鼠标悬浮时，通过字符长度来定义滚动的时间，可自己设置。对你有所帮助或者有地方不对的，请及时评论哈，谢谢

Agile国人出品HTML5+CSS3+JS移动应用开发框架_html/css_WEB-ITnose

Agile国人出品HTML5+CSS3+JS移动应用开发框架_html/css_WEB-ITnose

agile 是一个基于html5+css3+js的移动应用开发框架，在体验上尽量接近native like，并且同时支持单页模式和多页模式。

Agile 让HTML5在移动应用开发中充分发挥优势。所有开发者都能快速上手、所有设备都可以适配、所有项目都适用。

简单、可扩展
Agile 支持Zepto和jQuery双引擎及相应的扩展；同时Agile均支持单页模式和多页模式的移动应用，可以与ExMobi、PhoneGap等流行的跨平台开发框架一起使用。

一个框架、多种设备
你的移动应用能在 Agile 的帮助下通过同一份代码快速、有效适配手机、平板等设备，这一切都是 CSS 媒体查询（Media Query）的功劳。

组件齐全
Agile 提供了全面、美观的文档。你能在这里找到关于 HTML 元素、HTML 和 CSS 组件、JavaScript 插件方面的所有详细文档。

立即学习“前端免费学习笔记（深入）”；

入门

Agile框架本身是基于标准HTML5开发的，但是由于移动应用中需要使用大量的本地能力而HTML5无法胜任，所以通常需要依赖一个容器运行，并能调用容器里的本地能力。

ExMobi是由烽火星空推出的移动应用平台，除了封装了丰富的原生组件和本地能力，对HTML5也有很好的支持，所以在ExMobi中使用 Agile可以获得更好的体验。除此之外，Agile也可以运行于其他的容器比如PhoneGap等。 如何在ExMobi中使用Agile请参考http://www.exmobi.cn/agile/case.html。

目录结构
下载Agile源码之后，将其解压缩到任意目录即可看到四个目录“agile”、“exmobijs”、“ratchet”和“icomoon”，agile是框架的核心，其他目录请点击前面相应的链接介绍，在文档中也会提及如何使用。以下是agile的目录结构：

agile/
├── css/
│ ├── agile.css
│ ├── agile.min.css
│ └── check.css
└── js/
├── agile.js
├── agile.min.js
├── iscroll.js
├── template-native.js
├── touch2mouse.js
└── zepto.js

这里的文件有的不是必须，有的是可以代替的。其中带有agile.*和app.*的agile的核心框架，必须引用，其他为第三方辅助框架。一般生产环境建议使用带min.*的文件。

Agile支持双引擎，即Zepto和jQuery，所以这里的zepto也可以换成jQuery，但是建议使用Zepto，因为Zepto的运行效率高一些。

iScroll.js是一个移动端页面滚动的解决方案，这里用到的是v4.2.5版本，在Agile里面已经封装好接口，一般情况下不需要直接调用，如需使用可参考iScroll 4.2.5简易API。

template-native.js是一个经典的JS模板引擎，可以将JSON数据动态注入到一个模板文件中，详细了解请访问其在github的位置。

基本模板
使用Agile框架，最基本要引用的CSS和JavaScript以及HTML页面如下（所有JS和CSS均使用相对地址）：





webapp







Hello World












获取

官网：http://www.exmobi.cn/agile/index.html
帮助文档：http://www.exmobi.cn/course/course_27.html
本站下载：agile-dist v3.0.0 | 更新于：2015-01-15

css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose

css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose

1.如何使一个div在屏幕的中间显示....这里是屏幕的中间， 不是页面的中间
说明:

position:absolute;left:50%;top:50%;margin-top:-25%;margin-left:-25%(或者margin个具体的像素值的负数)//又如下面的: var h = document.body.clientHeight; $("#update_info").css({ ''top'': h/2 });
登录后复制

这上面的代码，都是去到页面的中间而已...
我现在有几个折叠的ul，每个折叠的ul有好多内容，我如果全部打开，我测了一下高度是1820px;
但是手机高度，比如说是500;如何按上面的代码，那就是910，他根本就不是手机屏幕的中间，这个怎么办？

2 页面的遮罩层怎么弄？
我的想法是：一个div 位置绝对，长宽100%；背景半透明，然后这个div里面在放你想要的标签。。。
这样子做的话，当这个遮罩层的div show的时候，其他的div就被它覆盖，其他的div里面的标签就不能被点击或者其他操作了。
我这样测试了，发现一个手机是可以的，另外一个手机还是可以被点击其他div的东西的，不是说手机浏览器内核都是webkit么，(手机不是很老的，系统都是4.0以上的，就是可以点击的一个像素低很多而已)
为什么这样？这面是遮罩层的div
<div id="update"> <div id="update_info"> <div> <input id="txtValue" type="text"/> <asp:DropDownList ID="ddlNational" runat="server"> </asp:DropDownList> </div> <div> <a href="javascript::"onclick="updateInfo()">修改</a> <a href="#"onclick="close_dlg();">取消</a> </div> </div> </div>
登录后复制


回复讨论(解决方案)

用position: fixed; 试下

1.相对屏幕居中  其实观察下应用场景  居中的内容都比屏幕小（这个是隐含的条件）
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中？我觉得这个时候 不能在强求居中了 你应该改变定位

2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明（#fff） 看看还能点穿透不

1.相对屏幕居中  其实观察下应用场景  居中的内容都比屏幕小（这个是隐含的条件）
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中？我觉得这个时候 不能在强求居中了 你应该改变定位

2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明（#fff） 看看还能点穿透不



不是ie的，是手机的浏览器...麻痹的，我试了好多台都没事的，就是唯独有一台手机，他不管你遮罩不遮罩，下面的元素能被点击的，白色的不透明的效果，我试了一下，也没有效果..我郁闷了

fixed可以了，fixed用的不多，没怎么了解过


1.相对屏幕居中  其实观察下应用场景  居中的内容都比屏幕小（这个是隐含的条件）
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中？我觉得这个时候 不能在强求居中了 你应该改变定位

2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明（#fff） 看看还能点穿透不



不是ie的，是手机的浏览器...麻痹的，我试了好多台都没事的，就是唯独有一台手机，他不管你遮罩不遮罩，下面的元素能被点击的，白色的不透明的效果，我试了一下，也没有效果..我郁闷了

手机型号 分享下
以后我们碰见了 也能注意下



1.相对屏幕居中  其实观察下应用场景  居中的内容都比屏幕小（这个是隐含的条件）
top:50%;margin-top:-25% 这样是ok的
但是你的内容 超出屏幕大小 你还要居中？我觉得这个时候 不能在强求居中了 你应该改变定位

2.能穿透透明层点下面的 那是ie吧 你吧背景变成不透明（#fff） 看看还能点穿透不



不是ie的，是手机的浏览器...麻痹的，我试了好多台都没事的，就是唯独有一台手机，他不管你遮罩不遮罩，下面的元素能被点击的，白色的不透明的效果，我试了一下，也没有效果..我郁闷了

手机型号 分享下
以后我们碰见了 也能注意下
我的那一台是 中兴的u930。。。安卓4.03的...我做的是web app是在微信端访问的....

现在还是有问题的..先结贴了

css3 transform 3d 使用css3创建动态3d立方体(html5实践)_html5教程技巧

css3 transform 3d 使用css3创建动态3d立方体(html5实践)_html5教程技巧

在今天的课程中，我将向大家介绍如何使用css3创建3d的立方体。大家可以通过下面的链接浏览实际效果，操作上下左右键，实现立方体的翻转效果。
demo地址：http://www.jb51.net/jiaoben/70022.html
下面我们开始介绍如何制作。
html：

复制代码
代码如下:




one face


up, down, left, right


lorem ipsum.


new forms of navigation are fun.


rotating 3d cube


more content




上面的html中，class为face的6个div分别代表立方体的6个面，使用one到six的class名字对他们加以区分。外部包含有id为cube和experiment的两层容器，这两层都是必须的，少了任何一个，3d效果都出不来。
其中experiment起到镜头的作用。对他设置焦距，这样3d效果才能在内部元素上展示出来。
perspective属性定义z轴平面的深度，同时也定义了平面上面和下面元素的相对尺寸。总的来说，perspective值越小，物体越大，离你也越近；perspective值越大，物体越小，离你也越远。大家可以通过http://www.webkit.org/blog-files/3d-transforms/perspective-by-example.html查看效果。
perspective-origin属性定义视角的原点。
css：

复制代码
代码如下:

#experiment {
-webkit-perspective: 800;
-moz-perspective: 800;
-o-perspective: 800;
perspective: 800;
-webkit-perspective-origin: 50% 200px;
-moz-perspective-origin: 50% 200px;
-o-perspective-origin: 50% 200px;
perspective-origin: 50% 200px;
}

cube设置的属性中包含固定的宽度和高度，并将position设置为relative。固定的高度和宽度是必须的，这样cube中的元素才能在限定的区域内执行3d动画。如果将高度和宽度设置为100%，cube中的元素将在整个页面范围内运动。
transition用来设置动画相关的属性。transform-style: preserve-3d; 使得cube中的所有元素作为一个整体来产生3d效果。
大家可以浏览http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/，了解更多信息。
css：

复制代码
代码如下:

#cube {
position: relative;
margin: 100px auto;
height: 400px;
width: 400px;
-webkit-transition: -webkit-transform 2s linear;
-moz-transition: -moz-transform 2s linear;
-o-transition: -o-transform 2s linear;
transition: transform 2s linear;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

接下来统一为立方体的6个面设置css属性。
css：

复制代码
代码如下:

.face {
position: absolute;
height: 360px;
width: 360px;
padding: 20px;
background-color: rgba(50, 50, 50, 0.7);
}

接下来但是设置6个面的3d相关属性，使用rotatex或者rotatey来实现立方体表面朝向的翻转，使用translatez实现立方体表面在3维空间的位置移动。
css：

复制代码
代码如下:

#cube .one {
-webkit-transform: rotatex(90deg) translatez(200px);
-moz-transform: rotatex(90deg) translatez(200px);
-o-transform: rotatex(90deg) translatez(200px);
transform: rotatex(90deg) translatez(200px);
}
#cube .two {
-webkit-transform: translatez(200px);
-moz-transform: translatez(200px);
-o-transform: translatez(200px);
transform: translatez(200px);
}
#cube .three {
-webkit-transform: rotatey(90deg) translatez(200px);
-moz-transform: rotatey(90deg) translatez(200px);
-o-transform: rotatey(90deg) translatez(200px);
transform: rotatey(90deg) translatez(200px);
}
#cube .four {
-webkit-transform: rotatey(180deg) translatez(200px);
-moz-transform: rotatey(180deg) translatez(200px);
-o-transform: rotatey(180deg) translatez(200px);
transform: rotatey(180deg) translatez(200px);
}
#cube .five {
-webkit-transform: rotatey(-90deg) translatez(200px);
-moz-transform: rotatey(-90deg) translatez(200px);
-o-transform: rotatey(-90deg) translatez(200px);
transform: rotatey(-90deg) translatez(200px);
}
#cube .six {
-webkit-transform: rotatex(-90deg) translatez(200px);
-moz-transform: rotatex(-90deg) translatez(200px);
-o-transform: rotatex(-90deg) translatez(200px);
transform: rotatex(-90deg) translatez(200px);
}

最后要做的是为页面绑定keydown事件，这样当你按下上下左右键的时候，实现立方体的翻转运动效果。
javascript：

复制代码
代码如下:

var xangle = 0, yangle = 0;
document.addeventlistener(''keydown'', function(e)
{
switch(e.keycode)
{
case 37: // left
yangle -= 90;
break;
case 38: // up
xangle += 90;
break;
case 39: // right
yangle += 90;
break;
case 40: // down
xangle -= 90;
break;
};
$(''cube'').style.webkittransform = "rotatex("+xangle+"deg) rotatey("+yangle+"deg)";
}, false);

课程就讲到这里，接下来大家可以动手尝试一下。

css3 走马灯效果_html/css_WEB-ITnose

css3 走马灯效果_html/css_WEB-ITnose

纯css3实现了一个正六边形的走马灯效果，记录一下css3动画的学习情况，效果如下：

主要用到的css3技术有：keyframes、perspective、perspective-origin、transform（translate、rotate）、animation、transform-origin，另外加一点平面几何知识（计算间距、角度啥的），详细过程如下：

首先设计一下要显示的布局（俯视图），途中垂直的线为辅助线，计算偏移量时需要用的：

 

立即学习“前端免费学习笔记（深入）”；

红色框框为旋转面（即走马灯效果的结构最终以该面的中点为旋转轴旋转的），六个面也都是基于这个面做的布局，先看红框下面的三个面，左侧的面原本在蓝色线处，通过旋转到达绿色线处，右边同理，中间的面只需要在Z轴方向移动二分之根号三个边长的距离即可，所有的面均通过偏移和旋转的方式达到上图的结构，需要注意的是要保证有图案的面（本例中使用的是文字，思路一致）要向外，比如上面中间的面，在Z轴向外偏移二分之根号三个边长的距离之后还要以中点为圆心旋转180°，所有的面同理易得。在此过程中需要牢记的一点技术是：三维坐标系中，从坐标原点出发，向着坐标轴的正方向看去，逆时针旋转时rotate(X/Y/Z)的值为正数，顺时针旋转时，rotate(X/Y/Z)值为负数。

设置结构：一个3D场景、一个走马灯的旋转面和走马灯的六个面：

<div>        <!--场景-->    <div>   <!--容器-->        <div>1</div>  <!--六个面-->        <div>2</div>        <div>3</div>        <div>4</div>        <div>5</div>        <div>6</div>    </div>        </div>
登录后复制

设置3D场景：

.wapper{    -webkit-perspective:800;    /*观察距离800*/    -webkit-perspective-origin:50% -100%;    /*从正前方上方斜向下观察*/    width:400px;    height:300px;    margin:100px auto;}
登录后复制

设置旋转面：

@-webkit-keyframes rotation{      /*动画过程*/    0%{-webkit-transform:rotateY(0deg);}        100%{-webkit-transform:rotateY(-360deg);}}.rotate{    -webkit-transform-style:preserve-3d;     /*3D变换*/    -webkit-animation: rotation 6s infinite;  /*动画名称、时间、循环动画*/    -webkit-animation-timing-function: linear;  /*匀速动画*/    -webkit-transform-origin:center;      /*沿中间旋转*/    width:100%;    height:100%;    position:relative;   /*相对定位布局*/}
登录后复制

对六个面除了位置之外的通用样式做设置：

.item{    -webkit-transform-origin:center;  /*均沿中心旋转*/    width:198px;    height:300px;    position:absolute;   /*绝对定位在旋转面上*/    background:none;    text-align:center;    line-height:300px;}
登录后复制

分别设置六个面的位置，以一号为例（上面结构图中红框下面左边绿色线标注的面），所有的数值均需要经过几何计算得来：

.itemOne{    left:-50px;    -webkit-transform:translateZ(87px) rotateY(-60deg);  /*z轴向外移动87px，沿Y轴方向旋转-60&deg;*/    background:#f00;}
登录后复制

在鼠标悬浮在该结构上时动画停止：

.rotate:hover{    -webkit-animation-play-state:paused;  /*设置动画状态*/}
登录后复制

本例子只有在webkit内核的浏览器中可以查看效果，如需兼容其他现代浏览器，需添加 -moz- 等前缀，完整代码如下：

<!DOCTYPE html><html><head>    <meta charset="UTF-8">    <title>Animation Test</title>    <style>    *{margin:0;padding:0;}    @-webkit-keyframes rotation{            0%{-webkit-transform:rotateY(0deg);}            100%{-webkit-transform:rotateY(-360deg);}    }    .wapper{        -webkit-perspective:800;        -webkit-perspective-origin:50% -100%;        width:400px;        height:300px;        margin:100px auto;    }    .rotate{        -webkit-transform-style:preserve-3d;        -webkit-animation: rotation 6s infinite;        -webkit-animation-timing-function: linear;        -webkit-transform-origin:center;        width:100%;        height:100%;        position:relative;    }    .item{        -webkit-transform-origin:center;        width:198px;        height:300px;        position:absolute;        background:none;        text-align:center;        line-height:300px;    }    .itemOne{        left:-50px;        -webkit-transform:translateZ(87px) rotateY(-60deg);        background:#f00;    }    .itemTwo{        left:100px;        -webkit-transform:translateZ(173px);        background:#ff0;    }    .itemThree{        left:250px;        -webkit-transform:translateZ(87px) rotateY(60deg);        background:#0ff;            }    .itemFour{        left:250px;        -webkit-transform:translateZ(-87px) rotateY(120deg);            background:#0f0;    }    .itemFive{        left:100px;        -webkit-transform:translateZ(-173px) rotateY(180deg);        background:#0ff;    }    .itemSix{        left:-50px;        -webkit-transform:translateZ(-87px) rotateY(-120deg);        background:#00f;    }    .rotate:hover{        -webkit-animation-play-state:paused;    }    </style></head><body>    <div>        <div>            <div>1</div>            <div>2</div>            <div>3</div>            <div>4</div>            <div>5</div>            <div>6</div>        </div>            </div></body></html>
登录后复制

 

立即学习“前端免费学习笔记（深入）”；

我们今天的关于Html5+css3+js完成无缝跑马灯和js实现无缝跑马灯效果的分享已经告一段落，感谢您的关注，如果您想了解更多关于Agile国人出品HTML5+CSS3+JS移动应用开发框架_html/css_WEB-ITnose、css3 +html5+js 手机网页布局问题(在微信上使用).两个问题_html/css_WEB-ITnose、css3 transform 3d 使用css3创建动态3d立方体(html5实践)_html5教程技巧、css3 走马灯效果_html/css_WEB-ITnose的相关信息，请在本站查询。

本文标签：

上一篇HTML超链接实例介绍（html超链接例子）

下一篇HTML基础 --- HTML样式

相关文章