为什么这个jQuery没有'不能在Codeigniter中工作
Why this jQuery doesn't work in Codeigniter?
这个jQuery已经在html网站上进行了正确的测试,现在我需要在Codeigniter设置中使用它。
所以我有一个php页面,看起来像这样:
<head>
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/normalize.css" type="text/css" />
<link rel="stylesheet" href="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/component.css" type="text/css" />
<script src="<?php echo base_url(); ?>assets/js/modernizr.custom.js"></script>
</head>
<body>
<div class="container">
<!-- Top Navigation -->
<section class="grid-wrap">
<ul class="grid swipe-right" id="grid">
<li><a href="#"><img src="<?php echo base_url(); ?>assets/css/themes/<?php echo $this->config->item("theme"); ?>/images/dummy.png" alt="dummy"><h3>A fantastic title</h3></a></li>
<!-- etc -->
</ul>
</section>
</div><!-- /container -->
<script src="<?php echo base_url(); ?>assets/js/imagesloaded.pkgd.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/colorfinder-1.1.js"></script>
<script src="<?php echo base_url(); ?>assets/js/masonry.pkgd.min.js"></script>
<script src="<?php echo base_url(); ?>assets/js/gridScrollFx.js"></script>
<script src="<?php echo base_url(); ?>assets/js/classie.js"></script>
<script>
new GridScrollFx( document.getElementById( 'grid' ), {
viewportFactor : 0.4
} );
</script>
</body>
</html>
我在控制台上没有任何Javascript问题,但是当我向下滚动"GridScrollFx"jQuery时,不会添加类"shown"来列出项目
GridScrollFx.prototype._scrollPage = function() {
var self = this;
this.items.forEach( function( item ) {
if( !classie.has( item.el, 'shown' ) && !classie.has( item.el, 'animate' ) && inViewport( item.el, self.options.viewportFactor ) ) {
++self.itemsRenderedCount;
if( !item.curtain ) {
classie.add( item.el, 'shown' );
return;
};
classie.add( item.el, 'animate' );
// after animation ends add class shown
var onEndAnimationFn = function( ev ) {
if( support.animations ) {
this.removeEventListener( animEndEventName, onEndAnimationFn );
}
classie.remove( item.el, 'animate' );
classie.add( item.el, 'shown' );
};
if( support.animations ) {
item.curtain.addEventListener( animEndEventName, onEndAnimationFn );
}
else {
onEndAnimationFn();
}
}
});
this.didScroll = false;
}
这就是CSS:
/* Hover effects */
.grid li.shown:hover h3 {
color: #fff;
-webkit-transform: translate3d(0,-30px,0);
transform: translate3d(0,-30px,0);
}
.grid li.shown:hover > a::before {
border-width: 14px;
border-color: #2E3444;
}
.grid li.shown img,
.grid li.shown h3 {
visibility: visible;
}
我从这个教程中得到了这个想法。那么,为什么在向下滚动时,所有已加载的项目都不会显示呢?
从您的代码(head和body)中,我没有发现包含任何jquery js文件。添加这样的东西,
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
相关文章:
- 不能从angular2中的子组件指定父组件中的数组
- AngularJS UI路由器不能像ng路由器那样工作
- HTML5音频加载和播放获胜'我不能在iPad上工作
- 转义符不能与innerHTML一起使用
- JSON.parse没有'不能使用Javascript
- JS可以在Chrome中工作,但不能在Firefox中工作
- 砌体不能填补小缺口
- javascript扫雷器floodfill算法不能正常工作
- JavaScript指令不能像我想象的那样工作
- 为什么在这个网站上不能通过JS访问元素
- Facebook登录按钮没有'不能在Firefox上工作
- 为什么这个jQuery没有'不能在Codeigniter中工作
- Codeigniter不能在单独的js文件中返回site_url
- 不能将jquery UI按钮样式添加到所有按钮Codeigniter
- jQuery代码不能在CodeIgniter中工作
- Codeigniter ajax调用不能正常工作
- 为什么模态不能完全关闭与codeigniter jquery和bootstrap
- Bootstrap dataTable不能与Codeigniter中的数据库一起工作
- codeigniter:我不能更改视图页面
- Javascript警告不能在codeigniter的实时服务器上工作