jQuery布局、jQuery效果

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery布局</title>
<style>
div {
width: 300px;
height: 300px;
border: 8px solid red;
padding: 0;
margin: 50px;
}
</style>
</head>
<body>
<div>
中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文
</div>
<button>获取位置</button>
<script src="jquery.js"></script>
<script>
var div = document.querySelector('div')
var btn = document.querySelector('button')
btn.onclick = function () {
console.log(div.clientWidth)
}
console.log($('div').height())
console.log($('div').width())
console.log($('div').innerHeight())
console.log($('div').innerWidth())
console.log($('div').outerHeight())
console.log($('div').position())
// 相对于父元素的偏移
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery效果</title>
<style>
div {
margin: 3px;
width: 40px;
height: 40px;
position: absolute;
left: 0px;
top: 30px;
background: green;
display: none;
}
div.newcolor {
background: blue;
}
span {
color: red;
}
</style>
</head>
<body>
<h1>jQuery效果</h1>
<small>测试专用小标签</small>
<ul>
<li>第1项</li>
<li>第2项</li>
<li>第3项</li>
<li>第4项</li>
<li>第5项</li>
</ul>
<button id="show">Show Length of Queue</button>
<span></span>
<div></div>
<button id="ff">fff</button>
<script src="jquery.js"></script>
<script src="jqueryColor.js"></script>
<script src="index.js"></script>
</body>
</html>

$('ul').click(function () {
// $('ul,small').toggle(5*1000,function () {
// alert($(this).text() + '动画完成')
// })
// $('ul,small').fadeToggle(5*1000,function () {
// alert($(this).text() + '动画完成')
// })
// $('ul,small').fadeTo(5*1000,0.5,'linear',function () {
// alert($(this).text() + '动画完成')
// })
// $('ul,small').fadeTo(5*1000,0.5,'linear',function () {
// alert($(this).text() + '动画完成')
// })
// $('ul,small').slideToggle(5*1000,'linear',function () {
// alert($(this).text() + '动画完成')
// })
// 自定义动画及链式动画
// 使用Jquery.color.js插件支持颜色动画
var coords = $('ul').offset()
// animate()方法执行css属性集的自定义动画
// $('ul').css('position','absolute').animate({
// 'left':400,
// 'line-height':32,
// 'color':'blue'
// },5*1000).animate({
// top:500,
// lineHeight:'120%',
// color:'red'
// },3*1000).animate({
// left:coords.left,
// top:coords.top,
// lineHeight:'1.5rem',
// color:'#000'
// },4*1000)
// $('ul').css('position','absolute')
// .fadeTo(3*1000,0.3)
// .animate({
// left:'+=100',
// widht:['toggle','swing'],
// height:['toggle','linear']
// // left:300
// },3*1000)
// delay方法延迟动画
// $('ul').slideToggle(2*1000)
// .delay(3*1000)
// .slideToggle(2*1000)
// var color = 'red'
// function changeColor(){
// $('ul').animate({
// backgroundColor:color,
// },1000,function(){
// color = $.Color(color)
// color = color.hue(color.hue() +60)
// changeColor()
// })
// }
// changeColor()
// $('ul').css('position','absolute').animate({
// left:300,
// color:'blue'
// },10*1000,function () {
// alert('left动画完成')
// }).animate({
// top:400,
// },5*1000,function(){
// alert('top动画完成')
// })
})
// $(':header').click(function(){
// console.log('ffffff')
// // $('ul').stop(true,true)
// // $('ul').finish()
// })
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:'+=200'},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:'-=200'},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").dequeue()
// $("div").slideUp("normal", runIt);
}
$('#ff').click(function(){
runIt();
})

jQuery布局

jQuery效果

发送评论 编辑评论

推荐文章

发送评论编辑评论