<!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 { float: right; } .block { display: block !important; } .box { width: 100%; margin: 0 auto; height: auto; } .w { width: 1000px; margin: 0 auto; } /*通用样式结束*/ .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 截取字符串 从索引1的位置开始截取 截取4个字符串 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切换：
$(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"); } } ) })
用jquery给html中添加li元素：
<script>
//用jquery给html中添加li元素
var $a1= $("<li>香蕉</li>");
var $a2= $("<li>雪梨</li>");
$("ul").append($a1);
$("ul").append($a2);
</script>
还可以用jquery给html中删除html的元素:
替换html的元素。
//用jquery给html元素包裹上元素
$("div").wrap("<a href=''></a>");
//用jquery设置html元素属性 $(".a").attr("title","your name");
//用jquery删除html元素的属性 $(".a").removeAttr("title");
//用jquery给html元素追加样式 $(".a").addClass("on")
//jquery的val()方法使select(下拉列表框)，checkbox（多选框），radio（单选框）相应的选项被选中。 <div class="box" style=" 1000px; height: 500px;"> <select id="single"> <option>选择一号</option> <option>选择二号</option> <option>选择三号</option> </select> <script> $("#single").val("选择二号"); </script> </div>
//jquery的next()方法
$(".a").next() 方法用于取匹配元素后面紧邻的同辈元素。
//jquery的prev()方法
$(".a").prev() 方法用于取匹配元素前面紧邻的同辈元素。
//取得匹配元素前后所有的同辈元素 $(".a").siblings()
//用jquery设置样式 $(".a").css("color","red");
//获取滚动条距离顶部的距离 $(".a").scrollTop();
当在元素上点击时调用第一个指定函数，当再次点击时调用第二个函数，以此类推。
//当鼠标放上显示内容，鼠标离开内容隐藏。
$(".a_b").hover(function(){ $(this).next().show(); },function(){ $(this).next().hide(); });
两种写法：
$(".a_b").hover(
function(){$(this).next().show();},
function(){$(this).next().hide();}
);
//鼠标点击时显示，再点击时隐藏。 $(function(){ $(".a_b").click(function(){ $(this).next().slideToggle(); }); });