我有一个名为portfolio-items的类,它将在水平滚动.我需要jQuery帮助我使用我的下一个和上一个按钮滚动到下一个和上一个最近的类.需要它更具体,如点击我的按钮,它需要获得我最近的div的位置,并相应向左或向右滚动.
下面是我的代码
MARKUP
<span class='arrow-left'>left</span>
<span class='arrow-right'>right</span>
<div class='row offer-pg-cont'>
<div class='offer-pg'>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img src="images/a1.png" class="items" height="100" alt="" />
</div>
<div class="col-md-3 portfolio-item">
<img …我正在尝试进行悬停效果，以将三个不同的齿轮svg图标旋转到其尊敬的中心原点。我尝试使用transform-origin作为中心，但没有运气。任何帮助，将不胜感激。这是下面的代码。
.cog--middle {
transform: rotate(0deg);
transition: 0.3s;
transform-origin: center center;
}
svg:hover .cog--middle {
transform: rotate(360deg);
}<svg
width="110px"
height="100px"
viewBox="0 0 110 100"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>ic--rollout</title>
<g class="cog--middle">
<path
d="M33.6286316,13.9605932 C35.3737066,12.3664297 37.3249373,10.9942262 39.4376676,9.88864575 L37.7639337,2.84180199 L45.4931775,0.0900928417 L49.0720315,6.94284116 C50.0880101,6.82901642 51.1207261,6.7705605 52.1670931,6.7705605 C53.4317563,6.7705605 54.6764785,6.85595112 55.8958106,7.02128212 L58.4472618,0.245430567 L66.3935871,2.28698531 L65.5015991,10.2150059 C67.2900149,11.208746 68.956009,12.3961862 70.4712471,13.7489885 L78.472844,10.4564722 L82.3993634,17.661307 L76.7195784,21.8770189 C76.7662084,21.9692338 76.8123344,22.061747 76.8579526,22.1545548 C77.8852682,24.244573 78.6551102,26.4840416 79.1260955,28.831571 L86.6029963,29.8342633 L86.4016167,38.0374048 L79.2833198,38.8585809 C78.9039047,41.1188654 78.2488189,43.2856361 77.3538253,45.3231245 L82.6154298,51.0936912 L77.189124,57.2481974 L71.7016575,53.6264993 C71.4947362,53.835398 71.2844889,54.0409954 71.0710016,54.2432054 C69.5139432,55.7180126 67.7845278,57.0126257 65.9161266,58.0936683 L67.0389416,65.7326031 L59.0993207,67.8000862 L56.455254,61.4407304 …我尝试了以下场景,我需要动画我的背景图像,如在我的div悬停时从下到上填充.而我的动画不像从底部填充而是从底部到顶部滑动.任何人都可以建议我如何才能达到我的结果.我也可以使用jQuery动画和css3关键帧动画.
下面是我的小提琴代码
.bg {
background: url("https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home.png") no-repeat center;
height: 250px;
position: relative;
}
span {
background: url(https://9887c7297bf844d024e4cccb28a722f62dbe3d73.googledrive.com/host/0B6jEeghp1bpxfkszMFVRcDZBdGF4d012d0hjaS0xWTRvRkh6SDNEUFhUb2pETzlSYWZtbzA/work_home_animate.png) no-repeat top 32px center;
bottom: 0px;
height: 0;
transition: height 0.5s;
position: absolute;
right: 0;
left: 0;
}
.bg:hover span {
height: 184px;
}<div class="bg"><span></span>
</div>我正在开发一个应用程序,我需要active为这两个事件hover和click事件添加类.
我在这里面临的挑战是当我将我的内容悬停时,它会添加课程active.这没有问题.
由于它现在处于活动状态,当我即将点击内容时,它应该支持该类active.但相反,它进入正常状态,并切换类.
JQuery的
$("div").hover(
function() {
$(this).addClass('active');
}, function() {
$( this ).removeClass('active');
}
);
$( "div" ).click(function(){
$(this).toggleClass('active');
});