|
|
发表于 2012-4-10 21:11:56
|
显示全部楼层
|阅读模式
来自 中国–浙江–台州–椒江区
今天不说什么技巧，我在论坛上发现了“紫将龙天祁”童鞋做的一款能够自由伸缩的幻灯片，现在把代码贴出来：
将以下代码插入<head></head>中
<script language="javascript" type="text/javascript">
<!--
$(function(){
$("dl.tbox dt span.label a[_for]").mouseover(function(){
$(this).parents("span.label").children("a[_for]").removeClass("thisclass").parents("dl.tbox").children("dd").hide();
$(this).addClass("thisclass").blur();
$("#"+$(this).attr("_for")).show();
});
$("a[_for=uc_member]").mouseover();
});
function CheckLogin(){
var taget_obj = document.getElementById('_userlogin');
myajax = new DedeAjax(taget_obj,false,false,'','','');
myajax.SendGet2("{dede:global.cfg_cmspath/}/member/ajax_loginsta.php");
DedeXHTTP = null;
}
-->
</script>
css代码：
<link href="../style/dedecms.css" rel="stylesheet" type="text/css" />
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
body { background:#FFF; color:#333; font:12px/1.6em Helvetica, Arial, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#0287CA; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
legend { display:none; }
em, strong, cite, th { font-style:normal; font-weight:normal; }
input, textarea, select, button { font:12px Helvetica, Arial, sans-serif; }
table { border-collapse:collapse; }
html { overflow:-moz-scrollbars-vertical; } /*Always show Firefox scrollbar*/
/* iFocus style */
#ifocus { width:525px; height:245px; margin:20px; border:1px solid #DEDEDE; background:#F8F8F8; }
#ifocus_pic { display:inline; position:relative; float:left; width:410px; height:225px; overflow:hidden; margin:10px 0 0 10px; }
#ifocus_piclist { position:absolute; }
#ifocus_piclist li { width:410px; height:225px; overflow:hidden; }
#ifocus_piclist img { width:410px; height:225px; }
#ifocus_btn { display:inline; float:right; width:91px; margin:9px 9px 0 0; }
#ifocus_btn li { width:91px; height:57px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50); }
#ifocus_btn img { width:75px; height:45px; margin:7px 0 0 11px; }
#ifocus_btn .current { background: url(images/ifocus_btn_bg.gif) no-repeat; 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 id="ifocus">
<div id="ifocus_pic">
<div id="ifocus_piclist" style="left:0; top:0;">
<ul>
{dede:arclist flag='f' row='5'}
<li><a href="[field:arcurl/]" title="[field:title function='html2text(@me)'/]" target=_blank><img src="[field:litpic/]" alt="[field:title/]" /></a></li>
{/dede:arclist}
</ul>
</div>
<div id="ifocus_opdiv"></div>
<div id="ifocus_tx">
<ul>
{dede:arclist flag='f' row='1' limit='0,1'}
<li class="current">[field:title/]</li>
{/dede:arclist}
{dede:arclist flag='f' row='4'limit='1,1'}
<li class="normal">[field:title/]</li>
{/dede:arclist} {dede:arclist flag='f' row='4'limit='2,1'}
<li class="normal">[field:title/]</li>
{/dede:arclist}
{dede:arclist flag='f' row='4'limit='3,1'}
<li class="normal">[field:title/]</li>
{/dede:arclist}
{dede:arclist flag='f' row='4'limit='4,1'}
<li class="normal">[field:title/]</li>
{/dede:arclist}
</ul>
</div>
</div>
<div id="ifocus_btn">
<ul>
{dede:arclist flag='f' row='4' limit='0,1'}
<li class="current"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]" /></li>
{/dede:arclist}
{dede:arclist flag='f' row='4' limit='1,1'}
<li class="normal"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]" /></li>
{/dede:arclist}
{dede:arclist flag='f' row='4' limit='2,1'}
<li class="normal"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]" /></li>
{/dede:arclist}
{dede:arclist flag='f' row='4' limit='3,1'}
<li class="normal"><img src="[field:litpic/]" alt="[field:title function='html2text(@me)'/]" /></li>
{/dede:arclist}
</ul>
</div>
</div><!--ifocus end-->
如果这样很乱的话可以分开将CSS片段加载到dedecms.css 和将JS片段记载一个标题.js加载在头部文件中也可以
|
|
/1 
|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛
( 豫ICP备2022021143号-1 )
置顶卡
变色卡
千斤顶