jQuery插件jFade實(shí)現(xiàn)鼠標(biāo)經(jīng)過的圖片高亮其它變暗_jquery
May 16, 2016 pm 04:09 PM
jquery
鼠標(biāo)經(jīng)過
今天為大家?guī)硪豢钍髽?biāo)經(jīng)過當(dāng)前高亮其它變暗jQuery插件jFade,此款插件能實(shí)現(xiàn)的功能簡(jiǎn)單而且很實(shí)用，當(dāng)鼠標(biāo)經(jīng)過圖片列表或是文字列表時(shí)懸停當(dāng)前高亮顯示，其它圖片列表變暗突出顯示鼠標(biāo)當(dāng)前懸停。
復(fù)制代碼 代碼如下:
??? <元名稱=“作者”內(nèi)容=“pakaerf”>?
???
???
??? >
??? ?
??? $().ready(function() {
??????? $('.jfade_image').jfade();
??????? $('.portfolio').jfade({
??????????? 開始不透明度：“.4”，
??????????? 高不透明度：“1”，
??????????? low_opacity: ".2",
??????????? 時(shí)間：“500”
??????? });
??????? $('.button').jfade({
??????????? 開始不透明度：“1”，
??????????? 高不透明度：“1”，
??????????? low_opacity: ".4",
??????????? 時(shí)間：“500”
??????? });
??????? $('.text').jfade({
??????????? 開始不透明度：“1”，
??????????? 高不透明度：“1”，
??????????? low_opacity: ".7",
??????????? 時(shí)間：“500”
??????? });
??????? $('.links').jfade({
??????????? 開始不透明度：“.9”，
??????????? 高不透明度：“1”，
??????????? low_opacity: ".2",
??????????? 時(shí)間：“500”
??????? });
??? });?
??? ?
???
???????
jFade
???????
jFade 是一個(gè)簡(jiǎn)單的 jquery 插件，可讓您突出顯示網(wǎng)站上的項(xiàng)目。不僅可以自定義淡入淡出，而且可以輕松控制周圍的元素，使您最重要的內(nèi)容脫穎而出。
???????
作品集圖庫
>
???????
（淡出相鄰對(duì)象）
???????
???????????
???????????
???????????
???????????
???????????
???????????
???????????
???????????
???????
???????
To use default settings just add the function
???????
<script type="text/javascript">? <br /><br>
??? $().ready(function() {<br /><br>
??????? $('.jfade_image').jfade();<br /><br>
??? });? <br /><br>
</script>???????
and add the class tag to each element:
???????
<img src="images/card02.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card04.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card09.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card13.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card14.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card15.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card16.jpg" class="jfade_image"/><br /><br>
??????????? <img src="images/card17.jpg" class="jfade_image"/>???????
Custom settings are easily set and explained in the help doc
???????
Portfolio Gallery 2
???????
(Fade objects in)
???????
???????????
???????????
???????????
???????????
???????????
???????????
???????????
???????????
???????
???????
Call to Action Button
???????
(give buttons some flair)
???????
???????????
??????????????? Green
??????????????? Blue
??????????????? Pink
??????????????? Orange
??????????????? Yellow
???????????????
???????????
???????
???????
Text
???????
(have subtle effects)
???????
???????????
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus in eleifend justo. Aenean a porttitor enim. Sed aliquet ullamcorper euismod. Morbi dapibus pretium mauris. Pellentesque consequat ante et magna gravida eleifend. Donec et lorem nulla. Integer dignissim nisi et lectus bibendum ornare venenatis odio venenatis. Aliquam dignissim iaculis neque, sed accumsan erat aliquam porttitor.
???????????
Quisque lobortis, turpis id ornare mollis, diam magna semper libero, lacinia pharetra lectus nibh eget purus. Aenean dignissim sollicitudin gravida. Suspendisse non leo at nunc tempus elementum. Curabitur vitae commodo libero. Sed erat tortor, ornare id luctus vel, ullamcorper eget lacus. Maecenas ac placerat lectus. Sed quis nunc vitae lacus dignissim interdum.
???????????
Nulla facilisi. In et ante tellus, quis feugiat ante. Sed et lectus id ante viverra fringilla in eget nisi. Duis sit amet augue lorem, quis luctus erat. Morbi sed diam id orci lacinia tincidunt vel auctor velit. Etiam pulvinar nibh eget ante tincidunt rhoncus. Morbi commodo eros lobortis dolor suscipit eleifend. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
???????
???????
???