JS仿万科底部的新闻滑动特效代码
废话不多说了，直接给大家贴代码了，具体代码如下所述：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿万科的底部的新闻滑动特效</title>
<style>
* {
padding: 0;
margin: 0;
}
#subject {
position: relative;
width: 80%;
height: 165px;
background: skyblue;
margin: 200px auto;
overflow: hidden;
}
#subject > ul > li {
position: absolute;
float: left;
list-style: none;
width: 40%;
height: 165px;
font-size: 48px;
text-align: center;
color: #fff;
line-height: 165px;
transition: 0.5s;
}
.item1 {
background: orange;
left: 0;
z-index: 1;
}
/*hover:item1*/
#subject.state-1 .item2,
.item2 {
background: deepskyblue;
left: 40%;
z-index: 2;
}
/*hover:item2*/
#subject.state-4 .item2,
#subject.state-3 .item2,
#subject.state-2 .item2 {
left: 20%;
}
/*hover:item3*/
#subject.state-4 .item3,
#subject.state-3 .item3 {
left: 40%;
}
/*hover:item4*/
#subject.state-4 .item4{
left: 60%;
}
#subject.state-1 .item3,
.item3 {
background: mediumseagreen;
left: 60%;
z-index: 3;
}
#subject.state-3 .item4,
#subject.state-2 .item4,
#subject.state-1 .item4,
.item4 {
background: pink;
left: 80%;
z-index: 4;
}
</style>
</head>
<body>
<div id="subject" class="wrapper">
<ul>
<li class="item item1">1</li>
<li class="item item2">2</li>
<li class="item item3">3</li>
<li class="item item4">4</li>
</ul>
</div>
<script>
$(function () {
$('.item').hover(function () {
if ($(this).hasClass('item1')) {
$('#subject').removeClass().addClass('state-1');
}
if ($(this).hasClass('item2')) {
$('#subject').removeClass().addClass('state-2');
}
if ($(this).hasClass('item3')) {
$('#subject').removeClass().addClass('state-3');
}
if ($(this).hasClass('item4')) {
$('#subject').removeClass().addClass('state-4');
}
});
$('#subject').mouseleave(function () {
$('#subject').removeClass();
});
});
</script>
</body>
</html>
总结
以上所述是小编给大家介绍的JS仿万科底部的新闻滑动特效代码，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！
相关推荐
-
js实现滑动到页面底部自动加载更多功能
话不多说,请看代码: //滚动条到页面底部加载更多案例 $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); //滚动条距离顶部的高度 var scrollHeight = $(document).height(); //当前页面的总高度 var clientHeight = $(this).height(); //当前可视的页面高度 // console.log("top:"+scrollTop+"
-
JS仿万科底部的新闻滑动特效代码
废话不多说了,直接给大家贴代码了,具体代码如下所述: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>仿万科的底部的新闻滑动特效</title> <style> * { padding: 0; margin: 0; } #subject { position: relative; width:
-
js仿淘宝的拼音检索特效代码
以下是HTML网页特效代码,点击运行按钮可查看效果 js仿taobao效果 *{ margin:0;padding:0;} body{ font:normal 12px Verdana, Arial, Helvetica, sans-serif; text- align:center;} #warpper{ position:absolute; left:100px; top:100px;} h5{ float:left;} a{ text-decoration:underline; curso
-
JS实现仿苹果底部任务栏菜单效果代码
本文实例讲述了JS实现仿苹果底部任务栏菜单效果代码.分享给大家供大家参考.具体如下: 这款仿苹果电脑的底部任务栏菜单,是纯JavaScript实现的菜单特效,鼠标放上有响应效果,菜单图标会变大,而且动画效果非常流畅,以前发过这种效果,但是是使用了jQuery实现的,今天这个没有jQuery插件哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-apple-buttom-nav-menu-style-codes/ 具体代码如下: <!D
-
jQuery实现的个性化返回底部与返回顶部特效代码
本文实例讲述了jQuery实现的个性化返回底部与返回顶部特效代码.分享给大家供大家参考,具体如下: 运用了所学习的jQuery特性,制作了这款效果,该效果集结了返回底部.返回顶部.网站留言导航三种功能,网站留言的链接你可以修改为任意一个您想导航的链接,这个可以灵活运用了.本款效果的亮点在于兼容性和动画效果,以及设计美观的箭头等. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-buttom-style-codes/
-
jquery实现滑动特效代码
在项目中,有需求要使用jquery实现滑动效果,于是把相关内容整理如下,下文介绍了很详细,有文字说明和代码分析,需要的朋友可以来学习下. 实现方式一: .slideUp([duration][,complete])--目标元素向上滑入隐藏: .slideDown([duration][,complete])--目标元素向下滑出显示: .slideToggle([duration][,complete])--目标元素隐藏则向下滑出显示,否则向上滑入隐藏: 注:duration为方法执行的时间区间
-
js实现图片放大和拖拽特效代码分享
本文实例讲述了js实现图片放大和拖拽特效代码.分享给大家供大家参考.具体如下: js实现图片放大和拖拽特效是一款非常实用的js特效,实现了图片的放大和拖拽功能,没用用到jquery插件,是用原生javascript实现的,除了点击放大和缩小按钮来控制图片的放大缩小,还可以使用鼠标的滚轮控制图片的缩放. 运行效果图: ----------------------查看效果 源码下载----------------------- 小提示:浏览
-
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
本文实例讲述了JS+CSS实现的漂亮渐变背景特效代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> JS配合CSS实现的漂亮渐变背景特效6个实例 </title> <script> var setGradient = (function() { var p_dCanvas = document.createElement('canvas'); var p_useCanvas =
-
JS实现来回出现文字的状态栏特效代码
本文实例讲述了JS实现来回出现文字的状态栏特效代码.分享给大家供大家参考,具体如下: 运行这款来回出现文字的状态栏特效时,请注意页面左下角的状态栏.貌似IE8以上版本看不到效果唉.那么究竟是如何实现的呢?主要是用函数来显示消息,根据place的值取当前需显示的字符串,准备在300毫秒后收起显示,将需取的字符串长度计数器加一准备下一次显示:同时使用函数隐藏消息,取Message右边的一定长度的字符串,设定消隐下一个字符的延时. 运行效果截图如下: 在线演示地址如下: http://demo.jb5
-
js+css实现文字散开重组动画特效代码分享
文字散开重组动画这款特效我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒. 运行效果图: 这是输入HAPPY后安按钮后效果,当然可以随便输文字 好酷的特效,连中文都支持,看如下图: 为大家分享的文字散开重组动画特效代码如下 <html> <head> <meta charset="UTF-8"> <title>文字散开重组动画特效</title> <l
-
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
先给大家展示下效果图,如果大家感觉还不错,请参考实现代码哦! HTML: <div class="container iden_top"> <ul> <li> <p class='iden_add_name'>应用标识1</p> <span class="iden_top_button"></span> <div class="iden_top_dete"&