Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

使用radio控件实现无JS的幻灯片效果

  前几天的文章介绍了使用checkbox实现无JS的Switch控件,除了checkbox外我们还有其它很多控件可以使用,比如radio。现在我们就用radio控件和之前同样的手法实现无JS的幻灯片的效果。但遗憾的是暂时无力处理自动切换,只有用户点击才能切换。
  原理和之前基本一致,这篇就不再说明了。下面是代码(兼容到IE9):
<style>
.panel {
  width:200px;height:100px;position:relative;
  border:1px solid #CCC;font:12px/1.25 Verdana;
}
.panel>* {position:absolute;}
.panel>input {display:none;}
.panel>a {
  visibility:hidden;opacity:0;
  will-change:opacity,visibility;
  transition:visibility 200ms ease,opacity 200ms ease;
}
.panel>a {top:0px;right:0px;bottom:0px;left:0px;}
.panel>:checked+a {visibility:visible;opacity:1;}
.panel>a>img {
  position:absolute;margin:auto;
  top:0px;right:0px;bottom:0px;left:0px;
  max-width:100%;max-height:100%;
  border:none;
}
.panel>div {right:8px;bottom:8px;}
.panel>div>label {
  float:left;padding:0px 3px;
  border:1px solid #CCC;
  background:#F5F5F5;
  cursor:pointer;
  margin-left:6px;
}
.panel>div>label:hover {background:#EEE;}
.panel #page1:checked~div label[for=page1],
.panel #page2:checked~div label[for=page2] {
  background:#666;color:#FFF;border-color:#666;
}
</style>
<body>
<form class="panel">
  <input type="radio" name="page" id="page1" checked>
  <a href="http://baidu.com">
    <img src="http://baidu.com/search/img/logo.gif" />
  </a>
  <input type="radio" name="page" id="page2">
  <a href="http://google.cn">
    <img src="http://google.cn/images/logo.png" />
  </a>
  <div>
    <label for="page1">1</label>
    <label for="page2">2</label>
  </div>
</form>

  现在正在研究如何实现无JS的自动切换,并且不耽误鼠标操作,不过貌似还真有点难度。其实这个实现就算补上一点点JS来处理自动滚动也比完全JS实现轻松多了吧。如果大家有更好的实现方式欢迎分享~
网名:
34.203.213.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^