这篇文章主要介绍了使用css实现图片滑动效果的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
下面给大家举一个简单的css图片滑动效果示例(自下而上滑动):
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css怎么实现图片滑动</title> <style type="text/css"> img{ height: 200px; width: 200px; } .slider { overflow-y: hidden; max-height: 500px; /* 最大高度 */ background: pink; height: 200px; width: 200px; /* Webkit内核浏览器:Safari and Chrome*/ -webkit-transition-property: all; -webkit-transition-duration: .5s; -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Mozilla内核浏览器:firefox3.5+*/ -moz-transition-property: all; -moz-transition-duration: .5s; -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* Opera*/ -o-transition-property: all; -o-transition-duration: .5s; -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); /* IE9*/ -ms-transition-property: all; -ms-transition-duration: .5s; -ms-transition-timing-function: cubic-bezier(0, 1, 0.5, 1); } .slider.closed { max-height: 0; } </style> </head> <body> <div style="height: 200px; width: 200px; border: 1px solid #ccc;"> <div class="slider" id="slider"> <img src="2.png"> </div> </div> <button onclick="document.getElementById('slider').classList.toggle('closed');">点击试试</button> </body> <html>
上述代码可直接复制在本地测试效果如下图:
只要鼠标点击下面的按钮,就会出现图片自下而上的滑动效果。其中有一个onclick 属性,由元素上的鼠标点击触发,即当点击按钮时执行一段 JavaScript。
注释:onclick 属性不适用以下元素:<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style> 或 <title>。
感谢你能够认真阅读完这篇文章,希望小编分享使用css实现图片滑动效果的方法内容对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,遇到问题就找亿速云,详细的解决方法等着你来学习!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。