分享两个JS滑动门代码

2014年2月19日 10:41:43知更鸟

知更鸟

站长

2322
文章

0
粉丝

WordPress433,673阅读模式

这两个滑动门特效网上淘来的，简单修改了一下，纯HTML代码构建，未加PHP函数，其中的图片和链接可自行替换，如果自己动手能力较强，可以加上Wordpress函数直接调用文章，加到主题模板的任意位置，装饰一下博客也不错，有童鞋要求分享，整理一下发出来，供大家折腾。

代码一、鼠标悬停滑动

<div class="ad">
<div class="box_top">
<i class="rt"></i>
<i class="lt"></i>
</div>
<div class="ads_c">
<div class="droplist" id=lrtk>
<dl>
<dt><p>国内主机</p></dt>
<dd><a class=hot href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="https://zmingcx.com/wp-content/uploads/2013/10/idc1.jpg"></a></dd>
<dt><p> 国外主机</p></dt>
<dd style="display: none"><a class=hot href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="https://zmingcx.com/wp-content/uploads/2013/10/idc2.jpg"></a></dd>
<dt><p>专业博客主机</p></dt>
<dd style="display: none"><a class=hot href="http://idc.wopus.org/" target=_blank title="域名注册"><img src="https://zmingcx.com/wp-content/uploads/2013/10/idc3.jpg"></a></dd>
</dl>
</div>
<div class="clear"></div>
</div>
<div class="box-bottom">
<i class="lb"></i>
<i class="rb"></i>
</div>
</div>
<style type="text/css">
.droplist dl,.droplist dt,.droplist dd{
padding: 0px;
margin: 0px;
color: #fff;
}
.droplist {
width: 230px;
}
.droplist dl dt {
background: #c01e22;
border-top: 1px solid #ccc;
width: 230px;
text-indent: 20px;
line-height: 29px;
height: 29px;
}
.droplist dl dt p {
cursor: pointer;
}
.droplist dl dt p.droplist-hover {
background: #910004;
}
.droplist dl dd {
display: none;
overflow:hidden;
width: 230px;
height: 140px;
}
.droplist dl dd img {
}
</style>
<script type="text/javascript">
$.fn.extend({
adadvance:function(){
var listobj=this;
var objs =$('dt',this);
var view =objs.length-1;//parseInt( Math.random()*objs.length);
objs.each(function(i){
$(this).mouseover(function(){ $('dd',listobj).hide();$('.droplist-hover',listobj).attr("class","");$("dd a").fadeIn(1000);$(this).children("p").attr("class","droplist-hover");$(this).next().show()})
if(i!=view)
{
$(this).next().hide();
}
else
{
$(this).next().show();
$(this).children("p").attr("class","droplist-hover");
}
});
}
});
</script>
<script type=text/javascript>$('#lrtk').adadvance();</script>

代码二、自动切换

<div class="ad">
<div class="box_top">
<i class="rt"></i>
<i class="lt"></i>
</div>
<div class="ads_c">
<div id="idc_box">
<ul>
<dd class="hove"><tt class="hove">专业博客主机</tt><a href="http://idc.wopus.org/" target=_blank title="专业博客主机"><img src="https://zmingcx.com/wp-content/uploads/2013/10/idc-a.jpg"></a></dd>
<dd><tt class="">国外主机</tt><a href="http://idc.wopus.org/" target=_blank title="国外主机"><img src="https://zmingcx.com/wp-content/uploads/2013/10/idc-c.jpg"></a></dd>
<dd><tt class="">国内主机</tt><a href="http://idc.wopus.org/" target=_blank title="国内主机"><img src="https://zmingcx.com/wp-content/uploads/2013/10/idc-b.jpg"></a></dd>
</ul>
</div>
</div>
<div class="box-bottom">
<i class="lb"></i>
<i class="rb"></i>
</div>
</div>
<style type="text/css">
#idc_box ul, #idc_box dd, #idc_box tt{
margin:0px;
padding:0px;
float:left;
list-style: none;
}
#idc_box{
width:229px;
height:230px;
border-left: 1px solid #740a20;
}
#idc_box dd{
width:21px;
height:230px;
overflow:hidden;
position:relative;
}
#idc_box dd.hove{
width:187px;
text-align:right;
}
#idc_box dd tt{
width:20px;
height:230px;
top:0px;
left:0px;
color:#fff;
cursor:pointer;
text-align:center;
padding:20px 0 0 0;
background:#b9000d;
position:absolute;
border-right:1px solid #740a20;
}
#idc_box dd tt.hove{
background:#620317;
}
#hot_tag {
position:absolute;
padding:0 8px;
height:50px;
left:10px;
top:-1px;
border:1px solid #ccc;
}
</style>
<script type="text/javascript">
function myAddEvent(obj, sEvent, fn){
return obj.attachEvent ? obj.attachEvent('on' + sEvent, fn) : obj.addEventListener(sEvent, fn, false);
}
function Class(oParent, sClass){
var aElem = oParent.getElementsByTagName('*');
var aClass = [];
var i = 0;
for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
return aClass;
};
function css(obj, attr, value){
if(arguments.length == 2){
var style = obj.style,
currentStyle = obj.currentStyle;
if(typeof attr === 'string')return currentStyle ? currentStyle[attr] : getComputedStyle(obj, false)[attr];
for(var propName in attr)propName == 'opacity' ? (style.filter = "alpha(opacity=" + attr[propName] + ")", style.opacity = attr[propName] / 100) : style[propName] = attr[propName];
}else if(arguments.length == 3){
switch(attr){
case "width":
case "height":
case "paddingTop":
case "paddingRight":
case "paddingBottom":
case "paddingLeft":
case "top":
case "right":
case "bottom":
case "left":
case "marginTop":
case "marginRigth":
case "marginBottom":
case "marginLeft":
obj.style[attr] = value + "px";
break;
case "opacity":
obj.style.filter = "alpha(opacity=" + value + ")";
obj.style.opacity = value / 100;
break;
default:
obj.style[attr] = value
}
}
};
function extend(destination, source){
for (var propName in source) destination[propName] = source[propName];
return destination
};
function doMove(obj, json, fnEnd){
clearInterval(obj.timer);
obj.iSpeed = 0;
fnEnd = extend({
type: "buffer",
callback: function() {}
}, fnEnd);
obj.timer = setInterval(function(){
var iCur = 0,
iStop = true;
for(var propName in json){
iCur = parseFloat(css(obj, propName));
propName == 'opacity' && (iCur = Math.round(iCur * 100));
switch(fnEnd.type){
case 'buffer':
obj.iSpeed = (json[propName] - iCur) / 5;
obj.iSpeed = obj.iSpeed > 0 ? Math.ceil(obj.iSpeed) : Math.floor(obj.iSpeed);
json[propName] == iCur || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
case 'elasticity':
obj.iSpeed += (json[propName] - iCur) / 5;
obj.iSpeed *= 0.75;
Math.abs(json[propName] - iCur) <= 1 && Math.abs(obj.iSpeed) <= 1 ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
case 'accelerate':
obj.iSpeed = obj.iSpeed + 5;
iCur >= json[propName] ? css(obj, propName, json[propName]) : css(obj, propName, json[propName]) || (iStop = false, css(obj, propName, iCur + obj.iSpeed));
break;
}
}
if(iStop){
clearInterval(obj.timer);
obj.timer = null;
obj.iSpeed = 0;
fnEnd.callback();
}
},30);
};
</script>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('idc_box')
var aSpan = document.getElementsByTagName('tt');
var aLi = document.getElementsByTagName('dd');
var playtime = null;
var iNow = 0;
for(i=0;i<aSpan.length;i++){
aSpan[i].index = i;
aSpan[i].onclick = function(){
for(var len=aLi.length,i=0;i<len;i++)doMove(aLi[i], {width:21});
for(var len=aSpan.length,i=0;i<len;i++)aSpan[i].className = '';
this.className = 'hove';
doMove(this.parentNode, {width:187});
iNow = this.index;
};
}
playtime = setInterval(tab,3500);
oBox.onmouseover = function(){
clearInterval(playtime);
}
oBox.onmouseout = function(){
playtime = setInterval(tab,3500);
}
function tab(){
iNow == aLi.length-1 ? iNow = 0 : iNow++;
aSpan[iNow].onclick();
}
};
</script>

说明：

代码中的DIV是HotNews主题的可根据自己所使用主题进行修改。

代码直接加到主题模板中会比较乱，可以在所用主题目录中新建两个PHP模板文件，比如：adc-1.php、adc-2.php将上面的代码分别粘贴进去。然后在主题模板适当位置采用这种形式调用即可：

<?php include('abc-1.php'); ?>
<?php include('abc-2.php'); ?>

本站文章大部分为原创，用于个人学习记录，可能对您有所帮助，仅供参考！

我的微信

微信号已复制

本站原创文章转载请注明文章出处及链接，谢谢合作！

获取本主题

598845006

咨询主题请加Q：598845006

多功能主题 Begin

yumanutong 6
2014年2月19日 17:12:16 广东省东莞市 1F
回复
我要不要告诉你，我前段时间就仿下了代码呢？哈哈
轻微生活 1
2014年2月19日 22:26:38 四川省成都市 2F
回复
其实之前在访问博客的时候就发现了，非常好看，非常喜欢，后来就借用了测试，还真成功了，不过图片素材暂缺。支持支持
- yumanutong 6
  2014年2月20日 22:58:13 广东省东莞市 B1
  回复
  @ 轻微生活百度背景素材，然后挑选下
yumanutong 6
2014年2月20日 22:57:26 广东省东莞市 3F
回复
鸟哥，我又来反馈BUG了，就是侧边这种跟随广告，我放了一个这样的代码：几个描述文字，下面用个二维码图片，结果在文章页面，不能拖到最下面，也就是会反弹上来，最下面的那个部分无法滑动下去，但是去掉那个文字就可以了，具体是什么原因造成我不知道，你看看咯！
- 知更鸟
  2014年2月21日 10:32:59 中国 B1
  回复
  @ yumanutong 自己乱改页脚结构造成的，用原主题footer文件替换就正常了
  - yumanutong 6
    2014年2月21日 14:10:44 广东省东莞市 B2
    回复
    @ 知更鸟好吧，也许吧，反正我用纯图片了，你要不试试在图片之外加个文字试试看？
我爱上QQ 6
2014年2月21日 11:37:44 江西省吉安市 4F
回复
这个效果不错，赞…
爱萌宠 1
2014年2月22日 00:59:19 四川省成都市 5F
回复
很喜欢这个效果。
- Win7en乐园 8
  2014年3月7日 15:04:05 江苏省苏州市 B1
  回复
  @ 爱萌宠同样的喜欢
aunsen 5
2014年2月23日 18:07:19 陕西省安康市 6F
回复
鸟哥V5鸟哥87
撩闲爱迪生 2
2014年2月24日 15:15:54 江西省南昌市 7F
回复
鸟哥，你的留言框是怎么做得到的啊，主题默认的很不美观呢，想改一下
Win7en乐园 8
2014年2月25日 14:54:48 浙江省杭州市 8F
回复
鸟哥，还在吗？好久没来看望了
狂人日记 2
2014年2月26日 23:16:19 江苏省扬州市 9F
回复
有技术，愿意分享，哈哈。
WordPress主题 5
2014年2月28日 10:35:10 四川省成都市 10F
回复
好东西。。。
WordPress主题 5
2014年3月1日 11:56:05 天津市 11F
回复
鸟哥的百度站内搜索貌似不管用
Win7en乐园 8
2014年3月1日 13:21:31 浙江省杭州市 12F
回复
很棒啊，看上去！
春熙博客 4
2014年3月2日 23:30:52 广东省广州市 13F
回复
过来看看了期待
番茄 2
2014年3月5日 11:10:53 湖北省荆州市 14F
回复
这效果不错，折腾看看。
高磊 0
2014年3月5日 15:20:40 北京市 15F
回复
经典的代码
两天 6
2014年3月5日 18:09:17 山东省 16F
回复
之前我查看过源码
随缘的天空 0
2014年3月5日 20:42:23 浙江省台州市 17F
回复
我想要更改滑动门的宽度变的更宽以便和我的主题侧边更搭，需要更改什么呢
- 知更鸟
  2014年3月5日 23:15:01 中国 B1
  回复
  @ 随缘的天空修改代码中所有230px的数字大小
  - Win7en乐园 8
    2014年3月6日 12:14:27 江苏省苏州市 B2
    回复
    @ 知更鸟学习了，感谢
唯美的句子 1
2014年3月6日 23:47:23 山东省济南市 18F
回复
学习了
我爱上QQ 6
2014年3月7日 10:30:34 江西省萍乡市 19F
回复
现在好流行用新浪微博做图床额，嘿嘿…
- 知更鸟
  2014年3月7日 11:02:13 中国 B1
  回复
  @ 我爱上QQ 是的，速度快无限制，就是不知道能用到什么时候
网趣网 0
2014年3月7日 16:14:41 广东省深圳市宝安区 20F
回复
你好,请问下为什么我的网站是全部加载了才显示呢?不能加载一点显示一点吗
- Win7en乐园 8
  2014年3月8日 14:23:07 江苏省苏州市 B1
  回复
  @ 网趣网这个我也是这样的情况
simonxu1207 0
2014年3月10日 22:33:21 湖南省长沙市 21F
回复
测试图片
老董 0
2014年3月11日 12:24:43 江苏省南通市 22F
回复
第二个不错，适合侧边使用。
loading 2
2014年3月11日 15:11:30 北京市 23F
回复
这个主题的文章里图片显示不全，如何解决？我看你这里显示没有问题啊，请教一下
- 知更鸟
  2014年3月11日 16:18:21 中国 B1
  回复
  @ loading 手动把图片拖小
银鸥 0
2014年3月11日 15:47:04 北京市 24F
回复
小站过来看看。学习学习
kpopcomedy 6
2014年3月11日 16:52:59 重庆市铜梁县 25F
回复
鸟哥，页面旁边的广告位能否扩大？现在的230×230有点尴尬，扩到300显示效果会更好
营销资源网 3
2014年3月11日 20:46:09 湖北省武汉市 26F
回复
鸟哥，你的文章现在更新的不太勤，每天过来想看看有没有新的内容或者技术文，但是很失望……
- Win7en乐园 8
  2014年3月13日 12:59:13 江苏省苏州市 B1
  回复
  @ 营销资源网我也是，但是毕竟鸟哥也不是整天写博客啊
  - 营销资源网 3
    2014年3月13日 21:54:25 湖北省武汉市 B2
    回复
    @ Win7en乐园那倒也是，想问下页脚这边的“代码高亮视频截图”这一行的导航是怎样设置的
爱浮夸 1
2014年3月13日 21:51:47 广东省广州市增城区 27F
回复
咋没个演示效果看看呀。。
sinseco 0
2014年3月15日 12:09:27 湖北省十堰市 28F
回复
鸟哥调用不显示是怎么回事
hanggecrazy 0
2014年4月6日 23:45:12 北京市朝阳区 29F
回复
鸟哥这段代码在chrome下兼容性有待完善。
智享互联 3
2014年4月10日 08:06:01 山西省太原市 30F
回复
看喜欢的人挺多，试试去。

WordPress

Plugins

Web前端

设计资源

分享两个JS滑动门代码

在WordPress分类归档页面显示子分类链接

WordPress 5.2 预计4月30日发布

在 WordPress 后台直接复制文章

细数HotNews pro2.4 版“用电大户”

来自外部的引用

发表评论

WordPress多功能主题： Begin

购买本站主题请加QQ：598845006