注册 登录
北美生活网~和你在一起 返回首页

北美生活网的个人空间 http://www.beimeilife.com/?4 [收藏] [复制] [分享] [RSS]

日志

测试-将网页图片横向显示并向左滚动

热度 4已有 67 次阅读2016-3-5 18:34 |个人分类:站点功能|系统分类:日记随笔| 图片, 彼岸, 网页, 博客, 频道

原来北美生活网上的首页“图个痛快”模块一直图片不动, 很呆板, 周末测试了个模块编码---分别在博客/论坛/门户频道测试, 都没有问题-----如北美生活网博客页, 特来这里分享:

  1. <FONT size=2><div id="colee_left" style="overflow:hidden;width:100%;" class="module cl ml">
  2. <table cellpadding="0" cellspacing="0" border="0">
  3. <tr><td id="colee_left1" valign="top" align="center">
  4. <table cellpadding="2" cellspacing="0" border="0">
  5. <tr align="center">
  6. <ul>
  7. [loop]
  8. <td>
  9. <li style="width: {picwidth}px;">
  10. <a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
  11. <p><a href="{url}" title="{title}"{target}>{title}</a></p>
  12. </li></td>
  13. [/loop] 
  14. </ul>
  15. </tr>
  16. </table>
  17. </td>
  18. <td id="colee_left2" valign="top"></td>
  19. </tr>
  20. </table>
  21. </div>
  22. <script>
  23. var speed=30//速度数值越大速度越慢
  24. var colee_left2=document.getElementById("colee_left2");
  25. var colee_left1=document.getElementById("colee_left1");
  26. var colee_left=document.getElementById("colee_left");
  27. colee_left2.innerHTML=colee_left1.innerHTML
  28. function Marquee3(){
  29. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)
  30. colee_left.scrollLeft-=colee_left1.offsetWidth
  31. else{
  32. colee_left.scrollLeft++
  33. }
  34. }
  35. var MyMar3=setInterval(Marquee3,speed)
  36. colee_left.onmouseover=function() {clearInterval(MyMar3)}
  37. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
  38. </script></FONT>

真对不起, 我还不知道如何将引用代码进入博客, 如需要使用, 直接复制下面的就可以

<FONT size=2><div id="colee_left" style="overflow:hidden;width:100%;" class="module cl ml">
<table cellpadding="0" cellspacing="0" border="0">
<tr><td id="colee_left1" valign="top" align="center">
<table cellpadding="2" cellspacing="0" border="0">
<tr align="center">
<ul>
[loop]
<td>
<li style="width: {picwidth}px;">
<a href="{url}"{target}><img src="{pic}" width="{picwidth}" height="{picheight}" alt="{title}" /></a>
<p><a href="{url}" title="{title}"{target}>{title}</a></p>
</li></td>
[/loop] 
</ul>
</tr>
</table>
</td>
<td id="colee_left2" valign="top"></td>
</tr>
</table>
</div>
<script>
var speed=30//速度数值越大速度越慢
var colee_left2=document.getElementById("colee_left2");
var colee_left1=document.getElementById("colee_left1");
var colee_left=document.getElementById("colee_left");
colee_left2.innerHTML=colee_left1.innerHTML
function Marquee3(){
if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)
colee_left.scrollLeft-=colee_left1.offsetWidth
else{
colee_left.scrollLeft++
}
}
var MyMar3=setInterval(Marquee3,speed)
colee_left.onmouseover=function() {clearInterval(MyMar3)}
colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}
</script></FONT>


如何使用--------后台---门户---模块模板---添加----文章/帖子/日志, 选择其中之一(彼岸网因为只开了博客----可以选择日志模块或图片模块, 前者是博客文章的图片, 后者是相册的图片

但是一个网页里面不能同时含有两个上述的滚动模块。

仔细地看, 大家会发现北美生活网的首页 却有两个滚动的图片模块, 其实一个是我使用上面的css模块实现的, 另一个则是用jQueryy来实现的。后者比较复杂涉及修改原代码, 而且效果不咋样(没有标题), 是我第一次测试使用, 就不赘言了


首发彼岸网~
http://www.bian-wang.com/discuz/home.php?mod=space&uid=10703&do=blog&id=1202


高兴

感动

鲜花
4

漂亮

酷毙

握手

同情

搞笑

刚表态过的朋友 (4 人)

发表评论 评论 (4 个评论)

回复 安茗 2016-3-5 22:04
辛苦了〜〜
回复 秋天的童话 2016-3-5 23:14
谢谢!
回复 北美生活网 2016-3-6 00:10
安茗: 辛苦了〜〜
   谢谢!!
回复 北美生活网 2016-3-6 00:11
秋天的童话: 谢谢!
边学边上, 赶鸭子上架,呵呵~

facelist doodle 涂鸦板

您需要登录后才可以评论 登录 | 注册

返回顶部