如何实现原始悬停效果，sliderJS效果和同时放大花式框 [英] How to implement Original Hover Effects ,sliderJS effect and zoom in fancy box simultanously

问题描述

我想实施

http：// tympanus。 net / Tutorials / OriginalHoverEffects / [ ^ ]

css效果我可以单独这样做，我也想实现图像滑动效果

[ ^ ]



也可以单独实现这个效果。

i也想实现放大效果的花式框。



我的问题是我希望所有上述效果应该同时工作。

我该怎么办呢请帮助

 < script  >  
 $（function（）{
 $（' ＃s lides'）。slidesjs（{
宽度： 940 ，
 height： 528 ，
 
导航：{
效果： 淡入淡出 
}，
分页：{
效果： 淡入淡出 
}，
效果：{
淡化：{
速度： 2000  
} 
} 
}）; 
}）; 
 < /   script  >  

 <  < span class =code-leadattribute> div     class   =  main >  
 <   div     class   =  view view-first  >  
 <   div     id   =  slide <跨度class =code-keyword>>  
 <   img  < span class =code-attribute>   src   =  img / example-slide-1.jpg    alt   = 摄影：Missy S链接：http：//www.flickr.com/photos/listenmissy/5087404401/\" >  
 <   img     src   =  img / example-slide-2.jpg    alt   = 摄影：Daniel Parks链接：http：//www.flickr.co m / photos / parksdh / 5227623068 / >  
 <  < span class =code-leadattribute> img     src   =  img / example-slide-3.jpg    alt   = 摄影：Mike Ranweiler链接：http：// www .flickr.com / photos / 27874907 @ N04 / 4833059991 / >  
 <   img     src   =  img / example-slide-4.jpg    alt   = 摄影：Stuart SeegerLink：http：//www.flickr.com/photos/stuseeger/97577796/\">  
 <   / div  >  
 < span class =code-keyword><   div     class   =  mask >  
 <   h2  > 悬停样式＃1 <   / h2  >  
 <   p  > 一个美妙的宁静占据了我的e驯服灵魂，就像我全心全意享受的春天的甜蜜早晨。<   / p  < span class =code-keyword>>  
 <   a     href   = ＃    class   = 信息 > 了解更多 <   / a  >  
 <   / div  >  
 <   / div  >  
 
 
 <   / div  >  

解决方案

< blockquote>（function（）{

（' ＃slides'）。slidesjs（{
宽度： 940 ，
height： 528 ，

导航：{
效果： 淡入淡出
}，
分页：{
效果： 淡入淡出
}，
效果：{
淡化：{
速度： 2000
}
}
}）;
}）;
< / script >

 <  < span class =code-leadattribute> div     class   =  main >  
 <   div     class   =  view view-first  >  
 <   div     id   =  slide <跨度class =code-keyword>>  
 <   img  < span class =code-attribute>   src   =  img / example-slide-1.jpg    alt   = 摄影：Missy S链接：http：//www.flickr.com/photos/listenmissy/5087404401/\" >  
 <   img     src   =  img / example-slide-2.jpg    alt   = 摄影：Daniel Parks链接：http：//www.flickr.co m / photos / parksdh / 5227623068 / >  
 <  < span class =code-leadattribute> img     src   =  img / example-slide-3.jpg    alt   = 摄影：Mike Ranweiler链接：http：// www .flickr.com / photos / 27874907 @ N04 / 4833059991 / >  
 <   img     src   =  img / example-slide-4.jpg    alt   = 摄影：Stuart SeegerLink：http：//www.flickr.com/photos/stuseeger/97577796/\">  
 <   / div  >  
 < span class =code-keyword><   div     class   =  mask >  
 <   h2  > 悬停样式＃1 <   / h2  >  
 <   p  > 一个美妙的宁静占据了我的e驯服灵魂，就像我全心全意享受的春天的甜蜜早晨。<   / p  < span class =code-keyword>>  
 <   a     href   = ＃    class   = 信息 > 了解更多 <   / a  >  
 <   / div  >  
 <   / div  >  
 
 
 <   / div  >  

Hi,
I want to implement
http://tympanus.net/Tutorials/OriginalHoverEffects/[^]
css effect i am able to do so separately ,also i want to implement image sliding effect
[^]

also am able to implement this effect separately .
i also want to implement zoom in effect fancy box.

My Problem is i want all the above effect should work simultanously .
how can i do so Please help

<script>
   $(function() {
     $('#slides').slidesjs({
       width: 940,
       height: 528,

       navigation: {
         effect: "fade"
       },
       pagination: {
         effect: "fade"
       },
       effect: {
         fade: {
           speed: 2000
         }
       }
     });
   });
 </script>

<div class="main">
        <div class="view view-first">
           <div id="slides">
  <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
            <div class="mask">
                <h2>Hover Style #1</h2>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <a href="#" class="info">Read More</a>
            </div>
        </div>


    </div>

解决方案

(function() {

('#slides').slidesjs({ width: 940, height: 528, navigation: { effect: "fade" }, pagination: { effect: "fade" }, effect: { fade: { speed: 2000 } } }); }); </script>

<div class="main">
        <div class="view view-first">
           <div id="slides">
  <img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
  <img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
  <img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
  <img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
            <div class="mask">
                <h2>Hover Style #1</h2>
                <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
                <a href="#" class="info">Read More</a>
            </div>
        </div>


    </div>

这篇关于如何实现原始悬停效果，sliderJS效果和同时放大花式框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！