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是响应,是服务器做出的响应 --------------------------------------------------------- ...
随机推荐
- 《pyhton语言程序设计》_第一章笔记
章1.62 (1).python区分大小写. (2).python忽略在符号#之后的同行的内容 (3).python和matlab很相似(个人感觉) (4).章节1.91: >>>i ...
- day12_雷神_线程总结
#线程 1. 多线程理论 0.进程只是一个资源单位,用来隔离资源,从执行角度是主线程. 1.多个线程共享一个进程的数据资源: 2.线程开销小: 2. 开线程的两种方式 0. 站在资源的角度,主进程:执 ...
- [算法专题] 二分搜索&排序数组
基础知识 二分非递归写法: int binary_search(const int a[], const int size, const int val) { int lower = 0; int u ...
- 大比速：remoting、WCF(http)、WCF(tcp)、WCF(RESTful)、asp.net core(RESTful)
近来在考虑一个服务选型,dotnet提供了众多的远程服务形式.在只考虑dotnet到dotnet的情形下,我们可以选择remoting.WCF(http).WCF(tcp).WCF(RESTful). ...
- 手机端3d旋转木马效果+保存图片到本地
<!DOCTYPE html> <html> <head> <title></title> <meta charset="U ...
- XCode 无法识别设备
XCode 取消Unpair Device 后不能读取设备 1:退出XCode 2:断开设备连接 3:在终端执行‘sudo pkill usbmuxd’ 4:重启XCode 5:连接设备即可
- 《http权威指南》读书笔记2
概述 最近对http很感兴趣,于是开始看<http权威指南>.别人都说这本书有点老了,而且内容太多.我个人觉得这本书写的太好了,非常长知识,让你知道关于http的很多概念,不仅告诉你怎么做 ...
- Linux下安装mysql5.7
Linux下安装mysql5.7 首先准备好mysql5.7.17的安装包,安装包放在 /data/software 目录下 进入到 /usr/local 目录下,解压mysql安装包 命令: ...
- 关于文件命名，你必须要知道的（浏览器报错：net::ERR_BLOCKED_BY_CLIENT）
坑爹的,今天在写完页面,用各个浏览器测试的时候,火狐.谷歌都是正常的,QQ浏览器出幺蛾子了,在使用兼容模式的时候页面正常,使用急速模式的时候部分页面正常,点击跳转到其他页面的时候就出错了,打开控制台一 ...
- [EXP]Adobe ColdFusion 2018 - Arbitrary File Upload
# Exploit Title: Unrestricted # Google Dork: ext:cfm # Date: -- # Exploit Author: Pete Freitag of Fo ...