一、让图片飞

代码：<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第三天//基本纯代码的更多相关文章

  1. 猫学习IOS（三）UI纯代码UI——图片浏览器

    猫分享.必须精品 看看效果 主要实现相似看新闻的一个界面,不用拖拽,纯代码手工写. 首先分析app能够非常easy知道他这里有两个UILabel一个UIImageView还有两个UIButton 定义 ...

  2. 纯代码Autolayout的三种方法

    Autolayout讲解较多的就是xib和storyboard用法,本文主要记录纯代码的Autolayout使用方法: 方法1.苹果原生的方法,这种方法虽然简单但是太过繁杂,可用性很差 //宽度=su ...

  3. Masonry -- 使用纯代码进行iOS应用的autolayout自适应布局

    简介 简化iOS应用使用纯代码机型自适应布局的工作,使用一种简洁高效的语法替代NSLayoutConstraints. 项目主页: Masonry 最新示例: 点击下载 项目简议: 如果再看到关于纯代 ...

  4. ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布局

    本文转自 :http://www.cnblogs.com/wendingding/p/3761730.html ios开发UI篇—使用纯代码自定义UItableviewcell实现一个简单的微博界面布 ...

  5. ios - 纯代码创建collectionView

    开始考虑好一点点时间,因为一般的都是用xib,或者storyboard来写的.这次用纯代码...废话较多请看 首先把storyboard干掉,工程里面的main干掉 由于干掉了storyboard则启 ...

  6. IOS之UI--小实例项目--添加商品和商品名（纯代码终结版）

    前言:这个小实例项目是完完全全以MJ视频传授的优化方案一步一个思路从零开始敲出代码的,而且每一步都有思路,都有逻辑所以然.敲代码讲究思路,我个人不建议记忆太多东西,反正我记性很差的. 小贴士:文章末尾 ...

  7. iOS高仿app源码：纯代码打造高仿优质《内涵段子》

    iOS高仿app源码:纯代码打造高仿优质<内涵段子>收藏下来 字数1950 阅读4999 评论173 喜欢133 Github 地址 https://github.com/Charlesy ...

  8. autoLyout纯代码适配

    前言 1 MagicNumber -> autoresizingMask -> autolayout 以上是纯手写代码所经历的关于页面布局的三个时期 在iphone1-iphone3gs时 ...

  9. iOS开发——实战OC篇&环境搭建之纯代码（玩转UINavigationController与UITabBarController）

    iOS开发——实战OC篇&环境搭建之纯代码(玩转UINavigationController与UITabBarController)   这里我们就直接上实例: 一:新建一个项目singleV ...

随机推荐

  1. Ubuntu远程vnc配置

    1. 安装xrdp 使用快捷键"Ctrl+Alt+T"打开一个终端窗口,输入"sudo apt-get install xrdp"-->回车-->输 ...

  2. WPF 线程 Dispatcher

    WPF 应用程序从两个线程开始: 一个用于处理呈现 一个用于管理 UI 呈现线程有效地隐藏在后台运行,而UI线程则接收输入.处理事件.绘制屏幕以及运行应用程序代码. 大多数应用程序都使用一个 UI 线 ...

  3. Java 类初始化顺序

    总的来说: 父类静态代码块->子类静态代码块->子类main()方法->父类构造块->父类构造方法->子类构造块->子类构造方法 注意,就算是静态的方法也需要调用才 ...

  4. xcode 消除警告

    项目中引用大量的第三方代码时,这些代码很复杂,不要轻易去改动它,如果编译产生很多警告,该如何消除呢? 1. 最直接.最一劳永逸.最安全的方式,直接找到警告的那段代码,改为不警告.这个方式最安全. 可是 ...

  5. shane祝大家新年快乐

    后天就要回家过年了,明天好好准备一下,shane祝福大家新年快乐,呵呵.

  6. (分享) git详解

    今天学了下git  http://blog.jobbole.com/78960/   他写的超级好的 之前也弄过,在eclipse上有个关于github的一个插件,可以通过github的仓库地址把ec ...

  7. RAM和ROM总结

    RAM和ROM总结 一.在解释之前先备注一些缩写的全称便于记忆: 1.EPROM:(Electrically Programmable Read-Only-Memory)电可编程序只读存储器 2.EE ...

  8. Spring中文文档

    前一段时间翻译了Jetty的一部分文档,感觉对阅读英文没有大的提高(*^-^*),毕竟Jetty的受众面还是比较小的,而且翻译过程中发现Jetty的文档写的不是很好,所以呢翻译的兴趣慢慢就不大了,只能 ...

  9. Deep Learning模型之：CNN卷积神经网络（一）深度解析CNN

    http://m.blog.csdn.net/blog/wu010555688/24487301 本文整理了网上几位大牛的博客,详细地讲解了CNN的基础结构与核心思想,欢迎交流. [1]Deep le ...

  10. Quartz 之Quartz Cron表达式

    说到这个Quartz了,必不可少的就要说到我们的Triggger触发器,相信大家也都知道,我们在之前也说过了,Trigger又有两个子类,也就是两种方式,分别是:SimpleTrigger和CronT ...