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>
JQ第三天//基本纯代码的更多相关文章
- 猫学习IOS（三）UI纯代码UI——图片浏览器
猫分享.必须精品 看看效果 主要实现相似看新闻的一个界面,不用拖拽,纯代码手工写. 首先分析app能够非常easy知道他这里有两个UILabel一个UIImageView还有两个UIButton 定义 ...
- 纯代码Autolayout的三种方法
Autolayout讲解较多的就是xib和storyboard用法,本文主要记录纯代码的Autolayout使用方法: 方法1.苹果原生的方法,这种方法虽然简单但是太过繁杂,可用性很差 //宽度=su ...
- Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局
简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...
- ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局
本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...
- ios - 纯代码创建collectionView
开始考虑好一点点时间,因为一般的都是用xib,或者storyboard来写的.这次用纯代码...废话较多请看 首先把storyboard干掉,工程里面的main干掉 由于干掉了storyboard则启 ...
- IOS之UI--小实例项目--添加商品和商品名（纯代码终结版）
前言:这个小实例项目是完完全全以MJ视频传授的优化方案一步一个思路从零开始敲出代码的,而且每一步都有思路,都有逻辑所以然.敲代码讲究思路,我个人不建议记忆太多东西,反正我记性很差的. 小贴士:文章末尾 ...
- iOS高仿app源码：纯代码打造高仿优质《内涵段子》
iOS高仿app源码:纯代码打造高仿优质<内涵段子>收藏下来 字数1950 阅读4999 评论173 喜欢133 Github 地址 https://github.com/Charlesy ...
- autoLyout纯代码适配
前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时 ...
- iOS开发——实战OC篇&环境搭建之纯代码（玩转UINavigationController与UITabBarController）
iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController) 这里我们就直接上实例: 一:新建一个项目singleV ...
随机推荐
- python之路三
集合 set拥有类似dict的特点:可以用{}花括号来定义:其中的元素没有序列,也就是是非序列类型的数据;而且,set中的元素不可重复,这就类似dict的键. set也有继承了一点list的特点:如可 ...
- redis cluster php 客户端 predis
php有redis的扩展,目前来说,还不支持redis cluster,推荐一下predis,功能比较全,从单个,到主从,到cluster都是支持的.效率怎么样,要靠自己去测试一下. 1,下载pred ...
- java1
1:计算机概述(了解) (1)计算机 (2)计算机硬件 (3)计算机软件 系统软件:window,linux,mac 应用软件:qq,yy,飞秋 (4)软件开发(理解) 软件:是由数据和指令组成的.( ...
- VS中批注的使用
SAL 是 Microsoft 源代码注释语言. 使用源代码批注,可以使代码背后的意图更加清晰. 这些注释还可以使用自动化的静态分析工具更准确地分析代码,显著减少误判.那么什么是批注,举个简单的例子, ...
- Ubuntu配置svn
http://www.cnblogs.com/arrongao/archive/2013/03/30/linux_svn.html
- linq 的switch实现
List<RemindSend> lrs = (from a in db.Remind join b in db.Certified on a.certifiedId equals b.C ...
- Javascript函数重载，存在呢—还是存在呢？
1.What's is 函数重载? );//Here is int 10 print("ten");//Here is string ten } 可以发现在C++中会根据参数的类型 ...
- Android 自定义View合集
自定义控件学习 https://github.com/GcsSloop/AndroidNote/tree/master/CustomView 小良自定义控件合集 https://github.com/ ...
- html学习第二天—— 第八章—— CSS选择器
标签选择器其实就是html代码中的标签.如右侧代码编辑器中的<html>.<body>.<h1>.<p>.<img>.例如下面代码:p{fo ...
- 使用代理和block写一个alertView
代理: MyAlertView.h: @property (nonatomic,assign)id delegate; @protocol MyAlertViewDelegate <NSObje ...