`
mutongwu
  • 浏览: 452447 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

简单的新闻图片页面滑动展示

IECSSHTML 
阅读更多
HTML页面代码 

<body onload="init();">
<h2>Tab Menu 6</h2>
<div id="div1">
	<div id="divWrapper">
	<ul>
		<li id="cnt1" class="showContent">
			<div class="imgDiv">
				<a href="#"><img class="imgCls" src="img/1.jpg" title="标题标题标题标题标题标题1" /></a>
			</div>
			<div class="opacityBg"></div>
			<div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题1</span></a></div>
		</li>
		<li id="cnt2" class="hideContent">
			<div class="imgDiv">
				<a href="#"><img class="imgCls" src="img/2.jpg" title="标题标题标题标题标题标题2" /></a>
			</div>
			<div class="opacityBg"></div>
			<div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题2</span></a></div>
		</li>
		<li id="cnt3" class="hideContent">
			<div class="imgDiv">
				<a href="#"><img class="imgCls" src="img/3.jpg" title="标题标题标题标题标题标题3" /></a>
			</div>
			<div class="opacityBg"></div>
			<div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题3</span></a></div>
		</li>
		<li id="cnt4" class="hideContent">
			<div class="imgDiv">
				<a href="#"><img class="imgCls" src="img/4.jpg" title="标题标题标题标题标题标题4" /></a>
			</div>
			<div class="opacityBg"></div>
			<div class="imgTitle"><a href="#" ><span class="titleCnt">标题标题标题标题标题标题4</span></a></div>
		</li>
		</ul>
	</div>
	<div id="menuDiv">
		<ul><li class="menuActive">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		</ul>
	</div>

</div>
<div style="clear:both;margin:0px;padding:0px;border:1px solid #000;diplay:block">some other message</div>

</body>


相关CSS 

/* ie6的hack */
<!--[if ie 6]>
<style>
.opacityBg{
	top:-45px;
}
.imgTitle{
	top:-63px;
}	
</style>
<![endif]-->


*{
	margin:0px;
	padding:0px;
	border:none;
}
body{
}
ul,li{
	list-style-type:none;
}
img{
	border:none;
}
/*---------------------------------------------------------------*/
#div1{
	display:block;
	margin-left:300px;
	background-color:#ccc;
	width:300px;
}
#divWrapper{
	width:300px;
	height:300px;
	overflow:hidden;
}
.imgDiv{
	height:282px;
}
.imgCls{
	width:300px;
	height:320px;
}
.opacityBg{
	position:relative;
	border:none;
	width:300px;
	height:20px;
	background-color:#99ccff;
	filter:alpha(opacity=50);
	-moz-opacity:0.5;
	opacity: 0.5;
}

.imgTitle{
	position:relative;
	top:-20px;
}
.imgTitle a{
	font:90%;
	text-decoration :none;
	color:#000;
}
.imgTitle a:hover{
	font:90%;
	color:#990000;
	text-decoration :underline ;
}

/*
	------------------------------------------------------
*/
#menuDiv{
	width:300px;
	background-color:#999;
}
#menuDiv ul{
	display:inline;
	margin-left:200px;
	padding:0px;
	background-color:#999;
}
#menuDiv ul li{
	color:#fff;
	background-color:#000;
	display:inline;
	cursor:pointer;
	padding:0 2px;
	margin:0 2px;
}
/*
.showContent{
	display:block;
}*/
.hideContent{
	display:none;
}
#menuDiv ul li.menuActive{
	color:#fff;
	background-color:#ff0000;
}


实现的js 

function init(){
....
    var menuDiv = document.getElementById('menuDiv');
//    EventUtil.addHandler(menuDiv,'click',menuDivOnclick);
    EventUtil.addHandler(menuDiv,'mouseover',menuDivOnMouseOver);
    EventUtil.addHandler(menuDiv,'mouseout',menuDivOnMouseOut);
    
    //全局变量
    g_changeCounter = 1;
    g_changeTimer = null;
    //启动自动切换
    activeTimer();

}

function activeTimer(){
    g_changeTimer = setInterval(function(){
        if(g_changeCounter == 5){
            g_changeCounter = 1;
        }
        changeImage(g_changeCounter);
        changeAcitveMenu(g_changeCounter);
        g_changeCounter++;
    },3000);
    
}
function cancelTimer(index){
    clearInterval(g_changeTimer);
    g_changeCounter = index || 1;
}
function changeImage(index){
    var lis = $('#divWrapper li');
    for(var i=0,len = lis.length; i < len; i++){
        if(i != index -1){
            lis[i].className = 'hideContent';
        }
        else{
             lis[i].className = '';
        }
    }
}
function changeAcitveMenu(index){
    var menuDiv = document.getElementById('menuDiv');
    var lis = menuDiv.getElementsByTagName('li');  
    for(var i=0,len=lis.length; i < len; i++){
        if(i+1 == index){
            lis[i].className = 'menuActive';
        }
        else{
            lis[i].className = '';
        }
    }
    
}
function menuDivOnclick(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(target.tagName.toLowerCase() == 'li'){
        var index = target.firstChild.nodeValue;        
        changeAcitveMenu(index);
        changeImage(index);
    }
}
function menuDivOnMouseOver(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(target.tagName.toLowerCase() == 'li'){
        var index = target.firstChild.nodeValue;        
        cancelTimer(index);
        changeAcitveMenu(index);
        changeImage(index);
    }
}
function menuDivOnMouseOut(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if(target.tagName.toLowerCase() == 'li'){    
        activeTimer();
    }   
}
  • 大小: 23.2 KB
分享到：
| 简单滑动内容区域
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    图片轮播和页面滑动

    在Android开发中，图片轮播和页面滑动是常见的用户界面交互功能，广泛应用于各种应用程序，如新闻阅读、产品展示等。本节我们将深入探讨如何使用`ViewFlipper`组件来实现图片轮播，并结合手势识别实现手动滑动，以及...

    滑动图片展示广告效果.rar

    在IT行业中，滑动图片展示广告效果是一种常见的网页设计元素，尤其在电子商务、新闻网站以及各种营销页面中广泛应用。这种效果通常由JavaScript（JS）实现，以创建动态、吸引人的用户体验，提高用户对产品的关注度和...

    滑动图片展示广告效果

    标题"滑动图片展示广告效果"所指的是一种常见的网页设计技术，它用于制作动态的、引人入胜的广告展示，以提高用户体验并增加用户参与度。这种技术通常被称为轮播图或幻灯片展示，广泛应用于网站的首页、产品展示或...

    jQuery手风琴图片滑动展示.zip

    【jQuery手风琴图片滑动展示】是一种常见的网页交互效果，它将多张图片以折叠式的方式呈现，用户可以逐个展开查看，就像手风琴展开和收起时的动态效果。这种效果常用于产品展示、新闻概览或菜单导航等场景，既节省...

    腾讯首页图片滑动效果JS

    【腾讯首页图片滑动效果JS】是网页设计中常见的动态元素，主要利用JavaScript技术来实现。JavaScript是一种轻量级的、解释型的编程语言，广泛应用于网页和互联网应用的交互式设计。它允许开发者在不刷新整个页面的...

    vue实现新闻展示页的步骤详解

    图片展示       采用的技术 轮播图使用：swiper  zepto.js  vue.js  vue.resource.js  vue-router.js 滑动插件：iscroll.js 界面样式采用的 weui 设计的思路 因为使用了vue.js 每个分类的样式不一样...

    jQuery图片展示滑动切换特效

    "jQuery图片展示滑动切换特效"是利用jQuery的特性实现的一种常见的网页动态效果，用于吸引用户的注意力并提升用户体验。这种特效通常应用于产品展示、相册浏览或者新闻滚动等场景。 首先，我们需要理解jQuery的基本...

    JS多种新闻图片切换效果

    在这个项目中，“JS多种新闻图片切换效果”指的是使用JavaScript实现的不同类型的新闻图片轮播功能。这类效果通常用于新闻网站或者资讯平台，以动态展示多张图片，提高用户的浏览体验。 1. 图片切换效果类型： - ...

    asp.net图片滑动效果

    ASP.NET图片滑动效果是网页设计中常见的动态展示方式，常用于产品展示、新闻轮播等场景，类似于淘宝主页顶部的广告轮播图。在ASP.NET框架下，我们可以利用多种技术来实现这一功能，比如使用AJAX、jQuery库或者自定义...

    jQuery图片滑动特效集合.rar

    在网页设计中，图片滑动特效是一种常用且吸引用户注意力的设计元素，尤其在展示产品、新闻或者图片轮播时。jQuery库因其丰富的API和易于使用的特性，成为实现这些特效的首选工具。"jQuery图片滑动特效集合"这个资源...

    文字 +图片 滑动切换 展示特效 js javascript

    "文字+图片滑动切换展示特效"是一种常见的网页设计技术，它结合了文本和图像，通过js（JavaScript）和javascript库实现动态的切换展示，给用户带来视觉上的吸引力。这种特效常用于产品展示、新闻滚动、广告轮播等...

    新闻首页图片展示

    本文将深入探讨如何实现一个高效且用户体验良好的新闻首页图片展示功能，主要基于给定的"新闻首页图片展示"标题和描述，以及关联的"IOS新闻图片"标签。 首先，我们要了解UIScrollView的基本概念。UIScrollView是iOS...

    迅雷下载中心图片滑动效果

    在网页设计中，图片滑动效果通常用于展示一组相关的图片，如产品展示、新闻更新或者用户评价等。这种效果可以使页面更加生动，吸引用户的注意力。 【描述】中的“从迅雷下载中心首页提取出来”暗示了这个图片滑动...

    实现网易新闻客户端左右滑动广告

    6. **滑动手势处理**：在ViewPager中，滑动手势已经内置，但可以根据需求自定义OnPageChangeListener监听页面滑动事件。 在实际开发中，我们还需要考虑其他因素，比如广告加载优化（如使用缓存），错误处理（网络...

    图片滑动效果，图片滚动

    在IT行业中，图片滑动效果和图片滚动是网页和应用程序设计中常见的视觉元素，尤其在产品展示、新闻浏览和电商应用等场景下尤为常见。这种效果可以为用户提供更直观、流畅的互动体验，使得信息展示更加生动且易于浏览...

    jQuery图片滑动特效集合SuperSlide

    SuperSlide是基于jQuery的开源插件，其核心功能在于创建各种动态的图片滑动展示。该插件支持多种展示模式，如横向滑动、纵向滑动、淡入淡出等，适用于新闻资讯、产品展示、图片画廊等多种场景。通过简单的配置，...

    仿网易新闻3.5版上下滑动引导页

    Android-DirectionalViewPager是由第三方开发者提供的一个扩展性极强的ViewPager组件，它支持横向和纵向滑动，与原生的ViewPager相比，增加了对垂直滑动的支持，使得开发者可以更灵活地设计页面滑动效果。...

    jQuery左右滑动切换图片代码.zip

    这种技术可以提升用户体验，使用户通过简单的左右滑动手势就能浏览一系列图片或内容，常见于网站的首页、产品展示区或者新闻滚动等位置。 在实现这个功能时，首先我们需要在HTML中创建一个容器，用于存放所有的图片...

    Android导航菜单图片viewpage滑动

    "Android导航菜单图片viewpage滑动"这个主题主要关注如何实现一个带有图片滑动功能的导航菜单，它有三个关键点：图片的左右拖动滑动、固定内容以及类似新闻客户端的交互体验。 首先，我们来看第一个知识点——**...

    类似新浪搜狐新闻图集网页图片展示代码jquery插

    这种图片展示插件常用于新闻网站、博客、产品展示页面等，可以有效地组织和展示大量图片内容，提高用户的参与度和页面停留时间。开发者可以根据项目需求选择或定制适合的jQuery插件，同时需要注意兼容性、性能优化和...

Magicbox
Global site tag (gtag.js) - Google Analytics