js动画效果（贴一个完整的代码，附js文件写法）
2017-08-05 09:52
1096 查看
关于图片自行设置
将点击滑动切换图片效果写在外部文件”js/my.js”，注意写法，js获得ID的前提是已经在之前被浏览器识别出来（所以window.onload，请自行参考为什么会有这东西出现）
鼠标移入切图效果如下（hover效果），具体文件文件整理中……
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0 auto;
}
section {
width: 400px;
height: 600px;
}
section>div {
display: inline-block;
width: 31%;
height: 25%;
background-size: 100% 100%;
border: 2px solid white;
}
.box {
position: relative;
width: 1000px;
height: 500px;
overflow: hidden;
background: gray;
}
.box span {
display: block;
width: 3000px;
height: 100%;
}
.box div[id^="btn"] {
position: absolute;
width: 30px;
height: 100px;
line-height: 100px;
text-align: center;
background-color: rgba(0, 128, 0, 0.5);
top: 50%;
margin-top: -50px;
z-index: 10;//必须加，默认为-1
}
.box #pntlist {
position: absolute;
width: 60px;
height: 14px;
bottom: 50px;
left: 50%;
margin-left: -30px;
border: 0;
z-index: 9;
/*background-color: red;测试使用*/
}
.box div[id^="pnt"] {
float: left;
width: 14px;
height: 12px;
margin-right: 2px;
border: 2px solid black;
border-radius: 8px;
}
.box span>div[id^="img"] {
float: left;
margin: 0;
padding: 0;
width: 1000px;
height: 100%;
/*background-size: 100% 100%;*/
}
</style>
<!--<script type="text/javascript" src="js/my.js">
// window.onload = init;无效
</script>
<script type="text/javascript">
window.onload = init;
</script>-->
</head>
<body>
<section>
<div id="img"></div>
<div id="btn1"></div>
<div id="btn2"></div>
<div id="btn3"></div>
</section>
<hr />
<div class="box">
<div id="btn_left"></div>
<div id="btn_right"></div>
<div id="pntlist">
<div id="pnt1"></div>
<div id="pnt2"></div>
<div id="pnt3"></div>
</div>
<span id="cavas">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
</span>
</div>
</body>
<!--这是点击滑动图片效果-->
<script>
var x = 0;
var pnt1 = document.getElementById("pnt1");
var pnt2 = document.getElementById("pnt2");
var pnt3 = document.getElementById("pnt3");
function showpnt(){
switch(x){
case 0:pnt1.style.backgroundColor = "white";
pnt2.style.backgroundColor = "rgba(0,0,0,0)";
pnt3.style.backgroundColor = "rgba(0,0,0,0)";
break;
case -1000:pnt1.style.backgroundColor = "rgba(0,0,0,0)";
pnt2.style.backgroundColor = "white";
pnt3.style.backgroundColor = "rgba(0,0,0,0)";
break;
case -2000:pnt1.style.backgroundColor = "rgba(0,0,0,0)";
pnt2.style.backgroundColor = "rgba(0,0,0,0)";
pnt3.style.backgroundColor = "white";
break;
default:
break;
}
}
var bl = document.getElementById("btn_left");
var br = document.getElementById("btn_right");
var img1 = document.getElementById("img1");
var img2 = document.getElementById("img2");
var img3 = document.getElementById("img3");
var cavas = document.getElementById("cavas");
img1.style.float = img2.style.float = img3.style.float = "left";
br.innerHTML = "\>";bl.innerHTML = "\<"
img1.style.backgroundImage = "url(img/axing.jpg)"
img2.style.backgroundImage = "url(img/7xi.jpg)"
img3.style.backgroundImage = "url(img/power.jpg)"
bl.style.left = br.style.right = "25px";
cavas.style.transition="all 1s";
br.onclick = function(){
x-=1000;
if(x < -2000){
x = -2000;
}
cavas.style.transform = "translateX("+ x +"px)"
showpnt();
}
bl.onclick = function(){
x+=1000;
if(x > 0){
x = 0;
}
cavas.style.transform = "translateX("+ x +"px)"
showpnt();
}
bl.onmouseenter = function(){
bl.style.backgroundColor = "rgba(0,128,0,0.9)"
}
bl.onmouseleave= function(){
bl.style.backgroundColor = "rgba(0,128,0,0.5)"
}
br.onmouseenter = function(){
br.style.backgroundColor = "rgba(0,128,0,0.9)"
}
br.onmouseleave= function(){
br.style.backgroundColor = "rgba(0,128,0,0.5)"
}
showpnt();
</script>
<!--这是鼠标移入图片切换效果-->
<script>
var img = document.getElementById("img");
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var btn3 = document.getElementById("btn3");
img.style.width = "100%";
img.style.height = "70%";
img.style.transition = "all 0.5s";
img.style.backgroundImage = "url(img/maru1.png)"
btn1.style.backgroundImage = "url(img/liang1.png)"
btn2.style.backgroundImage = "url(img/liang2.png)"
btn3.style.backgroundImage = "url(img/liang3.png)"
btn1.onmouseenter = cutImg(1);
btn2.onmouseenter = cutImg(2);
btn3.onmouseenter = cutImg(3);
function cutImg(n) {
switch(n) {
case 1:
return function() {
img.style.backgroundImage = "url(img/maru1.png)"
btn1.style.border = "2px solid red"
btn2.style.border = "2px solid white"
btn3.style.border = "2px solid white"
}
break;
case 2:
return function() {
img.style.backgroundImage = "url(img/maru2.png)"
btn1.style.border = "2px solid white"
btn2.style.border = "2px solid red"
btn3.style.border = "2px solid white"
}
break;
case 3:
return function() {
img.style.backgroundImage = "url(img/miku.png)"
btn1.style.border = "2px solid white"
btn2.style.border = "2px solid white"
btn3.style.border = "2px solid red"
}
break;
default:
break;
}
}
</script>
</html>将点击滑动切换图片效果写在外部文件”js/my.js”，注意写法，js获得ID的前提是已经在之前被浏览器识别出来（所以window.onload，请自行参考为什么会有这东西出现）
//水平位移大小
var x=0;
//滑动的点
var pnt1, pnt2, pnt3;
//切换的按钮
var bl, br;
//展示的图片
var img1, img2, img3;
//移动的盒子
var cavas;
//显示当前位置的点
function showpnt() {
switch(x) {
case 0:
pnt1.style.backgroundColor = "white";
pnt2.style.backgroundColor = "rgba(0,0,0,0)";
pnt3.style.backgroundColor = "rgba(0,0,0,0)";
break;
case -1000:
pnt1.style.backgroundColor = "rgba(0,0,0,0)";
pnt2.style.backgroundColor = "white";
pnt3.style.backgroundColor = "rgba(0,0,0,0)";
break;
case -2000:
pnt1.style.backgroundColor = "rgba(0,0,0,0)";
pnt2.style.backgroundColor = "rgba(0,0,0,0)";
pnt3.style.backgroundColor = "white";
break;
default:
break;
}
}
//初始化
function init() {
//滑动的点
pnt1 = document.getElementById("pnt1");
pnt2 = document.getElementById("pnt2");
pnt3 = document.getElementById("pnt3");
//切换的按钮
bl = document.getElementById("btn_left");
br = document.getElementById("btn_right");
//展示的图片
img1 = document.getElementById("img1");
img2 = document.getElementById("img2");
img3 = document.getElementById("img3");
//移动的盒子
cavas = document.getElementById("cavas");
img1.style.float = img2.style.float = img3.style.float = "left";
br.innerHTML = "\>";
bl.innerHTML = "\<"
img1.style.backgroundImage = "url(img/axing.jpg)"
img2.style.backgroundImage = "url(img/7xi.jpg)"
img3.style.backgroundImage = "url(img/power.jpg)"
bl.style.left = br.style.right = "25px";
cavas.style.transition = "all 1s";
br.onclick = function() {
x -= 1000;
if(x < -2000) {
x = -2000;
}
cavas.style.transform = "translateX(" + x + "px)"
showpnt();
}
bl.onclick = function() {
x += 1000;
if(x > 0) {
x = 0;
}
cavas.style.transform = "translateX(" + x + "px)"
showpnt();
}
bl.onmouseenter = function() {
bl.style.backgroundColor = "rgba(0,128,0,0.9)"
}
bl.onmouseleave = function() {
bl.style.backgroundColor = "rgba(0,128,0,0.5)"
}
br.onmouseenter = function() {
br.style.backgroundColor = "rgba(0,128,0,0.9)"
}
br.onmouseleave = function() {
br.style.backgroundColor = "rgba(0,128,0,0.5)"
}
showpnt();
}鼠标移入切图效果如下（hover效果），具体文件文件整理中……
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- 一个简单的js动画效果代码
- JS+CSS实现鼠标经过弹出一个DIV框完整实例(带缓冲动画渐变效果)
- 非常不错的一个JS分页效果代码，值得研究
- 在页面里JS代码里onclick去调用后台文件中的一个方法
- 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
- JS动画效果代码2
- 在iframe里的页面编写js，实现在父窗口上创建动画效果展开和收缩的div（不变动iframe父窗口代码）
- JS打开层/关闭层/移动层动画效果的实例代码
- JS动画效果文字慢慢放大的菜单代码
- 仿谷歌主页js动画效果实现代码
- js写一个弹出层并锁屏效果实现代码
- 非常不错的一个JS分页效果代码，值得研究
- Node.js用6行代码1个JS文件搭建一个HTTP静态服务器
- js 动画效果代码，主要运用setTimeout
- 图片的左右移动，js动画效果实现代码
- 一个简单的滑动门效果-完整代码
- js 动画效果代码，主要运用setTimeout
- 一个js的tab切换效果代码[代码分离]