JavaScript implementiert die Erzeugung von Spezialeffekten für ausgewählte Boxen-js-Tutorial-php.cn

JavaScript implementiert die Erzeugung von Spezialeffekten für ausgewählte Boxen

巴扎黑

Freigeben： 2017-08-22 11:06:19

Original

1521 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die JS-Implementierung des Hinzufügens eines Rahmenanzeigeeffekts zum Kontrollkästchen im Formular. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Hier wird JavaScript verwendet, um den Kontrollkästchen-Auswahleffekt, den Kontrollkästchen-Effekt im Formular, die Check-Check-Effektsimulation und den durch die Kombination von JS und erzielten Verschönerungseffekt zu realisieren HTML5. Es scheint im Moment ein beliebter Effekt zu sein!

Der Screenshot des Laufeffekts lautet wie folgt:

JavaScript implementiert die Erzeugung von Spezialeffekten für ausgewählte Boxen

Der spezifische Code lautet wie folgt:

<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; chaRset=gb2312" />
<title>JS实现单个图片选中美化框</title>
<style type="text/css">
body, p, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, 
legend, input, button, textarea, blockquote, th, td, p { margin:0; padding:0 }
input, button, select, textarea { outline:none }
li { list-style:none }
img { vertical-align:top; border:none }
textarea { resize:none }
body { width:auto; height:auto; padding:0; margin:0; color: #666; background: #FFF; }
body, input, textarea { font-size:12px; font-family:Arial, Verdana, "Microsoft Yahei", Simsun }
a{cursor:pointer}
a:link{color:#37a;text-decoration:none}
a:visited{color:#669;text-decoration:none}
a:hover{color:#fff;text-decoration:none;background:#37a}
a:active{color:#fff;text-decoration:none;background:#f93}
.clear { clear:both }
.clearfix:after{ content:"."; display:block; font-size: 0; height:0; clear:both; visibility:hidden }
.clearfix{ zoom:1}
#radio_wrap{width: 916px; margin: 50px auto 0;font-size: 0;*word-spacing:-1px;}
@media screen and (-webkit-min-device-pixel-ratio:0){
#radio_wrap{letter-spacing:-4px;}}
#radio_wrap input{display: none;}
#radio_wrap li{position:relative; width: 223px; height: 259px; border: 1px solid #CCC; display:inline-block; *display:inline; *zoom:1; margin:0 2px;}
#radio_wrap li.checked{border:2px solid red;margin:-1px 1px;}
#radio_wrap li.checked i{width:30px; height:30px; position:absolute; right:0; bottom:0;_right:-1px; _bottom:-1px;background:url(images/checked.gif) no-repeat;}
</style>
</head>
<body>
<p id="radio_wrap">
 <ul>
 <li class="c checked">
  <input type="radio" id="radio_a_01" name="radio_a" />
  <label for="radio_a_01"><img src="images/taobao2.jpg" alt="" disabled/></label>
  <i></i>
 </li>
 <li class="c">
  <input type="radio" id="radio_a_02" name="radio_a" />
  <label for="radio_a_02"><img src="images/taobao2.jpg" alt="" disabled/></label>
  <i></i>
 </li>
 </ul>
</p>
<script type="text/javascript">
(function() {
 var radioWrap = document.getElementById("radio_wrap"),
 li = radioWrap.getElementsByTagName("li");
 for(var i = 0; i < li.length; i++){
 li[i].onclick = function() {
  for(var i = 0; i < li.length; i++){
  li[i].className = "";
  }
  this.className = "checked";
 }
 }
})();
</script>
<p style="text-align:center;clear:both"><br>
</p>
</body>
</html>

Nach dem Login kopieren

Ich hoffe, dieser Artikel wird allen bei der Javascript-Programmierung helfen.

Das obige ist der detaillierte Inhalt vonJavaScript implementiert die Erzeugung von Spezialeffekten für ausgewählte Boxen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!