jQuery點選圖片彈出放大特效下載

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

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>美女圖片瀏覽特效 - 何問起</title>
<link href="http://hovertree.com/texiao/jqimg/1/css/clearbox.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/texiao/jqimg/1/js/clearbox.js" 
 type="text/javascript"></script>
<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>
</head>
<body>

<style type="text/css">
* {
margin: 0;
padding: 0;
list-style-type: none;
}

a, img {
border: 0;
}

body {
font 
: 12px/180% Arial, Helvetica, sans-serif, "新宋體";
}

.playbox {
width: 840px;
margin: 5px auto;
overflow: hidden;
padding: 20px 0px 0px 20px;
border: solid 1px #ddd;
}

.playbox a {
height: 360px;
overflow: hidden;
display: block;
float: left;
margin-right: 20px;
margin-bottom: 20px;
position 
: relative;
text-decoration: none;
}

.playbox a img {
max-width: 260px;
_width: expression(this.width > 260 ? "260px" : this.width); /*使ie6支援max-width*/
border: none;
}

.txt {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 45px;
line-height: 45px;
text-align: center;
color: #fff;
background: rgba(0,0,0,0.6);
}

.txt h3 {
font-weight: normal;
margin: 0px;
}

.txt p {
font-size: 14px;
display: block;
line-height: 20px;
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-moz-margin-before: 1em;
-moz-margin-after: 1em;
-moz-margin-start: 0px;
-moz-margin-end: 0px;
}
.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}
</style>

<h2 style="margin:0 auto; width:840px; text-align:center; margin-top:10px;">點選美女，相簿播放</h2>
<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/flurt6nt.htm" target="_blank">原文</a> <a href="http://hovertree.com/texiao/" target="_blank">特效庫</a>
<a href="http://hovertree.com/" target="_blank">首頁</a>
</div>
<div class="playbox">
<a href="http://hovertree.com/texiao/jqimg/1/images/1.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/1.jpg" /><div class="txt"><h3>性感美女</h3><p>送福利了，拿走不懈！</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/2.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/2.jpg" /><div class="txt"><h3>性感美女</h3><p>更多請訪問：hovertree.com/texiao/ </p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/3.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/3.jpg" /><div class="txt"><h3>性感美女</h3><p>你過來，我保證不會打你的！</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/4.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/4.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩層的話，可以刪除</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/5.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/5.jpg" /><div class="txt"><h3>性感美女</h3><p>不需要遮罩層的話，可以刪除</p></div></a>
<a href="http://hovertree.com/texiao/jqimg/1/images/6.jpg" rel="clearbox[test1]"><img src="http://hovertree.com/texiao/jqimg/1/images/6.jpg" /><div class="txt"><h3>性感美女</h3><p>何問起，其實是一位美女。</p></div></a>
</div>

<script type="text/javascript">
// 不是必要的程式碼
//從底部上升的遮罩效果開始
$(".playbox a").hover(function(){
$(this).find(".txt").stop().animate({height:"360px"},200);
$(this).find(".txt h3").stop().animate({paddingTop:"60px"},200);
},function(){
$(this).find(".txt").stop().animate({height:"45px"},200);
$(this).find(".txt h3").stop().animate({paddingTop:"0px"},200);
})
//從底部上升的遮罩效果結 何問起
</script>

</body>
</html>

jQuery點選圖片彈出放大特效下載

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>美女圖片瀏覽特效 - 何

點選圖片彈出大圖

bootstrap 點選圖片彈出大圖

效果：在一個table裡顯示很多的小圖，每點選一個圖片，顯示一張大圖。小圖的html <td><img height='120px' width='200px' src="

HTML+js+css實現點選圖片彈出上傳檔案視窗的兩種思路

第一種：CSS實現 <style> <!-- .fileInputContainer{ height:256px; background:url(upfile.png); position:rel

Jquery 點選圖片在彈出層顯示大圖（很好用）

效果圖片： 1.點選前的效果： 2.點選後的效果： html程式碼： <td width="350"> <img height="100" width="100" src="http://or7y3wqnj.bkt.clouddn.com/${f

jQuery 點選圖片放大燈箱效果

使用外掛lightBox2，原文及例項程式碼： http://www.shouce.ren/study/api/s/6948 github地址：https://github.com/lokesh/lightbox2/ 引入js及 css <link rel="

JS特效網頁點選事件彈出指定漢字

最近逛一位大佬的部落格的時候，發現了他部落格上的滑鼠點選事件，效果如下圖感覺文字和內容都特別有趣，所以就研究了一下。將效果總結為一個HTML，內容如下，保證可用。

CMFCToolBar::ReplaceButton() 替換CMFCToolBarMenuButton控制元件點選按鈕彈出選單問題

最近使用MFC單文件做了一個專案，需要用到CMFCToolBar由於自己的按鈕是在太多了，所有又把相同的按鈕歸類也就是把相同的按鈕放在一個按鈕下，在點選這個按鈕的時候彈出合併的所有選項問題1:在我點選有下拉項的按鈕右側(三角符號部分)時才會彈出

點選連結彈出一個DIV層視窗

做裝置介紹頁面的時候，發現每個裝置點選檢視詳情都需要連結一個新的頁面，這樣比較影響網頁瀏覽的效率和舒適度，所以想用彈窗的形式在當前頁面展示詳情。彈出的視窗要固定在瀏覽器視窗的中間位置，我採用了fixed固定佈局。  <body style="backg

點選按鈕彈出類似IOS 底部 dialog

implementation 'com.baoyz.actionsheet:library:1.1.7' 然後設定按鈕點選監聽,,呼叫下列程式碼即可 ActionSheet.createBuilder(this, getSupportFragmentManager())

Vue2.x-01點選按鈕彈出子Vue元件，遍歷JSON展示資料

文章目錄概述實現過程 Step1: 父元件設定Button按鈕 Step2: 這裡使用了showHandlerFlag來控制子元件是否顯示，所裡需要在data中定義下這個變數 Step3: 引用宣告元件 Step4:

佈局中同時使用Toolbar和EditText時，點選鍵盤彈出時標題欄被拉伸

在Toolbar中新增 android:fitsSystemWindows="true" 這時，如果我們的layout中包含可滾動的控制元件如ListView、ScrollView（即在鍵盤彈出時會

Android Studio ListView的item點選事件彈出AlertDialog，和item的滑動

首先看看效果圖：點選彈出AlertDialog的確認框！（一）第一步，建立一個xml檔案顯示item的佈局 student_item.xml <?xml version="1.0" encoding="utf-8"?> <LinearLa

android開發入門點選按鈕彈出對話方塊

1、在layout中新增按鈕 2、在MainActivity中新增以下函式 public void showDialog(View view){ AlertDialog.Builder builder=new AlertDialog.Builder(this);

點選按鈕彈出模態框實現

點選按鈕彈出模態框的實現： html： <!DOCTYPE html> <html> <head> <meta charset="utf-8">

webview長按點選實現彈出選單欄

最近有一個需求，當長按點選webview，彈出選單欄，這是系統預設的有複製，全選，搜尋等功能，而不能滿足公司需求，同時公司需要將分享和搜尋功能去掉，新增自己的選單：新增自己的功能,自定義webview，複寫下邊兩個方法： @Override public ActionMo

Android定位&地圖&導航——基於百度地圖，實現自定義圖示繪製並點選時彈出泡泡

public class MainActivity extends Activity { private EditText txtAddr; // 定位相關 LocationClient mLocClient; LocationData locData = nul

【Unity 3D 5.6版本使用（3）】點選物體彈出視窗顯示狀態

emmm直接看程式碼 using System.Collections; using System.Collections.Generic; using UnityEngine; public class ShowWindow : MonoBehavio

2.1使用canvas畫個圓，每次點選畫布彈出提示框

<body><canvas id="canvas" width="500" height="500" style="border:dashed 1px"></canvas></body><script>var can

EditText點選事件——彈出單選框

目標點選Faculty彈出院系單選對話方塊，將選擇的內容顯示在EditText中 Faculty是一個Edittext控制元件。 1,設定EditText屬性使用以下兩句設定

jQuery點選圖片彈出放大特效下載

相關推薦