开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换

开发工具与关键技术： HTML CSS3 JQUERY JS
作者：冉启东
撰写时间：2019年1月18日
1.使用HTML制作Contextual variations各种颜色类型的徽章代码如下：
div class=“container”
span class=“badge badge-primary”
span class=“badge badge-secondary” Secondary span
span class=“badge badge-success” Success /span
span class="badge badge-danger " Danger /span
span class=“badge badge-warning” Warning /span
span class=“badge badge-info” Info /span
span class=“badge badge-light” Light /span
span class=“badge badge-dark” Dark /span

span class=“badge badge-pill badge-primary” Primary /span
span class=“badge badge-pill badge-secondary” Secondary /span
span class=“badge badge-pill badge-success” Success /span
span class=“badge badge-pill badge-danger” Danger /span
span class=“badge badge-pill badge-warning” Warning /span
span class=“badge badge-pill badge-info” Info /span>
span class=“badge badge-pill badge-light” Light /span
span class=“badge badge-pill badge-dark” Dark /span

a href="#" class=“badge badge-primary”/a
a href="#" class=“badge badge-secondary”/a
a href="#" class=“badge badge-success”/a
a href="#" class=“badge badge-danger”/a
a href="#" class=“badge badge-warning"Warning/a
a href=”#" class=“badge badge-info"Info/a
a href=”#" class=“badge badge-light"Light/a
a href=”#" class="badge badge-dark"Dark/a
/div
效果如图1：

中间输入文字再 href=“此处可放置链接”
div是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。
span标签

2.使用JQUERY插件制作动态切换代码如下：
jQuery(".dtbm").slide({
mainCell:".contentbox ul",
autoPage:true,
effect:“top”,
autoPlay:true,
vis:5
效果如图1

3.使用HTML和CSS3制作动画2D旋转效果代码如下：

CSS3动画（1）

.div1:hover{
width:300px;
height: 300px;
transform: rotate(360deg);
}

效果如下图1和图2

图1
鼠标没有放置在红色区域上时如图1，放在红色区域时如图2

图2,
如上图所示，图1在鼠标指针没有放在下面的情况下比较小，图2在鼠标指针放在红色区域的情况下变大了许多，
旋转变大如图3

旋转360°便成了图2的样子。

4.使用JS制作轮播自动切换的样式，代码如下：
var blswitch=false;
var index=1;
var timer=null;
window.function(){
var container=document.getElementById(“container”);
var prev=document.getElementById(“prev”);
var next=document.getElementById(“next”);
var buttons=document.getElementById(“buttons”).getElementsByTagName(“span”);
next.οnclick=function(){
if(blswitch){
return false;
}
if(index5){
index=1;
}else{
index++;
}
animate(-670);
showButton();
};
prev.οnclick=function(){
if(blswitch){
return false;
}
if(index1){
index=5;
}else{
index–;
}
animate(670);
showButton();
};
for(var i=0;i<buttons.length;i++){
buttons[i].οnclick=function(){
if(this.className===“on”){
return;
}
var myindex=this.getAttribute(“index”);
var offset=-670*(myindex-index);
if(!blswitch){
animate(offset);
}
index=myindex;
showButton();
}
}
function play() {
timer = setTimeout(function () {
next.onclick();
play();
}, 3000);
}
function stop() {
clearTimeout(timer);
}
play();
container.οnmοuseοver=stop;
container.οnmοuseοut=play;
};
function animate(offset){
var list=document.getElementById(“list”);
var time=300;
var interval=10;
var speed=offset/(time/interval);
var newleft=parseInt(list.style.left)+offset;
blswitch=true;
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){
list.style.left=parseInt(list.style.left)+speed+“px”;
setTimeout(go,interval);//使用定时器完成递归调用
}else{
list.style.left=newleft+“px”;
if(newleft<-(6705)){
list.style.left=-670+‘px’;
}
if(newleft>-670){
list.style.left=-(6705)+“px”;
}
blswitch=false;
}
}
go();
}
function showButton(){
var buttons=document.getElementById(“buttons”).getElementsByTagName(“span”);
for(var i=0;i<buttons.length;i++){
if(buttons[i].className==‘on’){
buttons[i].className=’’;
break;
}
}
buttons[index-1].className=‘on’;
}
效果如图1所示：

var blswitch=false;//动画是否在运动
var index=1;//用于记录当前播放轮播图
var timer=null;//定时器
if(blswitch){/如果blswitch开关为true说明动画函数正在被调用，则不可以再次调用函数/
return false;
}
function animate(offset){
var list=document.getElementById(“list”);
var time=300;//总的运行时间
var interval=10;//位移间隔时间
/位移次数=time/interval 速度=总的位移量/位移次数/
var speed=offset/(time/interval);
var newleft=parseInt(list.style.left)+offset;
blswitch=true;
function go(){
if((speed<0&&parseInt(list.style.left)>newleft)||(speed>0&&parseInt(list.style.left)<newleft)){
//speed<0&&parseInt(list.style.left)>newleft
/图片向左移动传递过来的值是负数 speed<0 list.style.left的值逐渐减小，所以只要是list.style.left大于newleft的值那么就应该要调用go方法/
//speed>0&&parseInt(list.style.left)<newleft
/图片向右移动传递过来的值是整数 speed>0 list.style.left的值逐渐增大，所以只要是list.style.left小于newleft的值那么就应该要调用go方法/
list.style.left=parseInt(list.style.left)+speed+“px”;
setTimeout(go,interval);//使用定时器完成递归调用
}else{
list.style.left=newleft+“px”;
if(newleft<-(6705)){
list.style.left=-670+‘px’;
}
if(newleft>-670){
list.style.left=-(6705)+“px”;
}
blswitch=false;
}
}
go();
}

开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换相关推荐

开发工具与关键技术：DW软件 JS设置遮罩层
开发工具与关键技术: DW软件 JS设置遮罩层作者:冉启东撰写时间:2019年1月18日 1.JS设置遮罩层代码如下: window.onload = function(){ var plan_t ...
5G 超高清关键技术：高帧率重置、高动态渲染、云加端增强
帧享是什么? 帧享是一个超高清的解决方案,从 2B 到 2C 的视角,帧享具备 4 个技术能力: 一是高帧率增强,可提供最高 120 帧的超高帧率视频,顺滑地呈现物体运动场景: 二是超高分辨率,对于画 ...
SQL Studio：一款纯Web化SQL开发工具，关键是免安装还免费！
经常使用SQL工具的开发者对Navicat一定都不陌生.这款软件作为一款全球化的多数据库管理工具,这些年逐步得到全国各地SQLer(SQL开发者)的关注. 与其他很多外来的软件产品一样,由于价格原因, ...
8、开发工具软件 - 软件技术系列文章
在实际的软件开发和项目管理过程中,都需要很多的工具软件,使用这些软件,能够提高软件人员的工作效率,笔者在总结软件技术的时候,就收集整理了一些软件工具,以便需要的时候能够应用得上. 这里等后期这些工具软 ...
android游戏开发原理及关键技术
一.游戏开发最重要的是游戏逻辑和动画.包括:背景图片控制,动作动画控制,音效控制 1.场景背景图片控制 2.动作动画控制:通过图片来实现动画. 3.音效控制:音频文件. 4.游戏逻辑. 二.游戏的横竖 ...
深入浅出mfc学习笔记——六大关键技术之仿真_运行时和动态创建
1:PS88:MFC的类层次结构 <1>CObject <2>CCmdTarget,CDocument <3>CCmdTarget_CWinThread_CWinA ...
基于Andro平台的软件开发若干关键技术研究（笔记）
基于Android平台的软件开发若干个关键技术研究摘要:随着移动智能终端的飞速发展和广泛普及,移动GIS应用正迅速迅速成长,并且成为最有发展前景的热点之一.作为移动GIS应用的分支,基于Androi ...
增强现实系统的三大关键技术是什么？
来源:VR村增强现实系统的主要任务是进行真实世界和虚拟物体的无缝融合,需要解决真实场景和虚拟物体的合成一致性问题.为了确保真实世界和虚拟对象的无缝融合,根据Ronald Azuma对增强现实技术的定 ...
增强现实系统的三大关键技术
增强现实系统的主要任务是进行真实世界和虚拟物体的无缝融合,需要解决真实场景和虚拟物体的合成一致性问题.为了确保真实世界和虚拟对象的无缝融合,在AR应用系统开发中必须要解决好三大关键问题和三项关 ...

开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换

开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换相关推荐

最新文章

热门文章

开发工具与关键技术： 使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换

开发工具与关键技术： 使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换相关推荐

最新文章

热门文章

开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换

开发工具与关键技术：使用HTML 徽章 CSS3 动画 JQUERY 动态切换 JS自动切换相关推荐