webyjh 2011-12-28 16:55:50 3630次浏览 9条回复 0 0 0

为什么同样的js脚本放在asp里有效果,放在php里效果就不对啊

代码如下:实现页面上的幻灯图片新闻的显示效果

<?php $this->pageTitle=Yii::app()->name; ?>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/

/* iFocus style */
#ifocus { width:526px; height:275px; margin:0px; border:1px solid #DEDEDE; background:#F8F8F8; }
#ifocus_pic { display:inline; position:relative; float:left; width:410px; height:250px; overflow:hidden; margin:10px 0 0 10px; border:1px solid #F8F8F8;}
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:410px; height:250px; overflow:hidden; }
#ifocus_piclist img { width:410px; height:250px;}
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
#ifocus_btn li { width:91px; height:62px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn img { width:75px; height:45px; margin:13px 0 0 11px; }
#ifocus_btn .current {background:url(<?php echo yii::app()->request->baseUrl;?>/images/bg3.gif) no-repeat 0px 9px ;opacity:1; -moz-opacity:1; filter:alpha(opacity=100); }
#ifocus_opdiv { position:absolute; left:0; bottom:0; width:410px; height:35px; background:#000; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_tx { position:absolute; left:8px; bottom:8px; color:#FFF; }
#ifocus_tx .normal { display:none; }
</style>

<div class='title2'>
<span style='float:right;'><a href="News_list.asp?cat_id=1&catname=中心动态"><img src='<?php echo yii::app()->request->baseUrl;?>/images/more.gif' style='margin-top:-3px;' /></a></span>
 中 心 动 态</div>
<div class='title2_content'>
<script type="text/javascript">
function $(id) { return document.getElementById(id); }
function addLoadEvent(func){
 var oldonload = window.onload;
 if (typeof window.onload != 'function') {
  window.onload = func;
 } else {
  window.onload = function(){
   oldonload();
   func();
  }
 }
}
function moveElement(elementID,final_x,final_y,interval) {
  if (!document.getElementById) return false;
  if (!document.getElementById(elementID)) return false;
  var elem = document.getElementById(elementID);
  if (elem.movement) {
    clearTimeout(elem.movement);
  }
  if (!elem.style.left) {
    elem.style.left = "0px";
  }
  if (!elem.style.top) {
    elem.style.top = "0px";
  }
  var xpos = parseInt(elem.style.left);
  var ypos = parseInt(elem.style.top);
  if (xpos == final_x && ypos == final_y) {
  return true;
  }
  if (xpos < final_x) {
    var dist = Math.ceil((final_x - xpos)/10);
    xpos = xpos + dist;
  }
  if (xpos > final_x) {
    var dist = Math.ceil((xpos - final_x)/10);
    xpos = xpos - dist;
  }
  if (ypos < final_y) {
    var dist = Math.ceil((final_y - ypos)/10);
    ypos = ypos + dist;
  }
  if (ypos > final_y) {
    var dist = Math.ceil((ypos - final_y)/10);
    ypos = ypos - dist;
  }
  elem.style.left = xpos + "px";
  elem.style.top = ypos + "px";
  var repeat = "moveElement('"+elementID+"',"+final_x+","+final_y+","+interval+")";
  elem.movement = setTimeout(repeat,interval);
}
function classNormal(iFocusBtnID,iFocusTxID){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 for(var i=0; i<iFocusBtns.length; i++) {
  iFocusBtns[i].className='normal';
  iFocusTxs[i].className='normal';
 }
}
function classCurrent(iFocusBtnID,iFocusTxID,n){
 var iFocusBtns= $(iFocusBtnID).getElementsByTagName('li');
 var iFocusTxs = $(iFocusTxID).getElementsByTagName('li');
 iFocusBtns[n].className='current';
 iFocusTxs[n].className='current';
}
function iFocusChange() {
 if(!$('ifocus')) return false;
 $('ifocus').onmouseover = function(){atuokey = true};
 $('ifocus').onmouseout = function(){atuokey = false};
 var iFocusBtns = $('ifocus_btn').getElementsByTagName('li');
 var listLength = iFocusBtns.length;
 iFocusBtns[0].onmouseover = function() {
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (listLength>=2) {
  iFocusBtns[1].onmouseover = function() {
   moveElement('ifocus_piclist',0,-250,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',1);
  }
 }
 if (listLength>=3) {
  iFocusBtns[2].onmouseover = function() {
   moveElement('ifocus_piclist',0,-500,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',2);
  }
 }
 if (listLength>=4) {
  iFocusBtns[3].onmouseover = function() {
   moveElement('ifocus_piclist',0,-750,5);
   classNormal('ifocus_btn','ifocus_tx');
   classCurrent('ifocus_btn','ifocus_tx',3);
  }
 }
}
setInterval('autoiFocus()',5000);
var atuokey = false;
function autoiFocus() {
 if(!$('ifocus')) return false;
 if(atuokey) return false;
 var focusBtnList = $('ifocus_btn').getElementsByTagName('li');
 var listLength = focusBtnList.length;
 for(var i=0; i<listLength; i++) {
  if (focusBtnList[i].className == 'current') var currentNum = i;
 }
 if (currentNum==0&&listLength!=1 ){
  moveElement('ifocus_piclist',0,-250,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',1);
 }
 if (currentNum==1&&listLength!=2 ){
  moveElement('ifocus_piclist',0,-500,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',2);
 }
 if (currentNum==2&&listLength!=3 ){
  moveElement('ifocus_piclist',0,-750,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',3);
 }
 if (currentNum==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==1&&listLength==2 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
 if (currentNum==2&&listLength==3 ){
  moveElement('ifocus_piclist',0,0,5);
  classNormal('ifocus_btn','ifocus_tx');
  classCurrent('ifocus_btn','ifocus_tx',0);
 }
}
addLoadEvent(iFocusChange);
</script>


<div id="ifocus">
 <div id="ifocus_pic">
  <div id="ifocus_piclist" style="left:0;top:0;">
   <ul>


<?php
//$slide_news=News::model()->findAll('front_img<>""',
//          array('order'=>'id desc','offset'=>0,'limit'=>4));

$slide_news=News::model()->findAll(
    array(
    'condition'=>'front_img<>""',
    'order' => 'id desc',
    'limit' => 4,
    'offset' => 0,
    ));
?>
    <?php foreach($slide_news as $offset=>$news): ?> 
        <li><a href="<?php echo 'index.php?r=news/view&id='.$news['id']?>"><img src="<?php echo yii::app()->request->baseUrl;?>/uploads/frontimg/<?php echo $news['front_img'];?>"  /></a></li>
            
            <?php endforeach; ?> 
   </ul>
  </div>
  <div id="ifocus_opdiv"></div>
  <div id="ifocus_tx">
   <ul>
     <?php foreach($slide_news as $offset=>$news): ?> 
                <li class="normal"><?php echo $news['title'];?></li>
     <?php endforeach; ?>      
     
   </ul>
  </div>
 </div>
 <div id="ifocus_btn">
  <ul>
        
        <?php 
            $i=0;
            foreach($slide_news as $offset=>$news){
                if($i=0){
                    ?>
         <li class="current"><a href="<?php echo 'index.php?r=news/view&id='.$news['id']?>"><img src="<?php echo yii::app()->request->baseUrl;?>/uploads/frontimg/<?php echo $news['front_img'];?>" /></a></li>
        <?php } else{?>      
        
         <li class="normal"><a href="<?php echo 'index.php?r=news/view&id='.$news['id']?>"><img src="<?php echo yii::app()->request->baseUrl;?>/uploads/frontimg/<?php echo $news['front_img'];?>" /></a></li>	
        <?php
            }	        
            $i++;
        }
        ?>
  </ul>
 </div>
</div><!--ifocus end-->
  • 回复于 2011-12-28 20:34 举报

    代码太长了,一时半会儿看不出来。建议用firebug监视一下。

  • 回复于 2011-12-28 21:25 举报

    网上搜索了说是这个图片轮换的效果中
    function $(id) { return document.getElementById(id); }
    这里的$和jquery中的$重名了,我现在换掉了,
    还有一些毛病,就是加载完成后,图片不自动轮换,
    要鼠标碰到其中一副图片后代码才正常,
    感觉应该是最后一句addLoadEvent(iFocusChange);
    当页面onload后调用iFocusChange函数不成功,
    又不知道在jquery里应该怎么写?

  • 回复于 2011-12-28 23:49 举报

    我狂郁闷啊,判断变成了赋值,少写了一个=号,害我调试半天:'(

  • 回复于 2011-12-28 23:50 举报

    多谢兄弟热心帮忙,顺便BS舰舰

  • 回复于 2011-12-29 09:27 举报

    当页面onload后调用iFocusChange函数不成功,
    又不知道在jquery里应该怎么写?

    这个在JQ里就一句话:

    jQuery(function(){
        //you function here
    });
    
  • 回复于 2011-12-29 09:35 举报

    3Q,我这样写的,好像也可以正确执行 $(document).ready(iFocusChange);

  • 回复于 2011-12-29 09:37 举报

    一样的嗯

  • 回复于 2011-12-29 09:40 举报

    哈哈。。感谢兄弟帮忙

  • 回复于 2011-12-29 10:16 举报

    客气客气~同是PHPer,何必见外

您需要登录后才可以回复。登录 | 立即注册