需要滚动标题，单击菜单选项 [英] Need scrolling Header with Menu option on click

查看：50
本文介绍了需要滚动标题，单击菜单选项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

你好



我正在使用菜单选项实现滚动标题（点击标题的任何图像）。你可以帮助我。我的标题是滚动但问题在于单击显示菜单选项。

这是我的代码。



Hello

I am implementing scrolling header with menu option(on clicking any image of header ).can you please help me .My header is scrolling But problem in showing the menu option on click.
Here is my code .

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Tiny Carousel: A lightweight jQuery plugin</title>
	<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
	
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function(){
			$('#slider1').tinycarousel();	
		});
		function test()
		{
		alert("*****");
var mySelect = document.getElementById('mySelect'),
    newOption = document.createElement('option');

newOption.value = 'bmw';

// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)


mySelect.appendChild(newOption);
		}
	</script>	
		
</head>
<body>
	<div id="slider1">
		<a class="buttons prev" href="#">left</a>
		<div class="viewport">
			<ul class="overview">
				<li><img src="images/picture6.jpg" onclick="test()"/>
				  <select id="mySelect">
       <!--option value="volvo">Volvo</option>
       <option value="saab">Saab</option>
       <option value="mercedes">Mercedes</option>
       <option value="audi">Audi</option-->
</select>
				</li>
				<li><img src="images/picture5.jpg" /></li>
				<li><img src="images/picture4.jpg" /></li>									
				<li><img src="images/picture3.jpg" /></li>
				<li><img src="images/picture2.jpg" /></li>
				<li><img src="images/picture1.jpg" /></li>
			</ul>
		</div>
		<a class="buttons next" href="#">right</a>
	
	</div>
</body>
</html>



********************************** css ********************************


**********************************.css********************************

/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px;   }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px;  }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}





***************************。js *********** *******



***************************.js******************

(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p

推荐答案

（ document ）。ready（ function （）{
(document).ready(function(){


（' ＃slider1'）。tinycarousel（）;
}）;
function test（）
{
alert（ *****）;
var mySelect = document .getElementById（' mySelect'），
newOption = document .createElement（' option'）;

newOption.value = ' bmw';

// 并非所有浏览器都支持textContent（符合W3C标准）
// 如果可用，textContent更快（请参阅http://stackoverflow.com/a/1359822/139010）


mySelect.appendChild（newOption）;
}
< / 脚本 >

< / head >
< 正文 >
< div id = slider1 >
< a class = 按钮prev href = ＃ > left < / a >
< div class = viewport >
< ul class = 概述 >
< ; li > < img src = images / picture6.jpg onclick = test（） / >
< 选择 id = mySelect >
<！ - option value =volvo> Volvo< / option>
< option value =saab> Saab< / option>
< option value =mercedes> Mercedes< / option>
< option value =audi> Audi< / option - >
< / select >
< / li >
< li > < span class =code-keyword>< img src = images / picture5.jpg / > < / li >
< li > < img src = images / picture4.jpg / > < / li >
< < span class =code-leadattribute> li > < img src = images / picture3.jpg / > < / li >
< li > < img src = images / picture2.jpg / > < / li >
< li > < img src = images / picture1.jpg / > < / li >
< / ul >
< / div >
< a class = 按钮下一步 href = ＃ > right < / a >

</div>
</body> $b $b </html>
('#slider1').tinycarousel(); }); function test() { alert("*****"); var mySelect = document.getElementById('mySelect'), newOption = document.createElement('option'); newOption.value = 'bmw'; // Not all browsers support textContent (W3C-compliant) // When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010) mySelect.appendChild(newOption); } </script> </head> <body> <div id="slider1"> <a class="buttons prev" href="#">left</a> <div class="viewport"> <ul class="overview"> <li><img src="images/picture6.jpg" onclick="test()"/> <select id="mySelect"> <!--option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="mercedes">Mercedes</option> <option value="audi">Audi</option--> </select> </li> <li><img src="images/picture5.jpg" /></li> <li><img src="images/picture4.jpg" /></li> <li><img src="images/picture3.jpg" /></li> <li><img src="images/picture2.jpg" /></li> <li><img src="images/picture1.jpg" /></li> </ul> </div> <a class="buttons next" href="#">right</a> </div> </body> </html>



**********************************. css********************************


**********************************.css********************************

/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px;   }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px;  }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}





***************************.js******************



***************************.js******************

(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p


这篇关于需要滚动标题，单击菜单选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发语言最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆