jQuery css3滑鼠懸停圖片顯示遮罩層動畫特效

阿新 • • 發佈：2019-01-19

<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery炫酷滑鼠滑過圖片顯示遮罩層特效 - 何問起</title><base  
target="_blank" />

<!--可無視-->
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/39/css/default.css">
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/base.css" 
 />

<!--必要樣式-->
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/39/css/style.css" />

<!--[if IE]>
<script src="http://hovertree.com/texiao/html5/4/html5shiv.min.js"></script>
<![endif]-->

</head>
<body>

<div id="main">
<div  
class="container">

<nav>
<ul>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index.html" class="active">Slide In Bottom</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index2.html">Slide In Top</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index3.html">Slide In Left</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index4.html">Slide In Right</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index5.html">Icon Border Animate</a></li>
<li><a target="_self" href="http://hovertree.com/texiao/jquery/39/index6.html">Icon Slide In</a></li>
</ul>
</nav><!-- /nav -->

<div id="effect-1" class="effects clearfix">
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/1.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" class="expand">+</a>
<!-- <a class="close-overlay hidden">x</a> -->
</div>
</div>
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/2.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" class="expand">+</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/3.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" class="expand">+</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
<div class="img">
<img src="http://hovertree.com/texiao/jquery/39/img/jpg/4.jpg" alt="">
<div class="overlay">
<a href="http://hovertree.com/" class="expand">+</a>
<a class="close-overlay hidden">x</a>
</div>
</div>
</div>

</div><!-- /.container -->
</div>

<script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-2.2.1.min.js"></script>
<script type="text/javascript" src="http://hovertree.com/texiao/jquery/39/js/modernizr.js"></script>
<script type="text/javascript">
$(document).ready(function(){
if (Modernizr.touch) {
// show the close overlay button
$(".close-overlay").removeClass("hidden");
// handle the adding of hover class when clicked
$(".img").click(function(e){
if (!$(this).hasClass("hover")) {
$(this).addClass("hover");
}
});
// handle the closing of the overlay
$(".close-overlay").click(function(e){
e.preventDefault();
e.stopPropagation();
if ($(this).closest(".img").hasClass("hover")) {
$(this).closest(".img").removeClass("hover");
}
});
} else {
// handle the mouseenter functionality
$(".img").mouseenter(function(){
$(this).addClass("hover");
})
// handle the mouseleave functionality
.mouseleave(function(){
$(this).removeClass("hover");
});
}
});
</script>

</body>
</html>

jQuery css3滑鼠懸停圖片顯示遮罩層動畫特效

<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=

css-實現滑鼠移至圖片上顯示遮罩層

1、將遮罩層html程式碼與圖片放在一個div 我是放在 .img_div裡。 <div class="img_div"> <img src="./images/paella-dish.jpg"> <a href="#

鼠標hover圖片時遮罩層勻速上升顯示內容top、定位

log 功能 float 相對 body idt ive 子元素 hid 1.html <div class="div1"> <div class="div11"> <p >Dolor nunc vule put

原生JS實現滑鼠懸停圖片顯示文字效果

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> <style> *{ margin:0;

Vue/css圖片底部遮罩層

<template> <div > <div v-for="item in list"> <div class="thediv" @click="onClickVideo(item.Video)"> <img src=

如何顯示遮罩層時禁止底層頁面滑動

個人github：https://github.com/qiilee 歡迎follow 在touchmove時禁用瀏覽器預設事件， document.addEventListener('touc

點選按鈕或文字顯示遮罩層

點選文字彈出一個DIV層視窗程式碼 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <titl

檔案下載顯示遮罩層

問題：點選下載檔案按鈕，在資料載入完成之前顯示遮罩層，防止使用者重複點選解決：定義一個iframe，在iframe中指定下載的location，點選下載按鈕進行遮罩層的顯示，iframe載入完成後隱藏遮罩層在extjs的FormPanel中定義一個隱藏的iframe：

遮罩層小特效

cti wid bsp z-index log pos absolute 登錄 reat 今天學了一個遮罩層的特效，主要用在網頁裏面註冊頁面和登陸頁面的使用：　　　　<style> 　　　　* { 　　　　margin: 0px; 　　

微信小程序彈出和隱藏遮罩層動畫以及五星評分

weixin cli pan ppm for 數組 HA 分層 ref 參考源碼： http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article

微信小程式彈出和隱藏遮罩層動畫以及五星評分

<view class='train_con'> <view class='head'> <text>{{bankname}}</text> <text class='count'>{{index+1}}/{{allquestion.leng

滑鼠移上圖片遮罩層的顯示隱藏

css3實現滑鼠移上圖片放大遮罩效果

最近學習了一些關於HTML5和CSS3方面的知識，通過一些小例子鞏固一下，拓展自己知識面。小例子使用CSS3實現當滑鼠滑到圖片上，會出現放大、遮罩的效果。請看下面截圖，PS：原始碼下載見下面網址，另

jquery實現圖片向左慢慢輪播（滑鼠懸停圖片停止輪播版）

window.onload=function(){ function $(id){ return document.getElementById(id); } var num=0; function autopl

【css3】滑鼠懸停圖片旋轉效果

滑鼠經過時圖片旋轉效果<html> <head> <style> body { background:#ddd; } .keleyi { width: 220p

jQuery實現滑鼠經過圖片上移消失，隨後在下方逐漸顯示出來。

<!DOCTYPE html> <html> <head><title></title><meta charset="utf-8"><style type="text/css"> *

JS+CSS簡單實現DIV遮罩層顯示隱藏【轉藏】

button left dtd -m javascrip htm width dex absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

前端頁面給指定的div添加遮罩層，並且帶有加載中的小旋轉圖片

left 說了 -s 加載 jquer 其中 ges loading style 話不多說，先上代碼，其實還是比較簡單的 1 $("<div id=‘shade‘ style=‘opacity:0.85;background:white‘></div

js+css jQuery實現頁面後退執行 & 遮罩彈框

cti nload col 復制 ali 我不彈框 clas 統計 JS部分 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script> <script typ

bootstrap怎麼設定下拉選單不點選，改成滑鼠懸停直接顯示下拉選單

方法一：實際上比較簡單，只需要加一個css設定下hover的狀態，把下拉選單設定成block，具體css：.nav > li:hover .dropdown-menu {display: block;} 但是主導航失去連結的效

jQuery css3滑鼠懸停圖片顯示遮罩層動畫特效

相關推薦