开发工具与关键技术： 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旋转效果代码如下：
.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.onclick=function(){
if(blswitch){
return false;
}
if(index5){
index=1;
}else{
index++;
}
animate(-670);
showButton();
};
prev.onclick=function(){
if(blswitch){
return false;
}
if(index1){
index=5;
}else{
index–;
}
animate(670);
showButton();
};
for(var i=0;i<buttons.length;i++){
buttons[i].onclick=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.onmouseover=stop;
container.onmouseout=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();
}