您正在使用 IPV4 [54.224.52.210] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】云服务器、云数据库、COS、CDN、短信等云产品特惠热卖中      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 016
2024年 劳动节 043
2025年 元 旦 288
2025年 春 节 316
 
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
js实现文字垂直滚动和鼠标悬停效果
内容摘要: HTML布局:ulclass='recommend-info'lispanclass='push'荐/spanahref='javascript:;'1高档社区,经典户型,机会难得,稍纵即逝!仅售66万!/aspanclass='htype'66万3室2厅1卫120㎡/span/lilispanclass='push'荐/spanahref='javascr......
HTML布局:

<ulclass="recommend-info">

<li>

<spanclass="push">荐</span>

<ahref="javascript:;">1高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>

<spanclass="htype">66万3室2厅1卫120㎡</span>

</li>

<li>

<spanclass="push">荐</span>

<ahref="javascript:;">2高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>

<spanclass="htype">66万3室2厅1卫120㎡</span>

</li>

<li>

<spanclass="push">荐</span>

<ahref="javascript:;">3高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>

<spanclass="htype">66万3室2厅1卫120㎡</span>

</li>

<li>

<spanclass="push">荐</span>

<ahref="javascript:;">4高档社区,经典户型,机会难得,稍纵即逝!仅售66万!</a>

<spanclass="htype">66万3室2厅1卫120㎡</span>

</li>

</ul>

CSS样式:

<style>

.recommend-info{

width:630px;

height:42px;

padding:010px;

margin-top:12px;

margin-bottom:18px;

border:1pxdashed#DFDFDF;

overflow:hidden;

}

.recommend-infoli{

overflow:hidden;

font-size:14px;

line-height:42px;

}

.recommend-infoli.push{

float:left;

display:inline-block;

width:18px;

height:17px;

margin-top:12px;

margin-right:10px;

background:#D95B4E;

font-size:12px;

color:#fff;

text-align:center;

line-height:17px;

}

.recommend-infolia{

float:left;

color:#333;

}

.recommend-infolia:hover{

color:#da5c4f;

}

.recommend-infoli.htype{

float:right;

color:#999;

}

</style>

JS脚本:

<script>

//不断把新的第一个追加到后面

functionvscroll(){

varfrtEle=$('.recommend-infoli:first');

frtEle.animate({'marginTop':-$('.recommend-infoli').height()},500,function(){

frtEle.css('marginTop',0);

$('.recommend-info').append(frtEle);

});

}

varstartInterval=setInterval(vscroll,3000);

//鼠标悬停

$('.recommend-infoli').hover(function(){

clearInterval(startInterval);

},function(){

startInterval=setInterval(vscroll,3000);

});

</script>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:通过HTML+CSS实现折叠样式完整代码

 

下一篇:js设置鼠标悬停改变背景色实现详解

发布日期:2023/3/28
手机扫二维码直达本页
发布时间:12:41:29
点  击:4
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....