当前位置：网站首页免费源码 html5 css3 正文

html5点击图片弹出详细信息特效

时间：2020-06-07 [html5 css3]作者：adminjie 浏览：205 次

html5点击图片弹出详细信息特效

特效描述：html5 点击图片弹出详细信息，html5图片弹出层

list-style: none; font-family: 微软雅黑, 宋体, "Helvetica Neue", Arial, Helvetica, sans-serif; font-weight: 500; line-height: 1.1; color: rgb(100, 100, 100); font-size: 24px; border-bottom: 1px solid rgb(235, 235, 235); background-color: rgb(255, 255, 255);">代码结构

1. 引入CSS

number1 index0 alt2" class="page_speeder_84060915">1

<link rel=string" class="page_speeder_1188698939">"stylesheet" href="css/reset.css">

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/modernizr.js"></script>

<script src="js/jquery-2.1.1.js"></script>

<script src="js/velocity.min.js"></script>

<script src="js/main.js"></script>

3. HTML代码

<ul class="cd-items cd-container">          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->          <li class="cd-item">              <img src="img/item-1.jpg" alt="Item Preview">              <a href="#0" class="cd-trigger">陈意涵</a>          </li> <!-- cd-item -->      </ul> <!-- cd-items -->      <div class="cd-quick-view">          <div class="cd-slider-wrapper">              <ul class="cd-slider">                  <li class="selected"><img src="img/item-1.jpg" alt="Product 1"></li>                  <li><img src="img/item-2.jpg" alt="Product 2"></li>                  <li><img src="img/item-3.jpg" alt="Product 3"></li>              </ul> <!-- cd-slider -->              <ul class="cd-slider-navigation">                  <li><a class="cd-next" href="#0">Prev</a></li>                  <li><a class="cd-prev" href="#0">Next</a></li>              </ul> <!-- cd-slider-navigation -->          </div> <!-- cd-slider-wrapper -->          <div class="cd-item-info">              <h2>意涵</h2>              <p>1982年11月12日陈意涵出生于台湾新北市土城区，2002年参加《我猜我猜我猜猜猜》中“漫画美少女”选拔单元。[10]  2006年大学毕业后在餐厅打零工被星探发掘正式进入演艺圈。[11] </p>          </div> <!-- cd-item-info -->          <a href="#0" class="cd-close">Close</a>      </div> <!-- cd-quick-view -->  <script src="js/main.js"></script> <!-- Resource jQuery -->

html5点击图片弹出详细信息特效

点击下载

html5点击图片弹出详细信息特效

大小 : 629 KB | 下载量 : 0 | 文件类型 : 压缩文件

转载请注明来源：html5点击图片弹出详细信息特效

本文永久链接地址：https://www.adminjie.com/post/2763.html

免责声明：
本站所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，购买注册，得到更好的正版服务。

附：
二○○二年一月一日《计算机软件保护条例》第十七条规定：为了学习和研究软件内含的设计思想和原理，通过安装、显示、传输或者存储软件等方式使用软件的，可以不经软件著作权人许可，不向其支付报酬！鉴于此，也希望大家按此说明研究软件！

版权声明：
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享，着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源，请于下载后的24小时内删除。如需体验更多乐趣，还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的，若有侵犯你的权益请：点此维权站长会进行审查之后，情况属实的会在三个工作日内为您删除。

更多精彩内容

最新文章

紫色店铺商家信息后台管理模板

紫色店铺商家信息后台管理模板紫色店铺商家信息后台管理模板基于Bootstrap2.3.2制作，DIV+CSS布局，全套模板，包括登录、模块设置、样式模板设置、文...
蓝色企业CMS网站后台管理模板

蓝色企业CMS网站后台管理模板蓝色企业CMS响应式后台管理模板基于Bootstrap3.0.0制作，自适应分辨率，兼容PC端和移动端，全套模板，包括产品管理、资...
简洁商城系统后台管理模板

简洁商城系统后台管理模板简洁商城系统后台管理模板，简单，大气，全套模板，包括登录、旅游管理、系统管理、信息管理等后台模板页面。...
公司网站发展时间轴特效

公司网站发展时间轴特效一款简洁、美观的公司网站发展时间轴特效。...
原生js日历控件年月日时间选择器代码

原生js日历控件年月日时间选择器代码特效描述：原生js日历控件年月日时间选择器，代码结构1.引入JS1<scriptsrc="laydat...

热门文章

html5 canvas酷炫的粒子波浪动画特效

html5canvas酷炫的粒子波浪动画特效特效描述：html5canvas酷炫的粒子波浪动画特效，html5基于canvas绘制酷炫的3D波浪动画。代码...
js随机照片墙布局特效

原生jscss3制作随机生成的相册图片墙布局预览，点击可实现照片的旋转放大缩放居中等特效...
H5酷炫的时光隧道动画特效

H5酷炫的时光隧道动画特效...
利用jQuery实现情人节表白放烟花特效

利用jQuery实现情人节表白放烟花特效特效描述：利用jQuery实现情人节表白放烟花特效，利用jQuery实现情人节表白放烟花特效代码结构1.引入JS1...
简洁商城系统后台管理模板

简洁商城系统后台管理模板简洁商城系统后台管理模板，简单，大气，全套模板，包括登录、旅游管理、系统管理、信息管理等后台模板页面。...