现在的位置: 首页学习笔记>正文
PHP实战项目头像取值
发表于6年前 学习笔记 暂无评论

用到JS了,我个人觉得有点小难,因为我没JS基础 - -.

下面再来做一下头像选值的效果,

有两个方法,

第一个普通分离方法,

通过onclick事件处理,将当前图片的值传输给父页面.

在头像的页面放入这行代码.

PHP实战头像选值

 

  1. onclick="alert(this.src)  
  2. 我头像图片通过两次代码来生成的,  
  3. 所以先拿前面十张图片来做效果.  
  4. <dd><img src="face/<?php echo $i?>.gif" alt="头像<?php echo  $i?>" onclick="alert(this.src)"/></dd>  
  5. 首先把点击实现显示图片地址显示出来.  
  6. This.src就是当前的图片地址.  
  7.  
  8. 然后在FACE.PHP  
  9. 代码加上onclick="_opener(this.src)"  
  10. 如下  
  11. <h3>选择头像</h3>  
  12.  
  13. <dl>  
  14. <?php for($i=1;$i<10;$i++){?>  
  15. <dd><img src="face/<?php echo $i?>.gif" alt="头像<?php echo  $i?>" onclick="_opener(this.src)"/></dd>  
  16. <?php }?>  
  17. </dl>  
  18. <dl>  
  19. <?php for($e=10;$e<33;$e++){?>  
  20. <dd><img src="face/<?php echo $e?>.gif" alt="头像<?php echo $e?>"onclick="_opener(this.src)"/></dd>  
  21. <?php }?>  
  22. </dl>  
  23.  
  24.  
  25. 然后在opener.js  
  26. 敲入以下代码.  
  27. Opener是父窗口,  
  28. 然后在注册页面ONCLICK取得当前图片选取的地址.  
  29.  
  30. function _opener(src){  
  31.     var faceimg=opener.document.getElementById('faceimg');  
  32.     faceimg.src=src;  
  33. }  
  34.  
  35.  
  36.  
  37. 这是普通方法,但是过时了,  
  38. 我们需要分离.  
  39. 我们把opener.js改成如下  
  40. window.onload=function(){  
  41.     var img=document.getElementsByTagName('img');  
  42.     for(i=0;i<img.length;i++)  
  43.     {  
  44.         img[i].onclick=function(){  
  45.             _opener(this.src);  
  46.         };  
  47.     }  
  48. };  
  49. function _opener(src){  
  50.     var faceimg=opener.document.getElementById('faceimg');  
  51.     faceimg.src=src;  
  52. }  
  53. 把我们前面FACE.PHP  
  54. "_opener(this.src)"   
  55. 有两行插入了这个代码,可以删除.   
  56. 效果和之前一样.   
  57. JS的确有点难度额. 

效果如下

独家记忆

×
腾讯微博