<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery和CSS的拍摄效果</title>
    <style>
        body,h1,h2,h3,p,quote,small,form,input,ul,li,ol,label{margin:0;padding:0}body{color:#fcfcfc;font-size:.825em;background-color:#011d2e;font-family:Arial,Helvetica,sans-serif}#main{margin:0 auto;width:960px;height:600px}.shot{border:3px solid #fcfcfc;float:right;position:relative;margin-left:10px;overflow:hidden;-moz-box-shadow:0 0 2px #000;-webkit-box-shadow:0 0 2px #000;box-shadow:0 0 2px #000}.shot img{display:block}.album{bottom:50px;height:110px;overflow:hidden;position:absolute;right:20px;width:490px}.album .slide{width:700px;height:110px;position:relative;left:-210px}
        .container{overflow:hidden;cursor:url(http://www.jq22.com/demo/photo/photoShoot/blank.cur),default;position:relative}.container.googleChrome{cursor:url(http://www.jq22.com/demo/photo/photoShoot/blank_google_chrome.cur),default}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000}.viewFinder{position:absolute;top:0;left:0}.blur{position:absolute;top:0;left:0}
    </style>
</head>
<body>

<div id="main"></div>

<script src="https://lib.baomitu.com/jquery/1.4.2/jquery.min.js"></script>
<script src="http://www.jq22.com/demo/photo/photoShoot/jquery.photoShoot-1.0.js"></script>
<script>
    $(document).ready(function() {
        var main = $('#main');
        main.width(Math.min(1024, $(document).width()));
        var pics = new Array({
                url: '/images/index/t.jpg',
                size: {
                    x: 1024,
                    y: 768
                }
            },
            {
                url: '/images/index/t.jpg',
                size: {
                    x: 1024,
                    y: 768
                }
            },
            {
                url: '/images/index/t.jpg',
                size: {
                    x: 1024,
                    y: 768
                }
            },
            {
                url: '/images/index/t.jpg',
                size: {
                    x: 1158,
                    y: 756
                }
            });
        var bg = pics[parseInt(Math.random() * 4)];
        var opts = {
            image: bg.url,
            onClick: shoot,
            opacity: 0.8,
            blurLevel: 4
        }
        main.photoShoot(opts);
        $('<div class="album">').html('<div class="slide" />').appendTo(main);
        function shoot(position) {
            main.find('.overlay').css('background-color', 'white');
            setTimeout(function() {
                    main.find('.overlay').css('background-color', '')
                },
                100);
            var newShot = $('<div class="shot">').width(150).height(100);
            newShot.append($('<img src="' + bg.url + '" width="' + (bg.size.x / 2) + '" height="' + (bg.size.y / 2) + '" />').css('margin', -position.top * 0.5 + 'px 0 0 -' + position.left * 0.5 + 'px'));
            $('.shot').eq(3).remove();
            newShot.css('margin-right', -160).prependTo('.album .slide').animate({
                    marginRight: 0
                },
                'slow');
        }
    });
</script>
</body>
</html>

jQuery和CSS的拍摄效果的更多相关文章

  1. jQuery属性/CSS使用例子

    jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...

  2. jquery的css详解（二）

    jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...

  3. jquery的css详解（一）

    通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...

  4. jquery修改css样式，样式带!important

    由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...

  5. 使用jquery修改css中带有!important的样式属性

    当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...

  6. jquery和css自定义video播放控件

    下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...

  7. 在线运行Javascript,Jquery,HTML,CSS代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...

  8. JQuery：JQuery操作CSS类

    JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...

  9. jQuery和CSS 3定制HTML 5视频播放器

    目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...

随机推荐

  1. 萌新笔记之堆(heap)

    前言(萌新感想): 以前用STL的queue啊stack啊priority_queue啊,一直很想懂原理,现在终于课上到了priority_queue,还有就是下周期中考,哈哈,所以写几篇blog总结 ...

  2. 洛谷P4884 多少个1？（BSGS）

    传送门 模数好大……__int128好麻烦……而且BSGS第一次写有点写蒙了…… $11...1(N个1)\equiv k(mod m)$很难算,那么考虑转化一下 先把$11...1(N个1)$写成$ ...

  3. [Xcode 实际操作]一、博主领进门-(8)应用代理文件(AppDelegate.swift)详解

    目录:[Swift]Xcode实际操作 本文将演示使用iOS模拟器,演示程序的生命周期. 在项目导航区,打开应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面 ...

  4. iOS开发 - 多线程实现方案之NSOperation篇

    NSOperation简介 1.实现多线程编程步骤: 配合使用NSOperation和NSOperationQueue实现多线程编程,我们不用考虑线程的生命周期.同步.加锁等问题,如下: 先将需要执行 ...

  5. vue 生命周期钩子函数

    实例中的生命周期钩子可以分为以下8种情况: beforeCreate: 实例刚被创建,vue所有属性都还不存在 created: 实例创建完成,但$el还不存在 beforeMount:挂载之前 mo ...

  6. JAVA 7新特性——在单个catch代码块中捕获多个异常，以及用升级版的类型检查重新抛出异常

    在Java 7中,catch代码块得到了升级,用以在单个catch块中处理多个异常.如果你要捕获多个异常并且它们包含相似的代码,使用这一特性将会减少代码重复度.下面用一个例子来理解. Java 7之前 ...

  7. 浅谈H5技术

    1.什么是H5:HTML5将成为HTML.XHTML以及HTML  DOM的新标准.目前仍处于完善之中.然而,大部分现代浏览器已经具备了某些HTML5支持. 2.背景:HTML5 是 W3C 与 WH ...

  8. O(nlogn)求逆序数对的个数

    #include<iostream> #include<stdio.h> #include<string.h> #include<algorithm> ...

  9. 命令行视频下载工具 you-get 和 youtube-dl

    you-get 和 youtube-dl 都是基于 Python 的命令行媒体文件下载工具,完全开源免费跨平台.用户只需使用简单命令并提供在线视频的网页地址即可让程序自动进行嗅探.下载.合并.命名和清 ...

  10. 利用apache限制IP并发数和下载流量控制

    一,为什么要对IP并发数,下载流量进行控制 说正题之前,先给大家讲个故事,那是在2007年,我进了一家公司,当时我们正在给达芙妮做电子商务网,www.idaphne.com.从三月份开始做的吧,九月份 ...