js动画效果（贴一个完整的代码，附js文件写法）
来源：互联网 发布：人工智能电影观看 编辑：程序博客网 时间：2024/05/28 03:03
关于图片自行设置
<!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效果），具体文件文件整理中……
阅读全文
0 0
- js动画效果（贴一个完整的代码，附js文件写法）
- js 计时器,倒计时完整实例代码附效果图 制作一个当前时间的动态时钟
- 一个js函数的改进（实现动画效果）
- tween.js一个平滑动效果的js动画库
- [微信小程序]手指触摸动画效果(完整代码附效果图)
- [微信小程序]动画,从顶部掉花的效果(完整代码附效果图)
- js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
- 一个JS分页效果代码
- 一个实用的JS动画弹出层效果
- 奉献一个实用的JS动画弹出层效果
- js 动画效果代码，主要运用setTimeout
- 用JS生成MIDI文件（附代码）
- 非常不错的一个JS分页效果代码，值得研究
- js动画效果
- js动画效果
- js动画效果
- js实现动画效果
- js中的动画效果
- Java Mail邮件发送
- React入门以及JSX语法理解
- Android开发 第四课 AutoCompleteTextView和MultiAutoCompleteTextView
- 对Tensorflow整体的理解介绍
- WebRTC实时通信系列教程4 从摄像头获取视频流
- js动画效果（贴一个完整的代码，附js文件写法）
- POJ2406 Power Strings(KMP)
- j2me 如何优化内存？
- 树的先序遍历、中序遍历、后续遍历的递归与循环详解
- HashMap源码解析
- Java基础知识总结
- -Java 模拟登录时需要输入验证码功能
- JAVA项目开发之文档篇
- HTTP协议--基础篇
