个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我正在尝试构建一个 jssor 图片库并让大多数东西正常工作，但我对 jssor 不是很精通，所以如果这是简单的添加，我深表歉意。
我有用于导航的黑白缩略图，当图像处于事件状态或悬停在静态图像上时，静态图像显示在缩略图上方，我想在悬停时为缩略图的彩色版本进行图像交换over 或 active，但我不确定如何完成。
t01.png 是当前覆盖的图像
<!-- it works the same with all jquery version from 1.x to 2.x -->
<script type="text/javascript" src="../../_Assets/scripts/js/jquery-1.9.1.min.js"></script>
<!-- use jssor.slider.mini.js (40KB) instead for release -->
<!-- jssor.slider.mini.js = (jssor.js + jssor.slider.js) -->
<script type="text/javascript" src="../../_Assets/scripts/js/jssor.js"></script>
<script type="text/javascript" src="../../_Assets/scripts/js/jssor.slider.js"></script>
<script>
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [
//Zoom- in
{$Duration: 1200, $Zoom: 1, $Easing: { $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad }, $Opacity: 2 },
//Zoom+ out
{$Duration: 1000, $Zoom: 11, $SlideOut: true, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 },
//Rotate Zoom- in
{$Duration: 1200, $Zoom: 1, $Rotate: 1, $During: { $Zoom: [0.2, 0.8], $Rotate: [0.2, 0.8] }, $Easing: { $Zoom: $JssorEasing$.$EaseSwing, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseSwing }, $Opacity: 2, $Round: { $Rotate: 0.5} },
//Rotate Zoom+ out
{$Duration: 1000, $Zoom: 11, $Rotate: 1, $SlideOut: true, $Easing: { $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} },
//Zoom HDouble- in
{$Duration: 1200, x: 0.5, $Cols: 2, $Zoom: 1, $Assembly: 2049, $ChessMode: { $Column: 15 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 },
//Zoom HDouble+ out
{$Duration: 1200, x: 4, $Cols: 2, $Zoom: 11, $SlideOut: true, $Assembly: 2049, $ChessMode: { $Column: 15 }, $Easing: { $Left: $JssorEasing$.$EaseInExpo, $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear }, $Opacity: 2 },
//Rotate Zoom- in L
{$Duration: 1200, x: 0.6, $Zoom: 1, $Rotate: 1, $During: { $Left: [0.2, 0.8], $Zoom: [0.2, 0.8], $Rotate: [0.2, 0.8] }, $Easing: { $Left: $JssorEasing$.$EaseSwing, $Zoom: $JssorEasing$.$EaseSwing, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseSwing }, $Opacity: 2, $Round: { $Rotate: 0.5} },
//Rotate Zoom+ out R
{$Duration: 1000, x: -4, $Zoom: 11, $Rotate: 1, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInExpo, $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} },
//Rotate Zoom- in R
{$Duration: 1200, x: -0.6, $Zoom: 1, $Rotate: 1, $During: { $Left: [0.2, 0.8], $Zoom: [0.2, 0.8], $Rotate: [0.2, 0.8] }, $Easing: { $Left: $JssorEasing$.$EaseSwing, $Zoom: $JssorEasing$.$EaseSwing, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseSwing }, $Opacity: 2, $Round: { $Rotate: 0.5} },
//Rotate Zoom+ out L
{$Duration: 1000, x: 4, $Zoom: 11, $Rotate: 1, $SlideOut: true, $Easing: { $Left: $JssorEasing$.$EaseInExpo, $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.8} },
//Rotate HDouble- in
{$Duration: 1200, x: 0.5, y: 0.3, $Cols: 2, $Zoom: 1, $Rotate: 1, $Assembly: 2049, $ChessMode: { $Column: 15 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.7} },
//Rotate HDouble- out
{$Duration: 1000, x: 0.5, y: 0.3, $Cols: 2, $Zoom: 1, $Rotate: 1, $SlideOut: true, $Assembly: 2049, $ChessMode: { $Column: 15 }, $Easing: { $Left: $JssorEasing$.$EaseInExpo, $Top: $JssorEasing$.$EaseInExpo, $Zoom: $JssorEasing$.$EaseInExpo, $Opacity: $JssorEasing$.$EaseLinear, $Rotate: $JssorEasing$.$EaseInExpo }, $Opacity: 2, $Round: { $Rotate: 0.7} },
//Rotate VFork in
{$Duration: 1200, x: -4, y: 2, $Rows: 2, $Zoom: 11, $Rotate: 1, $Assembly: 2049, $ChessMode: { $Row: 28 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.7} },
//Rotate HFork in
{$Duration: 1200, x: 1, y: 2, $Cols: 2, $Zoom: 11, $Rotate: 1, $Assembly: 2049, $ChessMode: { $Column: 19 }, $Easing: { $Left: $JssorEasing$.$EaseInCubic, $Top: $JssorEasing$.$EaseInCubic, $Zoom: $JssorEasing$.$EaseInCubic, $Opacity: $JssorEasing$.$EaseOutQuad, $Rotate: $JssorEasing$.$EaseInCubic }, $Opacity: 2, $Round: { $Rotate: 0.8} }
];
var options = {
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 2500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$PauseOnHover: 3, //[Optional] Whether to pause when mouse over if a slider is auto playing, 0 no pause, 1 pause for desktop, 2 pause for touch device, 3 pause for desktop and touch device, 4 freeze for desktop, 8 freeze for touch device, 12 freeze for desktop and touch device, default value is 1
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$ArrowKeyNavigation: true, //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
$SlideDuration: 600, //Specifies default duration (swipe) for slide in milliseconds
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 0, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
},
$ArrowNavigatorOptions: { //[Optional] Options to specify and enable arrow navigator or not
$Class: $JssorArrowNavigator$, //[Requried] Class to create arrow navigator instance
$ChanceToShow: 1, //[Required] 0 Never, 1 Mouse Over, 2 Always
$AutoCenter: 2, //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
$Steps: 1 //[Optional] Steps to go for each navigation request, default value is 1
},
$ThumbnailNavigatorOptions: { //[Optional] Options to specify and enable thumbnail navigator or not
$Class: $JssorThumbnailNavigator$, //[Required] Class to create thumbnail navigator instance
$ChanceToShow: 2, //[Required] 0 Never, 1 Mouse Over, 2 Always
$ActionMode: 1, //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
$Lanes: 2, //[Optional] Specify lanes to arrange thumbnails, default value is 1
$SpacingX: 14, //[Optional] Horizontal space between each thumbnail in pixel, default value is 0
$SpacingY: 12, //[Optional] Vertical space between each thumbnail in pixel, default value is 0
$DisplayPieces: 6, //[Optional] Number of pieces to display, default value is 1
$ParkingPosition: 156, //[Optional] The offset position to park thumbnail
$Orientation: 2 //[Optional] Orientation to arrange thumbnails, 1 horizental, 2 vertical, default value is 1
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
//responsive code begin
//you can remove responsive code if you don't want the slider scales while window resizes
function ScaleSlider() {
var parentWidth = jssor_slider1.$Elmt.parentNode.clientWidth;
if (parentWidth)
jssor_slider1.$ScaleWidth(Math.max(Math.min(parentWidth, 960), 300));
else
window.setTimeout(ScaleSlider, 30);
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
//responsive code end
});
</script>
<!-- Jssor Slider Begin -->
<!-- You can move inline styles to css file or css block. -->
<div id="slider1_container" style="position: relative; top: 0px; left: 0px; width: 960px;
height: 1080px; background: #191919; overflow: hidden;">
<!-- Loading Screen -->
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(../../_Assets/images/Heart_Loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<!-- Slides Container -->
<div u="slides" style="cursor: move; position: absolute; left: 240px; top: 0px; width: 720px; height: 1080px; overflow: hidden;">
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_001.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_001.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_002.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_002.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_003.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_003.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_004.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_004.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_005.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_005.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_006.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_006.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_008.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_008.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_010.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_010.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_013.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_013.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_014.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_014.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_019.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_019.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_020.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_020.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_021.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_021.jpg" />
</div>
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_022.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_022.jpg" />
</div>
</div>
<!-- Arrow Navigator Skin Begin -->
<style>
/* jssor slider arrow navigator skin 05 css */
/*
.jssora05l (normal)
.jssora05r (normal)
.jssora05l:hover (normal mouseover)
.jssora05r:hover (normal mouseover)
.jssora05ldn (mousedown)
.jssora05rdn (mousedown)
*/
.jssora05l, .jssora05r, .jssora05ldn, .jssora05rdn
{
position: absolute;
cursor: pointer;
display: block;
background: url(../img/a17.png) no-repeat;
overflow:hidden;
}
.jssora05l { background-position: -10px -40px; }
.jssora05r { background-position: -70px -40px; }
.jssora05l:hover { background-position: -130px -40px; }
.jssora05r:hover { background-position: -190px -40px; }
.jssora05ldn { background-position: -250px -40px; }
.jssora05rdn { background-position: -310px -40px; }
</style>
<!-- Arrow Left -->
<span u="arrowleft" class="jssora05l" style="width: 40px; height: 40px; top: 158px; left: 248px;">
</span>
<!-- Arrow Right -->
<span u="arrowright" class="jssora05r" style="width: 40px; height: 40px; top: 158px; right: 8px">
</span>
<!-- Arrow Navigator Skin End -->
<!-- Thumbnail Navigator Skin 02 Begin -->
<div u="thumbnavigator" class="jssort02" style="position: absolute; width: 240px; height: 480px; left:0px; bottom: 0px;">
<!-- Thumbnail Item Skin Begin -->
<style>
/* jssor slider thumbnail navigator skin 02 css */
/*
.jssort02 .p (normal)
.jssort02 .p:hover (normal mouseover)
.jssort02 .pav (active)
.jssort02 .pav:hover (active mouseover)
.jssort02 .pdn (mousedown)
*/
.jssort02 .w
{
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
.jssort02 .c
{
position: absolute;
top: 0px;
left: 0px;
width: 95px;
height: 62px;
border: #000 2px solid;
}
.jssort02 .p:hover .c, .jssort02 .pav:hover .c, .jssort02 .pav .c
{
background: url(../../_Assets/images/t01.png) center center;
border-width: 0px;
top: 2px;
left: 2px;
width: 95px;
height: 62px;
}
.jssort02 .p:hover .c, .jssort02 .pav:hover .c
{
top: 0px;
left: 0px;
width: 97px;
height: 64px;
border: #fff 1px solid;
}
</style>
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="position: absolute; width: 99px; height: 149px; top: 0; left: 0;">
<div class=w><div u="thumbnailtemplate" style=" width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div></div>
<div class=c>
</div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
</div>
<!-- Thumbnail Navigator Skin End -->
<a style="display: none" href="http://www.jssor.com">javascript</a>
</div>我想我需要为每个图像 div 添加对缩略图颜色版本的引用，具有如下所示的不同引用名称，然后以某种方式引用它而不是当前使用的 t01.png。
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_004.jpg" />
<img u="thumb" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_004.jpg" />
<img u="thumb_CL" src="../../Images/Gallery/Engagement/thumb_CL/Tall/_IMG_004.jpg" />
</div>最佳答案
您可以使用 DIV 定义缩略图，
<div>
<img u="image" src="../../Images/Gallery/Engagement/image/Tall/_IMG_004.jpg" />
<div u="thumb">
<img class="thumb1" src="../../Images/Gallery/Engagement/thumb_BnW/Tall/_IMG_004.jpg" />
<img class="thumb2" src="../../Images/Gallery/Engagement/thumb_CL/Tall/_IMG_004.jpg" />
</div>
</div>
然后像这样定义缩略图导航器皮肤，
<!-- Thumbnail Item Skin Begin -->
<style>
/* jssor slider thumbnail navigator skin 01 css */
/*
.jssort01 .p (normal)
.jssort01 .p:hover (normal mouseover)
.jssort01 .pav (active)
.jssort01 .pav:hover (active mouseover)
.jssort01 .pdn (mousedown)
*/
.jssort01 .p .thumb1 {
display: block;
}
.jssort01 .p:hover .thumb1 {
display: none;
}
.jssort01 .p .thumb2 {
display: none;
}
.jssort01 .p:hover .thumb2 {
display: block;
}
</style>
<div u="slides" style="cursor: move;">
<div u="prototype" class="p" style="position: absolute; width: 72px; height: 72px; top: 0; left: 0;">
<div u="thumbnailtemplate" style="width: 100%; height: 100%; border: none;position:absolute; top: 0; left: 0;"></div>
</div>
</div>
<!-- Thumbnail Item Skin End -->
关于javascript - jssor 画廊缩略图图像悬停交换，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27681484/
25
4
0
我在理解这些函数如何更新底层引用、原子等时遇到问题。 文档说:(应用当前身份值参数) (def one (atom 0)) (swap! one inc) ;; => 1 所以我想知道它是如何“扩展到
尝试让一段代码看起来更好。 我在 Clojurescript 中有以下内容: (swap! app-state assoc-in [:lastresults] []) (swap! app-state
我在数据库中有带有排序顺序号的记录。现在我想创建一个带有向上和向下按钮的用户界面来重新排序它们。制作两个 functionsUp(record) 和 functionDown(record) 的最佳算
如何才能让第二次点击时返回？我想我必须以某种方式找到活跃的，但不确定。 $("#test").click(function(){ $("#dsa").fadeOut() $("#asd
我需要有关这次考试的帮助。我需要反转输入字符串。 int main(void) { char str[30]; int strlen; int i=0; int count=0;int
我正在用 C 语言玩指针...我尝试编写一个接收指向值的指针、检索指针的指针并交换指向值的指针的交换，而不是接收指向值的指针和交换值的常规交换。 这是代码... 互换功能: void swap(voi
如何在 javascript 中切换值？例如，如果 x = apple，则函数应返回 x = orange。如果 x = orange，则函数应返回 x = apple。不确定，这里有什么用，切换或交
刚接触这类东西，可能做错了什么，但是- 我有 3 个成员 std::unique_ptr currentWeapon; std::unique_ptr weaponSlotOne; std::uniq
我想在 Map 内的不可变列表内交换项目，示例: const Map = Immutable.fromJS({ name:'lolo', ids:[3,4,5] }); 我正在尝试使用
我创建了动态数组。如果具有某些值，则填充。打印它。但是交换/交换指针后(任务是在特定条件下交换行) 条件取决于sumL。为了不浪费您的时间，我没有描述细节。 问题在于交换指针。 for ( k = 0
要反转整个 vector，存在 std::reverse。但我想将一个 vector “划分”为两部分(恰好在中间)并将两者反转，将它们放回一起并再次反转整个 vector 。例如我们有: 0 1 2
我正在致力于代码最小化和增强。我的问题是:是否可以在不破坏代码逻辑的情况下交换上面的 if 语句？ int c1 = Integer.parseInt(args[0]) ; int c
我读过释放 vector 内存的最佳方法是: vector().swap(my_vector); 而且我真的不明白发生了什么。交换函数需要 2 个 vector 并交换它们的元素，例如: vector
我正在尝试编写一个 Haskell 函数，该函数接受一串字母对，并在所有字母组成的字符串中交换该对字母，但我想出的方法感觉很尴尬且不惯用。 我有 swap a b = map (\x-> if x =
我正在尝试使用向上和向下箭头交换两个元素。 JSFiddle 解决方案会很棒! 我的 HTML: Some text down Some ot
当将 subview 与另一个太阳 View 交换时，是否需要重新应用约束？是否需要删除适用于已删除 View 的约束？ 或者它们应该自动持续存在？ 最佳答案 约束是 View 的“一部分”。当您删除
所以我制作网站已经有一段时间了，但只是真正用于显示和信息的东西。我想尝试一下 AngularJs，所以我遵循了 Codeschool 上的指南。当我根据在线文档意识到我使用的语法不被推荐时，我在该应用
我正在尝试编写一个函数，可以将字符串中的 unicode 字符替换为非 unicode ASCII 字符，问题是上传包含它们的字符串时，unicode 连字符和引号不会被读取。 我希望该函数有一个带有
我目前正在使用 Azure 网站来部署我的应用程序。我目前正在使用两个网站，每个网站监听我的 GIT 的不同分支。如图所示here . 现在，为了让它变得完美，我只是缺少一种在这两个实例之间快速切换的
在我的 javascript 中，有两个包含一些值的 div。 我想交换这些div中的值。 有什么解决办法吗？ 最佳答案 var temp = $('#div1').html(); $('#div1'
我是一名优秀的程序员,十分优秀！