JQ第三天//基本纯代码
一、让图片飞
代码：<script type="text/javascript">
$(function () {
$(document).mousemove(function (e) {
$('#im').css('position', 'absolute').css({ "left": e.pageX, "top": e.pageY });
});
});
</script>
<img src="2.png" id="im" />
二、显示层
$('*').click(function (e) {
alert(e.target.id);
});
三、改变鼠标图片
cursor:url(图片地址);
四、好友面板
$(function () {
$('#u1 li ul li').hide();
$('#u1 li').click(function () {
$('ul li', $(this)).show(500);
$('ul li', $(this).siblings('li')).hide(500);
$('#san').attr('src','音乐的路径');
});
});
<body>
<bgsound id="san" loop="0" src="">
<div style=" width:200px; height:500px; border:1px solid red;">
<ul id="u1" style=" list-style-type:none; margin:0; padding:0; text-align:center;">
<li>
幼儿园同学
<ul>
<li>鼻涕虫</li>
<li>爱哭鬼</li>
<li>张大胆</li>
</ul>
</li>
<li>小学同学
<ul>
<li>张三丰</li>
<li>张无忌</li>
<li>乔布斯</li>
</ul>
</li>
<li>
初中同学
<ul>
<li>盖茨</li>
<li>种哥</li>
<li>奥巴马</li>
</ul>
</li>
</ul>
</div>
</body>
四、层显示的不同效果
$(function () {
$('#btnslideDown').click(function () {
$('div').slideDown(500);
});
$('#btnslideUp').click(function () {
$('div').slideUp(500);
});
$('#btnslideToggle').click(function () {
$('div').slideToggle(500);
});
//=======================
$('#btnfadeIn').click(function () {
$('div').fadeIn(1000);
});
$('#btnfadeOut').click(function () {
$('div').fadeOut(1000);
});
$('#btnfadeToggle').click(function () {
$('div').fadeToggle(500);
});
});
body>
<input type="button" name="name" value="slideDown" id="btnslideDown" />
<input type="button" name="name" value="slideUp" id="btnslideUp" />
<input type="button" name="name" value="slideToggle" id="btnslideToggle" />
<input type="button" name="name" value="fadeIn" id="btnfadeIn" />
<input type="button" name="name" value="fadeOut" id="btnfadeOut" />
<input type="button" name="name" value="fadeToggle" id="btnfadeToggle" />
<div style=" width:300px; height:200px; ">
</div>
</body>
五、新闻面板
$(function () {
$('#dvTab div:gt(0)').hide();
$('#uu1 li').mouseover(function () {
var tt = $(this).text();
switch (tt) {
case '新闻': $('#dvNews').show().siblings('div').hide(); break;
case '图片': $('#dvPic').show().siblings('div').hide(); break;
case '深度': $('#dvDeep').show().siblings('div').hide(); break;
case '军事': $('#dvMl').show().siblings('div').hide(); break;
}
});
});
六、动画
代码： <script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('img').animate({ "left": "55px", "top": "500px", "width": "50px", "height": "50px" }, 3000).animate({ "left": "+=800px", "top": "-=500px" }, 2000);
});
});
</script>
<body>
<input type="button" name="name" value="飞起来" id="btn" />
<img src="2.png" style=" position:absolute;" />
</body>
七、cookie保存账号密码//google不支持本地cookie
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.cookie.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
if ($.cookie('userName')==null ) {
$('span').text('欢迎菜鸟登录');
} else {
$('span').text('欢迎'+$.cookie('userName')+'登录');
}
$('#btn').click(function () {
$.cookie('userName', $('#txt').val());
});
});
</script>
span>欢迎菜鸟登录</span>
<input type="text" name="name" value="" id="txt" />
<input type="button" name="name" value="记住密码" id="btn" />
八、高清图片//jqzoom插件
<script src="jquery-1.8.3.js" type="text/javascript"></script>
<script src="jquery.jqzoom-core.js" type="text/javascript"></script>
<link href="jquery.jqzoom.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function () {
$('.MYCLASS').jqzoom();
});
</script>
<a class="MYCLASS" title="MYTITLE" href="triumph_big1.jpg">
<img title="IMAGE TITLE" src="thumbs/triumph_thumb1.jpg">
</a>
