仿百度有啊通栏展示效果的JavaScript实现

4 浏览量更新于2024-08-31 收藏 88KB PDF 举报

"本文将介绍如何使用JavaScript实现一个仿百度有啊的通栏展示效果，包括页面布局、图片展示和文字描述的实现。" 在网页设计中，通栏展示是一种常见的布局方式，它通常用于商品展示或者信息推广，能够吸引用户的注意力并提供丰富的视觉体验。百度有啊作为一个曾经的电子商务平台，也采用了这种设计。以下是如何用JavaScript来实现这种效果的详细步骤。首先，我们需要创建基本的HTML结构，如下所示： ```html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/> <title>百度有啊通栏展示效果</title> <style type="text/css">  </style> </head> <body> <div id="box"> <div id="container" class="item">  </div> </div> <script type="text/javascript">  </script> </body> </html> ``` 在CSS部分，我们设定了一些通用的样式，如重置默认的内外边距，以及定义了页面的基本颜色、字体和链接样式。然后，我们为#container元素设置了相对定位，以便JavaScript可以对其进行绝对定位。同时，我们为.item类定义了绝对定位、宽度、高度、边框和透明度，使其在页面上显示为一个可滚动的容器。接下来是图片和文本的展示。我们可以创建两个子元素，一个用于图片（#container.item.pic），一个用于文本描述（#container.item.txt）。图片元素设置为浮动左并添加内边距，确保图片与容器边缘有一定的距离。文本描述元素同样浮动，以便在图片旁边显示。为了实现动态的通栏展示效果，我们需要使用JavaScript来切换显示的内容。这可以通过改变.container的left属性来实现，当一个项目离开视口时，将其向左移动，然后显示下一个项目。这可以通过定时器和事件监听来完成。以下是一个简化的JavaScript示例： ```javascript var items = document.querySelectorAll('#container .item'); var index = 0; function slide() { var item = items[index]; var leftPos = -item.offsetWidth; item.style.left = leftPos + 'px'; // 当动画完成后，更新索引并显示下一个项目 setTimeout(function() { item.style.left = '0'; index = (index + 1) % items.length; }, 1000); // 假设动画时间为1秒 } // 初始化，显示第一个项目 slide(); // 每隔一段时间自动滑动 setInterval(slide, 3000); // 假设3秒后自动滑动到下一个项目 ``` 以上代码创建了一个滑动效果，每隔3秒自动切换到下一个通栏展示的项目。请注意，实际的JavaScript代码可能需要根据具体的需求进行调整，例如添加过渡动画或考虑浏览器兼容性问题。通过结合HTML、CSS和JavaScript，我们可以创建一个仿百度有啊的通栏展示效果，提供用户友好的交互体验。这个过程涉及到页面布局、图片和文本的处理，以及动态效果的实现，是前端开发中的常见技能之一。

js仿百度有啊通栏展示效果实现代码仿百度有啊通栏展示效果实现代码

百度有啊通栏展示大家并不陌生吧，下面与大家分享下具体的实现js代码，感兴趣的朋友可以参考下哈

效果图如下：

页面代码：页面代码：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd">

<head>

<title>百度有啊通栏展示效果</title>

body,div,dl,dt,dd,ul,li,h3{margin:0;padding:0;}

body{color:#333;font:12px/1.5 arial;}

li{list-style:none;}

a:link,a:visited,a:active{color:#333;text-decoration:none;}

a:hover{color:#F30;}

img{border:none;}

#box{width:740px;margin:10px auto;}

#container{position:relative;height:232px;background:#FCFCFC;}

#container .item{position:absolute;top:0;left:0;width:492px;height:230px;overflow:hidden;background:#FAFAFA;border:1px

solid #ddd;z-index:1;opacity:1;}

#container .item .pic{float:left;width:210px;height:200px;display:inline;margin:15px;}

#container .item .pic img{width:210px;height:200px;vertical-align:top;}

#container .item .txt{float:left;width:250px;margin-top:12px;}

#container .item .txt dt{font-size:14px;font-weight:700;}

#container .item .txt .info{color:#999;}

#container .item .txt dd{height:24px;line-height:24px;}

#container .item .txt dd span{float:left;}

#container .item .txt .star{position:relative;float:left;height:12px;width:69px;margin:6px 0 0 5px;}

#container .item .txt .star .star_red{position:absolute;top:0;left:0;height:12px;width:69px;z-

index:2;background:url(http://js.fgm.cc/learn/lesson10/img/youa/star.png) repeat-x scroll left top transparent;}

#container .item .txt .star .star_grey{background:url(http://js.fgm.cc/learn/lesson10/img/youa/star.png) repeat-x scroll left -

15px transparent;height:12px;width:69px;}

#container .item .txt .pink,#container .item .txt .blue,#container .item .txt .green{color:#FFF;font-weight:700;margin-

right:2px;background:#F66B5B;padding:0 5px;}

#container .item .txt .blue{background:#96BAE7;}

#container .item .txt .green{background:#9CDBC3;}

#container .item .txt .comment{width:232px;height:99px;margin-top:10px;background:#FFF;border:1px solid #EAEAEA;}

#container .item .txt .comment h3{font-size:12px;font-weight:400;height:24px;line-height:24px;border-bottom:1px solid

#E9E9E9;padding:0 10px;}

#container .item .txt .comment .comment_list{width:220px;height:60px;overflow:hidden;margin:8px 0 0 10px;}

#container .item .txt .comment .comment_list ul{width:220px;}

#container .item .txt .comment .comment_list ul li{height:20px;line-height:20px;white-space:nowrap;}

#container .item .txt .comment .comment_list ul li b{color:#999;font-weight:400;}

#control{height:37px;text-align:center;background:url(http://js.fgm.cc/learn/lesson10/img/youa/bg.png) no-repeat;}

#control span{width:8px;height:8px;font-size:0;line-height:0;cursor:pointer;display:inline-block;background-

color:#FEFEFE;border:1px solid #BCC1C5;margin:13px 2px 2px;}

#control span.active{background-color:#848484;border:1px solid #6E6E6E;}

</style>

function Youa (obj)

{

this.obj = $(obj);

this.container = $("container");

this.control = $("control");

this.items = $$$("item", this.container);

this.iCenter = 2;

this.aSort = [];

this.timer = null;

this.oData = [

{left:0, zIndex:2, opacity:30},

{left:40, zIndex:3, opacity:60},

{left:124, zIndex:4, opacity:100},

下载后可阅读完整内容，剩余7页未读，立即下载

weixin_38665193

粉丝: 6
资源: 988

仿百度有啊通栏展示效果的JavaScript实现

JavaScript实现百度有啊通栏展示效果

途牛网站通栏幻灯片效果的jQuery实现代码

CSS实现通栏放大镜效果代码分享

百度有啊通栏图文混排展示的广告

模仿百度有啊通栏图片焦点图特效

jQuery仿途牛网站通栏幻灯片代码

jQuery仿途牛网站通栏幻灯片代码.zip

jQuery实现图片通栏五屏自动滚动效果代码

JS实现通栏带缩略图的自适应屏幕滚动效果焦点图代码.zip

jQuery宽屏通栏下拉菜单导航代码

最新资源