HTML.实现动画 Javascript脚本 Jquery

最新推荐文章于 2024-06-12 11:27:01 发布

皮小葵

最新推荐文章于 2024-06-12 11:27:01 发布

阅读量548

点赞数

本文链接：https://blog.csdn.net/lulu17862078553/article/details/84644424

版权

动画

1.颜色变化

<style>

div{width: 100px;height: 100px;background-color: red;}

@keyframes bianse{

0%{background-color: aqua;}

100%{background-color: yellow;}

}

div{animation: bianse 3s infinite;}/*动画过渡几秒自动播放*

</style>

</head>

<body>

</body>

2.大小变化

<style>

div{width: 100px;height: 100px;background-color: red;}

@keyframes donghua{

0%{transform: scale(1)}

50%{transform: scale(2)}

100%{transform: scale(1);}

}

div{animation:donghua 3s infinite;}/*动画过渡几秒自动播放*

</style>

</head>

<body>

Javascript脚本

1.基础（函数调用）

<!doctype html>

<html>

<head>

<title>无标题文档</title>

<style>

div{width: 100px;height: 100px;background-color: green}

</style>

</head>

<body>

function hanshu(){

document.getElementById('hezi')//先找到.style.backgroundColor = 'red';//改样式

document.getElementById('hezi').style.color = 'white';

}//函数，可以多次调用

</script>

<div id="hezi"

οnclick="hanshu()">文本内容</div>

//document.title = "我";//可以是字符可以是数字，字符加引号，数字不用加

//document.write("我在这里显示");

//document.getElementById("hezi").style .backgroundColor = "red";

</script>

</body>

</html>

2.单击的时候出现窗口提示窗

function tishi(){

window.alert("欢迎光临！！！");

}

</script>

<div onClick="tishi()">点我有惊喜</div>

3.弹出提示框，当你输入内容后，里面的内容会变成你自己输入的内容

var x = window.prompt("你的银行卡密码？","123456");

document.getElementById("box").innerHTML = x;

//var x;//我有变量名叫X

//给变量名赋值

</script>

if条件语句

<body>

<div id="box">我的颜色你说了算</div>

var yanse = window.prompt("输入你的颜色，请输入一个字");

if(yanse == "红"){

document.getElementById("box").style.backgroundColor = "red";//div背景色换掉

}else{

document.getElementById("box").innerHTML = "不好意思，没有准备这个颜色";

}

</script>

</body>

按钮

<body>

请输入你的密码：<input id="shuru" value="我是默认值">

function dezhi(){

var x = document.getElementById("shuru").value;//找到输入框，获得它的值value

document.title = x;

}

</script>

</body>

Jquery（必许用script链接jquery-1.9.1文件）

<title>无标题文档</title>

<style>

div{width: 200px;height: 200px;background-color: aqua;float: left;margin-right: 10px;}

</style>

</head>

<body>

/*$("div").css({"width":300,"height":100,"background-color":"red"});*/第一种写法

$(".box1").click(function(){

$(".box1")

.css("background-color","green");

})

$(".box2").click(function(){

$(".box2")

.css("background-color","green");

})

$(".box3").click(function(){

$(".box3")

.css("background-color","green");

})

</script>

/*$("div").click(function(){

$("this").css("background-color","green");

})*//*所有都可以用这个*/

3.可以选择第几个人eq（第几个）first（第一个）last（最后一个）

$("div").click(

function(){

$("div").css.eq(3)("background-color","green");

})

过渡消失

<body>

$("div").click(

function(){

$(this).hide(3000);毫秒值

})

</script>

</body>

6.<button style = "display: block">lala</button>

$("div").click(

function(){

$(this).hide(3000);单击盒子隐藏

})

$("button").click(

function(){

$("div").show(3000);单击按钮显示

}

)

$("div").click(

function(){

$("div").fadeOut(3000);单击盒子淡出

})

$("button").click(

function(){

$("div").fadeIn(3000);单击按钮淡入

}

)

</script>

8.<script>

$("div").click(

function(){

$("div").slideUp(3000);单击盒子上滑

})

$("button").click(

function(){

$("div").slideDown(3000);单击按钮下滑

}

)

</script>

9动画（前进后退旋转）

<style>

div{width: 100px;height: 100px;background-color: green;

transition: 0.5s;margin: 10px;

position: relative;}

</style>

</head>

<body>

var x=0;

$("button").eq(0).click(

function(){

x = x+20;/*前进函数*/

$("div").animate({left:x},200).css("transform","rotate(720deg)");/*移动（前进）旋转720度*/

}

)

$("button").eq(1).click(

function(){

x = x-20;/*后退函数*/

$("div").animate({left:x},200);

}

)

</script>

10.<script>

$("button").click(

function(){

var x;

x = $(this).index();/*获得这个人是第几个*/

document.title = x;/*测试（可以不写）*/

$("div")

.css("background-color","gray")

.css("transform","translate(0,0) rotate(0deg) scale(1)");

$("div").eq(x)

.css("background-color","green")

.css("transform","translate(100px,0) rotate(360deg) scale(1.5)");

}

)

</script>

点击导航的时候，会显示相应的内容

<style>

body{margin: 0;padding: 0;}

li{list-style: none;}

.nav{width: 1000px;margin:auto;overflow: hidden;}

.nav li{float: left;width: calc(100% / 3);}

.current{color: red;}

</style>

</head>

<body>

<ul>

</ul>

</div>

$(".nav li").click(

function(){

$(".nav li").removeClass("current");

$(this).addClass("current");

}

)

</script>

皮小葵

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML.实现动画 Javascript脚本 Jquery

动画1.颜色变化&lt;style&gt;div{width: 100px;height: 100px;background-color: red;}@keyframes bianse{0%{background-color: aqua;}100%{background-color: yellow;}}div{animation: bianse 3s infinit...
复制链接

扫一扫