response slider
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="Scripts/jquery-ui-1.10.4.custom.js"></script>
<style>
html, body, img, ul, p {
margin: 0;
padding: 0;
} body {
} .content {
position: fixed;
height: 100%;
width: 100%;
} .img {
height: 100%;
width: 100%;
position: relative;
} .img img {
position: absolute;
top: 50%;
left: 50%;
} .info {
position: fixed;
z-index: 999;
background: #000;
color: #fff;
left: 50%;
top: 50%;
} .super-slider {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
position: relative;
overflow: hidden;
} .super-slider .super-content li {
display: block;
height: 100%;
width: 100%;
overflow: hidden;
position: absolute;
} .super-slider .super-content li img {
width: 100%;
border: 0;
} .super-content li > span {
position: absolute;
line-height: 1.5;
background: rgba(0,0,0,0.5);
bottom: 12px;
left: 0;
color: #fff;
padding: 0px;
width: 100%;
z-index: 999;
} .sp-slider-text {
padding: 20px;
display: block;
} .super-nav {
width: 20px;
display: block;
position: absolute;
right: 20px;
top:45%;
z-index: 999;
} .super-nav li {
list-style: none;
display: block;
height: 20px;
width:20px;
background: #ccc;
border-radius:50%; margin:5px; } .super-nav li:hover {
background: #aaa !important;
} .super-nav li.selected {
background: #aaa;
} .super-nav li:last-child {
border-right: 0;
}
</style> <script> ; (function ($) {
"use strict"
$.fn.superSlider = function (options) { var setting = $.extend({
bars: ".super-nav",
items: ".super-content li",
speed: 3000
}, options); var $_self = this,
$items = $(setting.items, $_self),
$bars = $(setting.bars, $_self),
count = 0,
sliterTimer = null,
bars = [],
itemCount = $items.length,
width = $(window).width(); for (var i = 0 ; i < itemCount; i++) {
bars.push("<li></li>");
} $bars.html(bars.join(" "));
var $barItems = $bars.find("li"); $barItems.eq(0).addClass("selected");
$items.css({ left: width }).eq(0).css({ left: 0 }); var _start = function () {
sliterTimer = setInterval(function () { console.log(count);
$barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)'); $items.eq(count % itemCount).removeClass("selected").stop().animate({
left: -$(window).width()
}, function () {
$items.css({ left: $(window).width(), "z-index": -1 }); var next = count % itemCount;
if (next == itemCount - 1) next = 0;
$items.eq(next).css({ "z-index": 1 });
}); $barItems.eq(count % itemCount).removeClass("selected").stop().animate({
backgroundColor: "rgba(220, 142, 34, 0.5)"
}); count++; $items.eq(count % itemCount).css({ "z-index": 1 }).addClass("selected").stop().animate({
left: 0
}); $barItems.eq(count % itemCount).addClass("selected").stop().animate({
backgroundColor: "rgba(220, 142, 34,1)"
}); count = count % 100; }, setting.speed);
} var _stop = function () {
window.clearInterval(sliterTimer);
sliterTimer = null;
} $barItems.on("click", function () { if (count == $(this).index()) return; $barItems.siblings().css('background-color', 'rgba(220, 142, 34,0.5)');
$(this).css('background-color', 'rgba(220, 142, 34,1)');
count = $(this).index();
var next = count + 1;
if (next == itemCount) next = 0;
$items.siblings().css("z-index", "-1");
$items.eq(next).css("z-index", "99"); $items.each(function (i) {
if (i != count) {
$items.eq(i).stop().animate({
left: -$(window).width()
}, 300, function () {
$(this).css({ left: $(window).width() });
});
}
}); $items.eq(count).stop().animate({
left: 0
}, 300); }); $_self.start = _start;
$_self.stop = _stop;
$barItems.on("mouseenter", _stop).on("mouseleave", _start);
return this;
}; })(jQuery); ; (function ($) {
"use strict"
$.fn.responseImg = function (options) { var _cfg = $.extend({
width: 1920,
height: 1080
}, options); return this.each(function () { var $_self = $(this),
winWidth = $(window).width(),
winHeight = $(window).height(); var _resetImgSize = function () { winWidth = $(window).width();
winHeight = $(window).height(); var winWH = winWidth / winHeight;
var imgWH = _cfg.width / _cfg.height; if (winWH > imgWH) {
$_self.width(winWidth);
$_self.height(winWidth * _cfg.height / _cfg.width);
} else {
$_self.height(winHeight);
$_self.width(winHeight * _cfg.width / _cfg.height);
} var imgH = $_self.height();
var imgW = $_self.width(); $_self.css({ "margin-top": (-(imgH) / 2) + "px" });
$_self.css("margin-left", (-(imgW - 10) / 2) + "px"); $(".info").text(winWidth + "----" + winHeight + "dddd"); }; $(window).resize(_resetImgSize); $_self.resize = _resetImgSize; }); };
})(jQuery); $(function () { $("img").responseImg({
width: 1920,
height: 1080,
selector: 'img1'
}).resize(); $(".super-slider").superSlider({ speed: 3000 }).start(); });
</script>
</head>
<body>
<div id="info" class="info">
asdasd
</div>
<div class="content">
<div class="img">
<div class="super-slider">
<ul class="super-nav">
<li></li>
<li></li>
<li class="selected"></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul class="super-content">
<li>
<span><span class="sp-slider-text">This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.This is a content.</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide1.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.2</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide2.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.3</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide3.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.4</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide4.jpg" />
</li>
<li>
<span><span class="sp-slider-text">This is a content.6</span></span>
<img src="http://creativewebsites.me/pageAnimate/images/slide6.jpg" />
</li>
</ul>
</div>
</div>
</div> </body>
</html>
response slider的更多相关文章
- 网络编程---(数据请求+slider)将网络上的大文件下载到本地，并打印其进度
网络编程---将网络上的大文件下载到本地,并打印其进度. 点击"開始传输"button.将网络上的大文件先下载下来,下载完毕后,保存到本地. UI效果图例如以下: watermar ...
- Response.Redirect引起的性能问题分析
现象: 最近做的一个系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到该系统的不同模块.而跳转的时间一直维持子啊几分钟左右. 分析步骤: 在问题复现时抓取Hang d ...
- windows charles response 乱码解决办法
使用windows 版本的charles来做代理,发现服务端返回的response会出现中文乱码的情况, 查看软件设置,遗憾的是并没有关于编码的选项. 好在charles windows版本安装目录下 ...
- 谈一谈Http Request 与 Http Response
写在前面的话:今天来总结一下http相关的request和response,就从以下几个问题入手吧. ======正文开始======== 1.什么是HTTP Request 与HTTP Respon ...
- ashx中Response.ContentType的常用类型
ashx中Response.ContentType的常用类型: text/plaintext/htmltext/xmlapplication/jsonimage/GIFapplication/x-cd ...
- 一个由Response.Redirect 引起的性能问题的分析
现象: 某系统通过单点登录(SSO) 技术验证用户登录.用户在SSO 系统上通过验证后,跳转到某系统的主页上面.而跳转的时间很长,约1分钟以上. 分析步骤: 在问题复现时抓取Hang dump 进行分 ...
- request 对象和 response 对象
Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象 HttpServletResponse HttpServletR ...
- C#、JAVA操作Hadoop（HDFS、Map/Reduce）真实过程概述。组件、源码下载。无法解决：Response status code does not indicate success: 500。
一.Hadoop环境配置概述 三台虚拟机,操作系统为:Ubuntu 16.04. Hadoop版本:2.7.2 NameNode:192.168.72.132 DataNode:192.168.72. ...
- response和request的区别以及常见问题解决
request是请求,即客服端发来的请求 response是响应,是服务器做出的响应 --------------------------------------------------------- ...
随机推荐
- 三.mysql表的完整性约束
mysql表的完整性约束 什么是约束 not null 不能为空的 unique 唯一 = 不能重复 primary key 主键 = 不能为空 且 不能重复 foreign key ...
- 内置函数_map()、reduce()、filter()
map().reduce().filter() map()内置函数把一个函数func依次映射到序列或迭代器对象的每个元素上,并返回一个可迭代的map对象作为结果,map对象中每个元素是原序列中元素经过 ...
- Vuejs——（13）组件——杂项
版权声明:出处http://blog.csdn.net/qq20004604 目录(?)[+] 本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...
- 突然 不能f**q
ss 突然访问不了,于是去查看ip是否被f,发现国outer 国inner 都通,不知道什么情况,后来把 系统代理模式 改为全局,发觉可以,又把他改为 pac模式,正常了. 记录一 ...
- 解决C#调用执行js报检索 COM 类工厂中 CLSID 为 {0E59F1D5-1FBE-11D0-8FF2-00A0D10038BC} 组件失败
最近做了一个模拟请求的网站简化原网站的繁琐数据,提出有用的数据简单展示并完成post.由于原网站数据有js加密,所以我抓出原网站的js解密方法,由C#调用js得到解密后的数据. 整个抓包的框架是用的苏 ...
- 使用 PLSQL 连接 Oracle9i 数据库
昨天用了Navicate连接Oracle数据库,不停的掉线,然后死机,只能重启Navicate,没办法,还是用回plsql吧,重装了一遍(之前重装系统后,电脑自带的公司原有的软件没啦) 先安装了Ora ...
- MongoDB 字符串值长度条件查询
在实际项目中常常会有根据字段值长度大小进行限制查询,例如查询商品名称过长或过短的商品信息,具体的实现方式可能有多种,在此记录常见的两种实现 使用 $where 查询(性能稍逊一些) 1 2 3 4 5 ...
- 日志查看技巧之筛选&去重[排查篇]
引语:相信大家都会偶尔遇到要排查问题发生的原因的情况,那这种时候,我们最有力后盾就是日志文件了,所以谨记日志记录真的很重要.但是日志文件往往是很大的文件,而且里面有太多的东西可能不是我们需要的,如无数 ...
- IDEA搭建SSM实现登录、注册，数据增删改查功能
本博文的源代码:百度云盘/java/java实例/SSM实例/SSM实现登录注册,增删改查/IDEA搭建SSM实现登录,注册,增删改查功能.zip 搭建空的Maven项目 使用Intellij id ...
- 跨浏览器的javascript事件的封装
一,跨浏览器的事件处理程序 1,DOM0级处理事件 将一个函数赋值给一个事件处理程序属性. 事件流:冒泡阶段. 使用: 为元素增加事件: var btn = document.getElementBy ...