jQuery和CSS的拍摄效果
<!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的拍摄效果的更多相关文章
- jQuery属性/CSS使用例子
jQuery属性/CSS 1..attr() 获取匹配的元素集合中的第一个元素的属性的值 或 设置每一个匹配元素的一个或多个属性. 例1:获取元素的属性的值 <p title="段落 ...
- jquery的css详解(二)
jq的工具方法style用于设置样式,jq的实例方法css在设置样式时就是调用的它,接下来分析一下源码. jQuery.extend({ ............................ st ...
- jquery的css详解(一)
通过阅读源码可以发现css是jq的实例方法.而在内部调用jq的工具方法access来实现的,对该方法不了解的朋友请点击 -> jquery工具方法access详解 在access的回调中做了一个 ...
- jquery修改css样式,样式带!important
由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方 ...
- 使用jquery修改css中带有!important的样式属性
当CSS中含有!important的样式属性时,普通的修改方式是会出现失败的.如下: <div class="test">使用jquery修改css中带有!import ...
- jquery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
- 在线运行Javascript,Jquery,HTML,CSS代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" http://www.w3.org/TR/xht ...
- JQuery:JQuery操作CSS类
JQuery:CSS类jQuery - 获取并设置 CSS 类,通过 jQuery,可以很容易地对 CSS 元素进行操作.jQuery 操作 CSSjQuery 拥有若干进行 CSS 操作的方法.我们 ...
- jQuery和CSS 3定制HTML 5视频播放器
目前,随着越来越多的浏览器开始支持更多的HTML5新特性,开发者也逐渐关注HTML5的开发.在众多HTML5的新特性中,视频方面的新特性是 很值得开发者和用户关注的.现在,只需要有支持HTML5的浏览 ...
随机推荐
- POJ1182【种类并查集】
思路: ---来源百度 0表示它与根结点为同类, 1表示它吃根结点, 2表示它被根结点吃. 判断两个点a, b的关系,我们令p = Find(a), q = Find(b),即p, q分别为a, b子 ...
- lightoj1047 【简单线性DP】
因为写不出hdu3401...好像要用单调队列优化...这边水了一个... 题意: 给n个房子涂色,给出n个房子对应颜色的花费,问涂完所有颜色花费最少. 保证相邻房子颜色不能相同. 思路: dp[i] ...
- vant搜索框问题
最近使用vant搜索框时发现,当输入内容点击一次搜索有数据,点击错号把内容去掉再点击搜索,都没进入点击搜索方法. 解决方法:把bindtop改成bindtouchstart <van-searc ...
- 区间质数查询 luoguP1865
原题 https://www.luogu.org/problemnew/show/P1865 本来get到了一个很好的判断素数的方法 O(玄学常数)https://www.luogu.org/blog ...
- (十三)SpringBoot 发送E-mail
一:添加mail依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId ...
- iOS集成支付宝支付
本文由本人原创发表于博客园,转载请注明出处 http://www.cnblogs.com/wangqw/p/5074907.html 一. 开发前准备 iOS 支付宝SDK下载地址:(内含iOS An ...
- vs 对网站和项目使用IIS Express 的64位版
- 【bzoj1123】BLO
1123: [POI2008]BLO Time Limit: 10 Sec Memory Limit: 162 MBSubmit: 2222 Solved: 1090[Submit][Status ...
- H5 之 Page Visibility
这个是今天刚发现的,想起之前那个在页面用video标签视频播放,别人切换页面后仍在继续播放,体验很不好,用这个API就可以很完美的解决. Page Visibility API 可以让你获取到这种状态 ...
- 基于.net core封装的xml序列化,反序列化操作
需求: 由于在.net core中去除了Xml序列化XmlSerializer操作类.因此,在于一此数据传输当中出,需要用到对xml格式字符串的处理问题.因此封装了一个xml序列化与反序列化操作的类库 ...