jQuery固定元素在窗口顶部位置插件

来源:https://www.sucaihuo.com/js/2518.html 2017-07-23 23:46浏览(939) 收藏

一款jQuery固定元素在窗口顶部位置插件,鼠标滚动的过程中,会看到图片始终会固定在页面窗口的顶部,图片下面的文字会自动遮罩顶部的图片,有一点点类似于滚动视觉差的效果,喜欢的童鞋请收下吧。
jQuery固定元素在窗口顶部位置插件
分类:图片代码 > 图片插件 难易:初级
查看演示 下载资源 下载积分: 30 积分

页面的head部分,进入引入一个CSS样式文件即可,代码如下:

<link type="text/css" rel="stylesheet" href="css/sharks.css">

页面的body部分,多个div容器放入多个不同的图片及介绍文字,代码如下:

<main>
	<div>
		<h1>鲨鱼</h1>
		<p>鲨鱼早在恐龙出现前三亿年前就已经存在地球上,至今已超过五亿年,它们在近一亿年来几乎没有改变。鲨鱼,在古代叫作鲛、鲛鲨、沙鱼,是海洋中的庞然大物,所以号称“海中狼”。传统观念认为鲨鱼的软骨(即鱼翅)中蛋白质很高,但这是错误的。鸡蛋的蛋白质远远超过鱼翅。此外,研究显示,由于鲨鱼体内易于富集汞,同时鲨鱼翅中含有一定量的神经毒素,故对人体有潜在危害。因为几十年来的大量猎杀,鲨鱼存在灭绝风险。</p>
		<p>所有的鲨鱼都有一身的软骨。鲨鱼的骨架是由软骨构成,而不是由骨头构成。软骨比骨头更轻、更具有弹性。所有的鲨鱼都属于鲨纲,而鲨纲动物都具有软骨。但还是比较硬的。</p>
		<p>鲨鱼的体型不一,身长小至18厘米,大至18米。鲸鲨是海中最大的鲨鱼,一般长成后身长可达36尺(12米)。虽然鲸鲨的体型庞大,它的牙齿在鲨鱼中却是最小的。最小的鲨鱼是侏儒角鲨,小到可以放在手上。它长约20到27厘米,重量还不到一磅。世界最大的鲨类是鲸鲨,据一些报道,一些鲸鲨可长达18米。世界上一例被证实最大的鲸鲨是1947年11月11日,在巴基斯坦的卡拉奇市的baba island所发现的,它身长达12.65米,重约21.5吨。[2]  根据澳大利亚的鲨鱼专家到海里和鲨鱼的长期生活,鲨鱼是可以一动不动的在海底的,并不会因此窒息。鲨鱼和硬骨鱼类的不同之处是,它们没有鳔来控制浮潜。如果停止游泳,大部分的鲨鱼会往下沉。为了增大在水中的浮力,鲨鱼的肝内具有大量的油。</p>
	</div>
	<div id="bull" class="shark-info">
		<div class="shark-image">
			<img src="images/bull.jpg" />
		</div>
		<div class="shark-text">
			<h2>牛鲨</h2>
			<p>牛鲨(Carcharhinus leucas)因其壮硕如牛的外形、阔平的鼻端和具有攻击性的习性而得名,学名为白真鲨(Bull shark Carcharhinus leucas) ,又称公牛鲨,公牛白眼鲛,英文名bull shark。在印度,牛鲨一般被称为孙德尔本斯鲨或恒河鲨,是孟加拉国鱼咖哩的佳肴。在非洲普遍被称为赞比西鲨(Zambezi)。它的广泛分布及不同的栖息地令它在不同地方有不同的名字,例如尼加拉瓜鲨等。</p>
			<p>牛鲨嘴大不成比例,呈裂弧形,吻端非常宽圆而短,密布着锋利的牙齿。牛鲨的上颌齿侧扁而宽,边缘长有细锯齿,齿尖直立或略外斜,没有小齿尖;下颌齿较窄而直立或稍颌斜,边缘也长有锯齿,近基底则平滑。牛鲨的上下牙齿还各有分工:尖利的下齿便于叼住猎物,将猎物牢牢抓住;三角锯齿似的上齿,用于吞吃、切割食物,把猎物刺穿,撕扯猎物的肉。牛鲨闭着嘴时上下颌紧合,不露齿。</p>
			<p>牛鲨有2个背鳍,背鳍之间没有隆脊,第一个背鳍宽大,起点与胸鳍的基底后方相对,后缘凹入,下角尖突;第个二背鳍小,起点在臀鳍的起点之前或相对,后缘入凹,后角尖突;胸鳍较大,呈镰刀形,后缘凹入,外角钝尖,内角钝圆,鳍端伸达第个一背鳍的基底后端;尾鳍宽长,尾椎轴上扬,下叶的前部显着三角形突出,中部低平延长,与后部间长有一个深的缺刻,后部的小三角形突出,尾端钝尖。幼鲨鳍顶部块有黑色标记,长大后就会消失。</p>
		</div>
	</div>
	<div id="hammerhead" class="shark-info">
		<div class="shark-image">
			<img src="images/hammerhead.jpg" />
		</div>
		<div class="shark-text">
			<h2>双髻鲨</h2>
			<p>双髻鲨又称锤头鲨,是鲨纲、双髻鲨科鱼类的统称。双髻鲨以其头部的形状而得名。双髻鲨的头部有左右两个突起。每个突起上各有一只眼睛和一个鼻孔。两只眼睛相距1米。最近的一项研究证实,眼睛的分布对它观察周围情况非常有利。双髻鲨不仅像人类一样拥有双眼视力(两只眼睛的视野重叠在一起),而且它通过来回摇摆脑袋,可以看到周围360度范围内发生的情况。</p>
			<p>成年的双髻鲨体长可达3.7米到4.3米,雌性体型一般大于雄性,而寿命可超过30年。[1]  双髻鲨头宽而平扁,呈锤或铲形。两眼及两鼻孔均各分别位于头侧突出部分的两端。头部形状特殊,据认为有方向舵的作用,可加大机动性;两个鼻孔远远分开,可更容易辨认气味。快速、凶猛,可见于海上、近岸或半咸水中。双髻鲨第一背鳍非常高,并呈显著的镰刀状,而第二背鳍虽然小得多但也很高,并且边缘呈凹形。臀鳍呈钩状边缘凹陷,这不同于双髻鲨边缘平整的臀鳍。 双髻鲨背部呈深棕色,浅灰色。因为雄鱼的肛门附近有一对伸出称为交合突的器官。交合突是一种管状的器官,它的内部由软骨支撑。交合突的内侧有一条沟槽,雄鱼通过这个槽把精液导入雌鱼的体内。以魟、鳐、其他鲨类及其他鱼类为食。一些双髻鲨可用於制革和炼油。</p>
		</div>
	</div>
	<div id="leopard" class="shark-info">
		<div class="shark-image">
			<img src="images/leopard.jpg" />
		</div>
		<div class="shark-text">
			<h2>豹纹鲨</h2>
			<p>豹纹鲨,Stegostoma fasciatum (Hermann, 1783) ,又称大尾虎鲛。是豹纹鲨科又称虎鲛科(软骨鱼纲板鳃亚纲须鲨目的其中一科)仅有的1属(豹纹鲨属)1种。多分布于太平洋西部热带海域,大堡礁、印度洋西北部海域及我国东海、南海。生性羞怯,行动缓慢,肉食性,以底栖无脊椎动物及小鱼为食,卵生。</p>
			<p>豹纹鲨,又称大尾虎鲛。是豹纹鲨科又称虎鲛科(软骨鱼纲板鳃亚纲须鲛目的其中一科)仅有的1属1种。生性羞怯,行动缓慢,肉食性,以底栖无脊椎动物及小鱼为食,卵生。豹纹鲨拥有与众不同的身形:体长可达2.4-3.5米,体侧有显著的棱状突起,大大延长的尾鳍几乎占到体长的一半。豹纹鲨幼年期和成年期的色彩及图案差异很大。年幼时称它们为斑马纹鲨,粗大的黑白条纹覆盖全身;长大后变成浅褐色斑点遍布全身,具豹子一样的花纹,因而得名豹纹鲨。</p>
		</div>
	</div>
	<div id="tiger" class="shark-info">
		<div class="shark-image">
			<img src="images/tiger.jpg" />
		</div>
		<div class="shark-text">
			<h2>虎鲨</h2>
			<p>虎鲨(学名:Heterodontus)是软骨鱼纲(Selachii)虎鲨科(Heterodontidae)仅有属“虎鲨属”所有种类的统称。特点是两背鳍前缘各具一粗大硬棘。约有10种。海产,底栖,除地中海和大西洋外,几乎各处可见。通常3.25-4.25米,最长6米。两腭具锐牙,前方者呈门牙状,两侧呈臼齿状。以无脊椎动物如海胆及甲壳动物为食。</p>
			<p>体粗大而短,头高近方形。眶上突起显著,吻短钝,眼小,椭圆形,上侧位,无瞬膜。鼻孔具鼻口沟。口平横,上、下唇褶发达。上、下颌牙同型,每颌前、后牙异型,前部牙细尖,3~5齿头;后部牙平扁,臼齿状。喷水孔小,位于眼后下方。鳃孔5个,最后3~4个位于胸鳍基底上方。背鳍2个,各具一硬棘;具臀鳍;尾鳍宽短,帚形,下叶前部三角形突出,尾基无凹洼;胸鳍宽大。分布在太平洋、印度洋各热带与温带海区。中国现有2种,宽纹虎鲨和狭纹虎鲨。</p>
			<p>体型:虎鲨体粗大而短,头高近方形。眶上突起显著,吻短钝,眼小,椭圆形,上侧位,无瞬膜。鼻孔具鼻口沟。口平横,上、下唇褶发达。上、下颌牙同型,每颌前、后牙异型,前部牙细尖,3~5齿头;后部牙平扁,臼齿状。喷水孔小,位于眼后下方。鳃孔5个,最后3~4个位于胸鳍基底上方。背鳍2个,各具一硬棘;具臀鳍;尾鳍宽短,帚形,下叶前部三角形突出,尾基无凹洼;胸鳍宽大。</p>
		</div>
	</div>
</main>

页面的底部,需远程调用jQuery库及引入本地jQuery插件,并启用插件,代码如下:

<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.stopattop.js"></script>
<script type="text/javascript">
	$(".shark-image").stopAtTop();
</script>
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2