<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery图片显示动态文字特效 - 网页模板</title>
<meta name="viewport" content="width = device-width, initial-scale = 1.0" />
<link href="css/royalslider.css" rel="stylesheet">
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/jquery.royalslider.min.js"></script>
<script src="js/jquery.easing-1.3.js"></script>
<link href="css/reset.css?v=1.0.4" rel="stylesheet">
<link href="css/skins/minimal-white/rs-minimal-white.css?v=1.0.4" rel="stylesheet">
<style>
#slider-with-blocks-1 {
width: 100%;
}
.rsContent {
color: #FFF;
font-size: 24px;
line-height: 32px;
float: left;
}
.bContainer {
position: relative;
}
.rsABlock {
position: relative;
display: block;
left: auto;
top: auto;
}
.blockHeadline {
font-size: 42px;
line-height: 50px;
}
.blockSubHeadline {
font-size: 32px;
line-height: 40px
}
.txtCent {
text-align: center;
width: 100%;
}
.slide1 {
background: #f06b50;
}
.slide1 .bContainer {
top: 36%;
}
.slide2 {
background: #ffbc11;
color:#000;
}
.slide2 .bContainer {
top: 24px;
}
.slide2 .txtCent {
line-height: 44px;
}
.slide2 .blockHeadline {
line-height: 66px;
}
.slide3 {
background: #45aab8;
color:#FFF;
}
.slide3 .bContainer {
top: 24px;
}
.slide3 span {
line-height: 44px;
}
.slide4 .bContainer {
position: absolute;
left: 0;
width: 100%;
height: auto;
top: 24px;
}
.photoCopy {
position: absolute;
line-height: 24px;
font-size: 12px;
background: black;
color: white;
background-color: rgba(0, 0, 0, 0.75);
padding: 0px 10px;
position: absolute;
left: 12px;
bottom: 12px;
top: auto;
border-radius: 2px;
z-index: 25;
}
.photoCopy a {
color: #FFF;
}
.palmImg {
left: 0;
top: auto;
bottom: -60px;
position: absolute;
}
@media screen and (min-width: 0px) and (max-width: 960px) {
.rsContent {
font-size: 22px;
line-height: 28px;
}
.blockHeadline {
font-size: 32px;
line-height: 32px;
}
.blockSubHeadline {
font-size: 26px;
line-height: 32px
}
}
@media screen and (min-width: 0px) and (max-width: 500px) {
.royalSlider,
.rsOverflow {
height: 330px !important;
}
.rsContent {
font-size: 18px;
line-height: 26px;
}
.blockHeadline {
font-size: 24px;
line-height: 32px;
}
.blockSubHeadline {
font-size: 22px;
line-height: 32px
}
}
</style>
</head>
<body >
<br>
<div class="page wrapper main-wrapper">
<div class="row clearfix">
<div class="col span_4 fwImage">
<div id="slider-with-blocks-1" class="royalSlider rsMinW ">
<div class="rsContent slide1">
<div class="bContainer">
<strong class="rsABlock txtCent blockHeadline">This is an animated block</strong>
<span class="rsABlock txtCent" data-move-effect="none">you can place it on any type of slide</span>
</div>
</div>
<div class="rsContent slide2">
<div class="bContainer">
<strong class="rsABlock txtCent blockSubHeadline" data-move-effect="none">Transition Types</strong>
<span class="rsABlock txtCent" data-move-effect="top" >from top ↓</span>
<span class="rsABlock txtCent" data-move-effect="bottom">from bottom ↑</span>
<span class="rsABlock txtCent" data-move-effect="left">from left →</span>
<span class="rsABlock txtCent" data-move-effect="right">from right ←</span>
<span class="rsABlock txtCent" data-move-effect="none">just fade</span>
</div>
</div>
<div class="rsContent slide3">
<div class="bContainer">
<strong class="rsABlock txtCent blockSubHeadline" data-move-effect="none" data-delay="0">Customizable Animation</strong>
<span class="rsABlock txtCent" data-move-effect="left" data-delay="1000" data-move-offset="500" data-easing="easeOutBack" data-fade-effect="none">easing</span>
<span class="rsABlock txtCent" data-move-effect="left" data-delay="1500" data-move-offset="500" data-fade-effect="none">delay</span>
<span class="rsABlock txtCent" data-move-effect="left" data-delay="2000" data-move-offset="500" data-speed="1000" data-fade-effect="none">speed</span>
<span class="rsABlock txtCent" data-move-effect="left" data-delay="2500" data-move-offset="50" data-fade-effect="true">move offset</span>
</div>
</div>
<div class="rsContent slide4">
<a class="rsImg" href="img/palmbw.jpg">palms & beach</a>
<div class="bContainer">
<strong class="rsABlock txtCent blockHeadline">Block may have any HTML</strong>
<span class="rsABlock txtCent" data-move-effect="none">and can be placed on any slide type</span>
</div>
<img class="rsABlock palmImg" data-fade-effect="none" data-move-effect="bottom" data-opposite="true" data-move-offset="450" data-delay="350" data-speed="300" data-easing="easeOutBack" src="img/palms.png" data-rsw="707" data-rsh="471"/>
<div class="photoCopy">Photo by <a href="http://www.moobnn.com/">Laurent Aphecetche</a></div>
</div>
</div>
</div>
</div>
</div>
<script>
jQuery(document).ready(function($) {
jQuery.rsCSS3Easing.easeOutBack = 'cubic-bezier(0.175, 0.885, 0.320, 1.275)';
$('#slider-with-blocks-1').royalSlider({
arrowsNav: true,
arrowsNavAutoHide: false,
fadeinLoadedSlide: false,
controlNavigationSpacing: 0,
controlNavigation: 'bullets',
imageScaleMode: 'none',
imageAlignCenter:false,
blockLoop: true,
loop: true,
numImagesToPreload: 6,
transitionType: 'fade',
keyboardNavEnabled: true,
block: {
delay: 400
}
});
});
</script>
<div style="text-align:center;clear:both">
<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
jQuery图片显示动态文字特效.zip
版权申诉
120 浏览量
2022-11-22
17:15:34
上传
评论
收藏 165KB ZIP 举报
jQuery图片显示动态文字特效.zip （15个子文件） 
jQuery图片显示动态文字特效 jiaoben1637 css 
royalslider.css 4KB reset.css 12KB Thumbs.db 4KB skins preloaders 
preloader-white.gif 869B Thumbs.db 4KB minimal-white rs-minimal-white.css 8KB
rs-minimal-white.png 5KB Thumbs.db 4KB royalslider img palms.png 14KB
palmbw.jpg 61KB
index.html 6KB js jquery.easing-1.3.js 8KB jquery-1.8.3.min.js 91KB jquery.royalslider.min.js 50KB jQuery图片显示动态文字特效.jpg 25KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 本科毕业设计基于C# wpf人脸识别的考勤系统的设计与实现源码.zip
- 基于Ruoyi+uniapp实现学生考勤系统 学生考勤源码+项目说明.zip
- feae6bc968ca68a099455d8b8a8dea35
- 基于Pytorch训练CIRAR10上分类算法.zip
- Pytorch-pytorch深度学习教程之Tensorboard.zip
- 基于C++和Python开发yolov8-face作为人脸检测器dlib作为人脸识别器的人脸考勤系统源码+项目说明.zip
- Pytorch-pytorch深度学习教程之变分自动编码器.zip
- Pytorch-pytorch深度学习教程之神经风格迁移.zip
- Pytorch-pytorch深度学习教程之深度残差网络.zip
- Pytorch-pytorch深度学习教程之循环神经网络.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
