1. 激活谷首页
  2. 激活谷笔记

html预览图片_pdf做成翻页电子书

• 激活谷笔记

html预览图片_pdf做成翻页电子书【javascript/css】Javascript+Css实现图片滑动浏览效果今天用js+css来做一个能够左右滑动的图片浏览效果。首先写一个结构，包括需要浏览的两张图，以及能够来滑动图片的两个按钮。1 <!DOCTYPE html> 2 <html>

【javascript/css】Javascript+Css实现图片滑动浏览效果 　　今天用js+css来做一个能够左右滑动的图片浏览效果。 　　首先写一个结构，包括需要浏览的两张图，以及能够来滑动图片的两个按钮。 　　1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> 5 <script type=”text/javascript” src=”http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js”></script> 6 <title>css+javascript图片滑动浏览</title> 7 <link rel=”icon” href=”https://www.cnblogs.com/linxiong945/p/favicon.ico” type=”images/x-icon” /> 8 9 <style type=”text/css”> 10 11 </style> 12 13 <script type=”text/javascript”> 14 15 </script> 16 </head> 17 18 <body> 19 <div class=”card”> 20 <div class=”img”> 21 <img class=”img1″ src=”https://www.cnblogs.com/linxiong945/p/resource/images/banner.jpg” alt=”妈咪快集合，心贝新风向”/> 22 <img class=”img2″ src=”https://www.cnblogs.com/linxiong945/p/resource/images/banner3.jpg” alt=”一切为了孩子，为了孩子的一切”/> 23 </div> 24 <div class=”btn”> 25 <a class=”btn1″></a> 26 <a class=”btn2″></a> 27 </div> 28 </div> 29 </body> 30 </html> 　　
html预览图片_pdf做成翻页电子书 　　接下来，将图片父素框的长宽设置为图片的长宽，并且将图片设置为绝对定位，这样就可以将图片层叠在一起，并且可以在之后通过js来移动它。(将图片绝对定位时，不要忘了将其父素框设置为相对定位) 　　1 <style type=”text/css”> 2 * {margin: 0; padding: 0;} 3 .card {width: 526px; height: 216px; margin: 100px auto;} 4 .card .img {position: relative;} 　　5 .card .img img {position: absolute;} 　　6 </style> 　　
html预览图片_pdf做成翻页电子书 　　这样，就了层叠在一起的两张图片，不难发现，现在呈现在外的就是后定位的图片，即图片2(当然可以用”z-index”属性来设置其层叠的位置)。 　　接下来，把需要控制的两个点加到图片的左下角。 　　1 <style type=”text/css”> 2 * {margin: 0; padding: 0;} 3 .card {width: 526px; height: 216px; margin: 100px auto; position: relative;} 4 .card .img {position: relative;} 5 .card .img img {position: absolute;} 6 .btn {position: absolute; left: 10px; bottom: 5px;} 7 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url(“resource/images/pagination.png”);} 8 </style> 　　其中的图片”pagination.png”是
html预览图片_pdf做成翻页电子书的，两种颜色分别代表未被和被两种状态。我们通过前面说过的CSS Sprites(CSS精灵)技术，来标记按钮的两种状态。 　　效果： 　　
html预览图片_pdf做成翻页电子书 　　接下来就是js代码来控制图片的显示了。 　　可以通过图片的”display:none”设置，来控制图片的显示与关闭，来达到切换图片的效果。 　　1 <script type=”text/javascript”> 2 $(function(){ 3 $(“.btn1”).click(function(){ 4 $(“.img2”).css(“display”,”none”); 5 $(“.img1”).css(“display”,”block”); 6 $(“.btn1”).css(“background-position”,”0 -12px”); 7 $(“.btn2”).css(“background-position”,”0 0″); 8 }); 9 $(“.btn2”).click(function(){ 10 $(“.img1”).css(“display”,”none”); 11 $(“.img2”).css(“display”,”block”); 12 $(“.btn2”).css(“background-position”,”0 -12px”); 13 $(“.btn1”).css(“background-position”,”0 0″); 14 }); 15 }); 16 </script> 　　这样当两个按钮的时候，就可以看到随着图片的切换 　　
html预览图片_pdf做成翻页电子书
html预览图片_pdf做成翻页电子书 　　不过，简单的切换并不是此文的目的，需要的是后通过图片的滑入滑出来切换图片的展示。 　　接下来，通过jquery的animate()方法来控制图片滑动的动作，并通过固定在图片父框外的图片与父框内的图片的切换过程来实现滑动效果。 　　下面一步步来： 　　第一步：把图片1紧贴着图片父框的右边框固定（计算好偏移量）。为了看清楚，先给父框加上边框： 　　1 <style type=”text/css”> 2 * {margin: 0; padding: 0;} 3 .card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid;} 4 .card .img {position: relative;} 5 .card .img img {position: absolute;} 6 .card .img .img1 {left: 527px;} 7 .btn {position: absolute; left: 10px; bottom: 5px;} 8 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url(“resource/images/pagination.png”);} 9 </style> 　　
html预览图片_pdf做成翻页电子书 　　第二步：通过按钮控制将框内的图片向左移动，同时紧贴右框的图片向框内移动，再反之操作来展现图片的左右滑动的特效。 　　1 <script type=”text/javascript”> 2 $(function(){ 3 $(“.btn1”).click(function(){ 4 $(“.img2”).animate({left: “-527px”},”slow”); 5 $(“.img1”).animate({left: “”},”slow”); 6 $(“.btn1”).css(“background-position”,”0 -12px”); 7 $(“.btn2”).css(“background-position”,”0 0″); 8 }); 9 $(“.btn2”).click(function(){ 10 $(“.img2”).animate({left: “”},”slow”); 11 $(“.img1”).animate({left: “527px”},”slow”); 12 $(“.btn2”).css(“background-position”,”0 -12px”); 13 $(“.btn1”).css(“background-position”,”0 0″); 14 }); 15 }); 16 </script> 　　效果： 　　
html预览图片_pdf做成翻页电子书 　　
html预览图片_pdf做成翻页电子书 　　黑框内就是需要展示的图 　　第三步：给素框设置”overflow:hidden”将框外的部分给剪切掉 　　1 <style type=”text/css”> 2 * {margin: 0; padding: 0;} 3 .card {width: 526px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;} 4 .card .img {position: relative;} 5 .card .img img {position: absolute;} 6 .card .img .img1 {left: 527px;} 7 .btn {position: absolute; left: 10px; bottom: 5px;} 8 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url(“resource/images/pagination.png”);} 9 </style> 　　
html预览图片_pdf做成翻页电子书 　　这样，当小圆纽的时候，图片切换就会有左右滑动，图片推图片的效果了。 　　
html预览图片_pdf做成翻页电子书 　　最后附上完整代码： 　　1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ /> 5 <script type=”text/javascript” src=”http://1qaz2wsx.xinbaby.com/resource/js/jquery-1.7.2.min.js”></script> 6 <title>css+javascript图片滑动浏览</title> 7 <link rel=”icon” href=”https://www.cnblogs.com/linxiong945/p/favicon.ico” type=”images/x-icon” /> 8 9 <style type=”text/css”> 10 * {margin: 0; padding: 0;} 11 .card {width: 527px; height: 216px; margin: 100px auto; position: relative; border: 1px solid; overflow: hidden;} 12 .card .img {position: relative;} 13 .card .img img {position: absolute;} 14 .card .img .img1 {left: 527px;} 15 .btn {position: absolute; left: 10px; bottom: 5px;} 16 .btn a { float: left; display: block; width: 12px; height: 12px; margin-left: 5px; background: url(“resource/images/pagination.png”);} 17 </style> 18 19 <script type=”text/javascript”> 20 $(function(){ 21 $(“.btn1”).click(function(){ 22 $(“.img2”).animate({left: “-527px”},”slow”); 23 $(“.img1”).animate({left: “”},”slow”); 24 $(“.btn1”).css(“background-position”,”0 -12px”); 25 $(“.btn2”).css(“background-position”,”0 0″); 26 }); 27 $(“.btn2”).click(function(){ 28 $(“.img2”).animate({left: “”},”slow”); 29 $(“.img1”).animate({left: “527px”},”slow”); 30 $(“.btn2”).css(“background-position”,”0 -12px”); 31 $(“.btn1”).css(“background-position”,”0 0″); 32 }); 33 }); 34 </script> 35 </head> 36 37 <body> 38 <div class=”card”> 39 <div class=”img”> 40 <img class=”img1″ src=”https://www.cnblogs.com/linxiong945/p/resource/images/banner.jpg” alt=”妈咪快集合，心贝新风向”/> 41 <img class=”img2″ src=”https://www.cnblogs.com/linxiong945/p/resource/images/banner3.jpg” alt=”一切为了孩子，为了孩子的一切”/> 42 </div> 43 <div class=”btn”> 44 <a class=”btn1″></a> 45 <a class=”btn2″></a> 46 </div> 47 </div> 48 </body> 49 </html> 　　  　　 

2024最新激活全家桶教程，稳定运行到2099年，请移步至置顶文章：https://sigusoft.com/99576.html

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。 文章由激活谷谷主-小谷整理,转载请注明出处：https://sigusoft.com/81117.html

赞 (0)
0
上一篇 2024年 8月 2日 上午8:32
下一篇 2024年 8月 2日 上午8:39

相关推荐

关注微信