立即注册 登录
彼岸网 返回首页

东风的个人空间 http://www.bian-wang.com/discuz/?10703 [收藏] [复制] [分享] [RSS]

日志

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

热度 3已有 1514 次阅读2016-3-5 06:34 PM |个人分类:Discuz学习|系统分类:十万个怎么办| 图片, 网页

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

  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来实现的。后者比较复杂涉及修改原代码, 而且效果不咋样(没有标题), 是我第一次测试使用, 就不赘言了

首发彼岸网~


发表评论 评论 (12 个评论)

回复 legalstudy 2016-3-20 01:31 PM
回复 心随风舞 2016-3-17 02:50 PM
天香公主: 如东风兄所言,你可以加篇新日志试试。点击工具栏里的'编辑代码'后,把我日志里1)中的显示的那段html全部拷贝过去,保存日志,确认你的日志同样显示我1)中显示 ...
谢谢耐心指导。
回复 天香公主 2016-3-12 07:25 AM
心随风舞: 请问你的照片插在什么地方,哪里是照片的链接地址?菜鸟说外行话了~~~我想在博客里试一试,不知怎么做。
如东风兄所言,你可以加篇新日志试试。点击工具栏里的'编辑代码'后,把我日志里1)中的显示的那段html全部拷贝过去,保存日志,确认你的日志同样显示我1)中显示的滚动效果。

然后回到编辑代码状态,把html里的那些图片地址如 http://cdnwww.sinovision.net/data/attachment/album/201509/28/234344vw6e9ew72zv6z9la.jpg 改成你要放的图片。

我的html里有7个td,因为我要显示7幅图片。如果你的图片少于7幅就删去几个td,如要显示5幅就删去2个td。如果多于7幅,就类似的加几个td。
回复 东风 2016-3-12 03:07 AM
心随风舞: 我没有,只是想拿来就用,照葫芦画瓢,不懂原理,也没有时间深究,总是说有时间想学学,可永远也没有时间,多向您请教了。 ...
天香的这个说的也很清楚:http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1120
回复 东风 2016-3-12 02:32 AM
心随风舞: 请问你的照片插在什么地方,哪里是照片的链接地址?菜鸟说外行话了~~~我想在博客里试一试,不知怎么做。
可以在单独网页/博客,运行特定图片的滚动代码---在这里复制所有代码http://www.codefans.net/jscss/code/255.shtml
回复 心随风舞 2016-3-7 06:07 PM
天香公主: 没想到风舞也有同好,以后多交流。顺祝节日快乐!
我没有,只是想拿来就用,照葫芦画瓢,不懂原理,也没有时间深究,总是说有时间想学学,可永远也没有时间,多向您请教了。
回复 天香公主 2016-3-7 04:29 PM
心随风舞: 谢谢天香公主,看了你的代码,很清楚,可以照葫芦画瓢搬过来用了,有时间试一试。
没想到风舞也有同好,以后多交流。顺祝节日快乐!
回复 心随风舞 2016-3-7 03:50 PM
天香公主: 我也喜欢这个办法, 过去介绍过  http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1120。总觉得每个Discuz网站都用图文幻灯有点千篇 ...
谢谢天香公主,看了你的代码,很清楚,可以照葫芦画瓢搬过来用了,有时间试一试。
回复 心随风舞 2016-3-7 03:47 PM
请问你的照片插在什么地方,哪里是照片的链接地址?菜鸟说外行话了~~~我想在博客里试一试,不知怎么做。
回复 心随风舞 2016-3-7 03:42 PM
赞,进取好学的精神。
回复 东风 2016-3-5 10:57 PM
天香公主: 我也喜欢这个办法, 过去介绍过  http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1120。总觉得每个Discuz网站都用图文幻灯有点千篇 ...
早知道到你的博客里先搜一搜!!   简洁,干净,利索,对于我来说是更高的要求, 我得慢慢学哈!
回复 天香公主 2016-3-5 08:14 PM
我也喜欢这个办法, 过去介绍过  http://www.bian-wang.com/discuz/home.php?mod=space&uid=10005&do=blog&id=1120。总觉得每个Discuz网站都用图文幻灯有点千篇一律的感觉了。

facelist doodle 涂鸦板

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

小黑屋|Archiver|彼岸网  

Powered by Discuz! X3.1 © 2001-2014 Comsenz Inc.
GMT-4, 2024-3-28 02:09 PM , Processed in 0.023889 second(s), 11 queries. ,ApcOn

返回顶部