前端技术Js六大特效调用


效果库:下载 提取码:vv46

幻灯片效果(一)
简洁的图片轮换,带按钮。
效果图:JS六大调用特效
代码:

<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
#newSlider{width: 300px;height: 150px;overflow:hidden;}
#newSlider ul{margin:0;padding:0;}
#newSlider li{float:left;list-style:none; }
#newsbutton{position:absolute;right:0;bottom:5px; }
#newsbutton li{margin-right:5px;color:#c7c7c7;cursor:pointer; }
</style>
<div id="newSlider" style="overflow: hidden; position: absolute;">
	<ul id="newslide" style="position: absolute; left: -212px; width: 1000px;">
	  <li><a href="javascript:"><img src="images/01.jpg" width="300px;" height="150px" alt=""></a></li>
	  <li><a href="javascript:"><img src="images/01.jpg" width="300px;" height="150px" alt=""></a></li>
	  <li><a href="javascript:"><img src="images/01.jpg" width="300px;" height="150px" alt=""></a></li>
	  <li><a href="javascript:"><img src="images/01.jpg" width="300px;" height="150px" alt=""></a></li>
	</ul>
	<ul id="newsbutton">
	  <li onmouseover="setTimeout(function(){Hongru.slider.pos(0)},300)" class="nav">1</li>
	  <li onmouseover="setTimeout(function(){Hongru.slider.pos(1)},300)" class="">2</li>
	  <li onmouseover="setTimeout(function(){Hongru.slider.pos(2)},300)" class="">3</li>
	  <li onmouseover="setTimeout(function(){Hongru.slider.pos(3)},300)" class="">4</li>
	</ul>
</div>
<script type="text/javascript">
	Hongru.slider.init('newSlider',{	
	auto:3,//自动滚动时间间隔秒数,为0时表示不自动滚动
	vertical:0,//true时垂直滚动,false横向滚动
	navId:'newsbutton', //控制器的ul标签id
	curClass:'nav',//当前状态下控制器样式类名
	index:0});//表示初始化时从第几个开始
</script>

幻灯片效果(二)
简洁的图片轮换,带焦点图,居右。
效果图:

前端JS特效代码
代码:


<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
ul{margin: 0;padding: 0;}
img{border: 0;}
#ifocus{position: relative;width: 500px;padding:10px;border:1px solid #DEDEDE;background: #F8F8F8;overflow: hidden;}
#newSlider{width: 400px;height:225px;border:1px solid #DEDEDE;overflow:hidden;}
#newSlider ul{margin:0;padding:0;}
#newSlider li{float:left; list-style:none; }
#newSlider li img{height: 225px;}
#newsbutton{position:absolute;right:0;top:0;margin:9px 3px 0 0; }
#newsbutton li{width: 90px;height: 57px;margin-right:5px;color:#c7c7c7;cursor:pointer;list-style: none; opacity: 0.5;-moz-opacity: 0.5;filter: alpha(opacity=50);}
#newsbutton li.nav{background: url(images/current.gif) no-repeat;opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}
#newsbutton li img{width: 75px;height: 45px;margin: 7px 0 0 11px;}
</style>
<div id="ifocus">
	<div id="newSlider" style="overflow: hidden; position: absolute;">
		<ul id="newslide" style="position: absolute; left: -212px; width: 1000px;">
		  <li><a href="javascript:"><img src="images/01.jpg" alt=""></a></li>
		  <li><a href="javascript:"><img src="images/02.jpg" alt=""></a></li>
		  <li><a href="javascript:"><img src="images/03.jpg" alt=""></a></li>
		  <li><a href="javascript:"><img src="images/04.jpg" alt=""></a></li>
		</ul>
	</div>
		<ul id="newsbutton">
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(0)},0)" class="nav"><img src="images/btn_1.jpg" alt=""></li>
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(1)},0)" class=""><img src="images/btn_2.jpg" alt=""></li>
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(2)},0)" class=""><img src="images/btn_3.jpg" alt=""></li>
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(3)},0)" class=""><img src="images/btn_4.jpg" alt=""></li>
		</ul>
	</div>
<script type="text/javascript">
	Hongru.slider.init('newSlider',{	
	auto:3,//自动滚动时间间隔秒数,为0时表示不自动滚动
	vertical:0,//true时垂直滚动,false横向滚动
	navId:'newsbutton', //控制器的ul标签id
	curClass:'nav',//当前状态下控制器样式类名
	index:0});//表示初始化时从第几个开始
</script>

幻灯片效果(三)
简洁的图片轮换,带焦点图,居下。
效果图:

前端JS六大特效代码

代码:

<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
ul{margin: 0;padding: 0;}
img{border: 0;}
#ifocus{position: relative;width: 627px; padding:10px;border:1px solid #DEDEDE;background: #F8F8F8;overflow: hidden;}
#newSlider{width: 627px;height:247px;border:1px solid #DEDEDE;overflow:hidden;}
#newSlider ul{margin:0;padding:0;}
#newSlider li{float:left; list-style:none; }
#newSlider li img{height: 225px;}
#newsbutton{width: 654px; margin:9px 3px 0 0; }
#newsbutton li{float:left; width: 145px;height: 87px;margin-right:16px;color:#c7c7c7;cursor:pointer;list-style: none; opacity: 0.5;-moz-opacity: 0.5;filter: alpha(opacity=50);}
#newsbutton li.nav{background: url(images/ifocus_btn_bg.jpg) no-repeat;opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);}
#newsbutton li img{width: 140px;height: 77px;margin: 8px 0 0 2px;}
</style>
<div id="ifocus">
	<div id="newSlider" style="overflow: hidden; position: absolute;">
		<ul id="newslide" style="position: absolute; left: -212px; width: 1000px;">
		  <li><a href="javascript:"><img src="images/05.jpg" width="627" height="247" alt=""></a></li>
		  <li><a href="javascript:"><img src="images/06.jpg" width="627" height="247" alt=""></a></li>
		  <li><a href="javascript:"><img src="images/07.jpg" width="627" height="247" alt=""></a></li>
		  <li><a href="javascript:"><img src="images/08.jpg" width="627" height="247" alt=""></a></li>
		</ul>
	</div>
		<ul id="newsbutton">
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(0)},0)" class="nav"><img src="images/btn_5.jpg" alt=""></li>
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(1)},0)" class=""><img src="images/btn_6.jpg" alt=""></li>
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(2)},0)" class=""><img src="images/btn_7.jpg" alt=""></li>
		  <li onmouseover="setTimeout(function(){Hongru.slider.pos(3)},0)" class=""><img src="images/btn_8.jpg" alt=""></li>
		</ul>
	</div>
<script type="text/javascript">
	Hongru.slider.init('newSlider',{	
	auto:3,//自动滚动时间间隔秒数,为0时表示不自动滚动
	vertical:0,//true时垂直滚动,false横向滚动
	navId:'newsbutton', //控制器的ul标签id
	curClass:'nav',//当前状态下控制器样式类名
	index:0});//表示初始化时从第几个开始
</script>

选项卡切换(三)
滑动切换功能。
效果图:

前端JS六大特效代码

代码:


<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
#tabMenu-nav ul{display: block;height: 30px;margin: 0;padding: 0;}
#tabMenu-nav ul li{float:left;margin-right: 10px;line-height: 30px;list-style:none;}
#tabMenu-nav ul li.hover a{background:#EFEFEF;color:black;}
#tabMenu-nav ul li a{display: block;text-decoration:none;padding: 0px 10px;color:#888;}
#tabMenu-nav ul li a:hover{color:black;}
#tabMenu-containt{padding:5px 10px;border:1px solid #EFEFEF;}
#tabMenu-nav .tabItem{display:none;}
</style>
<div id="tabMenu-nav">
    <ul>
      <li id="t1" class="hover"><a href="javascript:" title="测试1">测试1</a></li>
      <li id="t2"><a href="javascript:" title="测试2">测试2</a></li>
      <li id="t3"><a href="javascript:" title="测试3">测试3</a></li>
      <li id="t4"><a href="javascript:" title="测试4">测试4</a></li>
    </ul>
    <div id="tabMenu-containt">
      <div id="c1" class="tabItem" style="display:block;">1</div>
      <div id="c2" class="tabItem">2</div>
      <div id="c3" class="tabItem">3</div>
      <div id="c4" class="tabItem">4</div>
    </div>
</div>
<script>
	var SDmodel = new scrollDoor();
	SDmodel.sd(["t1","t2","t3","t4"],["c1","c2","c3","c4"],"hover","sd02");
</script>

无缝滚动
简洁无缝滚动。
效果图:

前端JS六大特效代码

向上代码:


<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
#marquee {position:relative;height:300px;width:200px;overflow:hidden;border:10px solid #369;}
#marquee img {display:block;}
#marquee ul {margin:0px;padding:0px;}
</style>
<div id="marquee">
    <ul>
      <li><img src="images/01.jpg" alt=""/></li>
      <li><img src="images/01.jpg" alt=""/></li>
      <li><img src="images/01.jpg" alt=""/></li>
      <li><img src="images/01.jpg" alt=""/></li>
      <li><img src="images/01.jpg" alt=""/></li>
    </ul>
    <ul></ul>
</div>
<script>MarqueeTop("marquee");</script>

向下代码:

<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
#marquee {position:relative;height:300px;width:200px;overflow:hidden;border:10px solid #369;}
#marquee img {display:block;}
#marquee dd {margin:0px;padding:0px;}
</style>
<div id="marquee">
    <dl>
	<dt>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	  <a href=""><img src="images/01.jpg" alt=""/></a>
	</dt>
	<dd></dd>
    </dl>
</div>
<script>MarqueeBottom("marquee");</script>

向左代码:

<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
#marquee {position:relative;width: 400px;overflow:hidden;border: 10px solid #B45B3E;}
#marquee img {border:0px;}
#marquee dl, #marquee dt,#marquee dd,#marquee a {float:left;margin:0;padding:0;}
#marquee dl{width:1000%;height:150px;}
</style>
<div id="marquee">
    <dl>
      <dt>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
      </dt>
      <dd></dd>
    </dl>
</div>
<script>MarqueeLeft("marquee");</script>

向右代码:

<style>
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
#marquee {position:relative;width: 400px;overflow:hidden;border: 10px solid #B45B3E;}
#marquee img {border:0px;}
#marquee dl, #marquee dt,#marquee dd,#marquee a {float:left;margin:0;padding:0;}
#marquee dl{width:1000%;height:150px;}
</style>
<div id="marquee">
    <dl>
      <dt>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
	<a href=""><img src="images/01.jpg" alt=""/></a>
      </dt>
      <dd></dd>
    </dl>
</div>
<script>MarqueeRight("marquee");</script>

 

 

无缝滚动带点击
效果图:

前端JS六大特效代码

代码:

<style type="text/css">
/*选项卡样式(可修改),请将修改后的样式剪切到相应css文件中,做好注释*/
ul{margin: 0;padding:0;}
#scroll2 {width: 915px;height: 200px;padding-top:10px;overflow: hidden;border: 1px solid #333;}
.scrollarr {float: left;margin-top: 90px;width: 20px;cursor: pointer;}
.zj_bot {float: left;}
.zj_bot li {float: left;height: 188px;margin: 0 5px;overflow: hidden;width: 280px;}
</style>
<div id="scroll2">
    <div id="scr_lear" class="scrollarr"><img src="images/left_ar.jpg" width="20" height="33" /></div>
      <ul class="zj_bot" id="zj_bot">
        <li><img src="images/bg4.jpg" width="280" height="188"/></li>
	<li><img src="images/bg4.jpg" width="280" height="188"/></li>
	<li><img src="images/bg4.jpg" width="280" height="188"/></li>
	<li><img src="images/bg4.jpg" width="280" height="188"/></li>
	<li><img src="images/bg4.jpg" width="280" height="188"/></li>
        <div class="clear"></div>
      </ul>
    <div id="scr_riar" class="scrollarr"><img src="images/right_ar.jpg" width="20" height="33" /></div>                    
</div>
<script type="text/javascript">
     	var scrollPic_01 = new ScrollPic();
	scrollPic_01.scrollContId = "zj_bot"; //内容容器ID
	scrollPic_01.arrLeftId = "scr_lear";//左箭头ID
	scrollPic_01.arrRightId = "scr_riar"; //右箭头ID
	scrollPic_01.frameWidth = 870;//显示框宽度
	scrollPic_01.pageWidth =290; //翻页宽度
	scrollPic_01.speed = 40; //移动速度(单位毫秒,越小越快)
	scrollPic_01.space = 20; //每次移动像素(单位px,越大越快)
	scrollPic_01.autoPlay = true; //自动播放 scrollPic_01.autoPlayTime = 3; //自动播放间隔时间(秒)
	scrollPic_01.initialize(); //初始化 //-->	
	setInterval(function autogun(){scrollPic_01.rightMouseDown();scrollPic_01.leftEnd();},5000);
		if(window.ActiveXObject){
			var divs=document.getElementById('zj_bot').getElementsByTagName('div')[0].getElementsByTagName('div');
			for(i=0;i<divs.length;i++){
				divs[i].style.styleFloat="left";
			}
		}
</script>

导航移上添加样式

function menuCurrent(hver,cur){
	var d = document.getElementById(hver); 
	var aa = d.getElementsByTagName("li"); 
	aa[0].className = cur; 
	d.l = aa[0]; 
		for(var i in aa){ 
		var a = aa[i]; 
		a.onmousemove = function(){ 
			if(d.l==this)return; 
			this.className = d.l.className; 
			d.l.className = ""; 
			d.l = this; 
		}; 
	}; 
}
menuCurrent("hxj","hover");//第一个参数为li 所在容器Id,第二个参数为所加class名称

导航样式,跟随页面

function setMenuIndex(firNav){
	var webName=window.location.pathname;
	var str=webName.replace("/","");
	var s = str.split("/");
	var parrent=s[0];
	if(s.length<=1){
		var webIndex=document.getElementById(firNav);
		if(webIndex){
			webIndex.className=hover;
		}
	}else{
		var navCurrent=document.getElementById(parrent);
		navCurrent.className="hover";
	}
}setMenuIndex("index");

返回顶部

function goTopEx(){
var obj=document.getElementById("goTopBtn");   //ID手动更改
function getScrollTop(){
return document.documentElement.scrollTop;
}
function setScrollTop(value){
document.documentElement.scrollTop=value;
}
window.onscroll=function(){getScrollTop()>0?obj.style.display="block":obj.style.display="none";}
obj.onclick=function(){
var goTop=setInterval(scrollMove,10);
function scrollMove(){
setScrollTop(getScrollTop()/1.1);
if(getScrollTop()<1)clearInterval(goTop);
}
}
}

未经允许不得转载:网站SEO|SEO关键词优化|SEO搜索引擎优化|SEO优化方案|西安SEO顾问 » 前端技术Js六大特效调用

赞 (5)
分享到: 更多

评论 0