<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>小例子</title> <script type="text/javascript" src="js/jquery.js"></script> <style> @charset "utf-8"; /* CSS Document */ #main { margin-top: 20px; } * { margin: 0; padding: 0; word-wrap: break-word; } a { text-decoration: none; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } a.underline:hover { text-decoration: underline; } a img { border: none; } body { margin: 0px; padding: 0px; position: relative; } body, td, div, a, li, form { color: #391f0e; line-height: 20px; font-family: Arial, "Microsoft yahei" } div, form, p, img, ul, ol, li, dl, dt, dd, button, input { margin: 0px; padding: 0px; font-size: 12px; } li { list-style: none; } /*table{font-size: 13px;}*/ .clear { clear: both !important; width: 0px !important; height: 0px !important; line-height: 0px !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; float: none !important; position: static !important; background: none !important; } /* For IE 6/7 (trigger hasLayout) */ .fl { float: left; } .fr { a float : right ; } .block { the display : Block Important! ; } .box { width : 100% ; margin : 0 Auto ; height : Auto ; } .W { width : 1000px ; margin : 0 Auto ; } / * General Style end * / .a_a { height: 500px; overflow: hidden; position: relative; } .a_b { height: 500px; width: 5000px; transition: width 1s, height 1s, transform 1s; -moz-transition: width 1s, height 1s, -moz-transform 1s; -webkit-transition: width 1s, height 1s, -webkit-transform 1s; -o-transition: width 1s, height 1s, -o-transform 1s; } .a_c { width: 1000px; height: 500px; } .left { background: url(../img/064.png) no-repeat; height: 60px; width: 60px; background-size: 100% 100%; position: absolute; top: 250px; left: 370px; } .left:hover { cursor: pointer; } .right:hover { cursor: pointer; } .right { background: url(../img/063.png) no-repeat; height: 60px; width: 60px; background-size: 100% 100%; position: absolute; top: 250px; left: 1500px; } </style> </head> <body> <div class="box"> <div class="w a_a"> <div class="a_b"> <div class="a_c fl" style="background-color: gray;"></div> <div class="a_c fl" style="background-color: darkmagenta"></div> <div class="a_c fl" style="background-color: blue;"></div> <div class="a_c fl" style="background-color: green;"></div> <div class="a_c fl" style="background-color: paleturquoise;"></div> <div class="clear"></div> </div> </div> <div class="left"></div> <div class="right"></div> </div> <script> $(function() { $('.left').click( function() { var a = $('.a_b').attr(' ID ' ) .substr ( 1 , . 4 ); // substr string taken from the start position of index 1, taken four strings taken Alert (A); IF (A =! 0 ) { var E = A - 1000 ; $ ( ' .a_b ' ) .attr ( ' ID ' , - E); $ ( ' .a_b ' ) .css ( " Transform " , " Translate (- " + E+ "px)"); } } ) $('.right').click( function() { var a = $('.a_b').attr('id'); if(a != -4000) { var e = a - 1000; $('.a_b').attr('id', e); $('.a_b').css("transform", "translate(" + e + "px)"); } } ) }) </script> </body> </html>
jquery tab to switch to write:
$(function() { $('.about-5-1>div').click( function() { var i = $(this).index(); //定义变量i 为当前对象的索引。 $(this).parent().siblings('div').hide(); if(i == 0) { $(this).parent().siblings('.about-5-2').show(); $(this).addClass("current").siblings().removeClass("current"); } if(i == 1) { $(this).parent().siblings('.about-5-3').show(); $(this).addClass("current").siblings().removeClass("current"); } if(i == 2) { $(this).parent().siblings('.about-5-4').show(); $(this).addClass("current").siblings().removeClass("current"); } if(i == 3) { $(this).parent().siblings('.about-5-5').show(); $(this).addClass("current").siblings().removeClass("current"); } } ) })