jQuery图片旋转展示收缩效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery图片旋转展示收缩效果</title>
<style>
*{margin:0;padding:0;list-style-type:none;}
img{border:0;}
body{background:#F1F1F1;}
.comp{background:url(http://demo.lanrenzhijia.com/2015/pic0106/images/7.png) no-repeat center center;width:200px;height:200px;display:block;cursor:pointer;position:relative;margin:230px auto 0 auto;}
.comp ul.reset li{position:absolute;}
</style>
</head>
<body>
<!--代码部分begin-->
<div class="comp">
<ul class="reset" style="display: block; z-index: 50; opacity:0;">
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/2.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/3.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/4.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/5.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/6.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/7.png" alt="懒人之家" /></a></li>
<li><a href="http://www.lanrenzhijia.com/"><img src="http://demo.lanrenzhijia.com/2015/pic0106/images/8.png" alt="懒人之家" /></a></li>
</ul>
</div>
<script src="http://www.lanrenzhijia.com/ajaxjs/jquery-1.7.2.min.js"></script>
<script src="http://www.lanrenzhijia.com/ajaxjs/mobilyblocks.js"></script>
<script>
$(function(){
$('.comp').mobilyblocks({
trigger:'click',
direction:'counter',
duration:500,
zIndex:50,
widthMultiplier:1.1
});
});
</script>
<!--代码部分end-->
</body>
</html>
jQuery图片旋转展示收缩效果的更多相关文章
- jQuery图片组展示插件----Galleria使用简介
1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...
- jquery图片懒加载效果
1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...
- jquery图片3D旋绕效果 rotate3Di的操作
这是一个图片效果,很简单实用,只需要一个"rotate3Di.js"的插件就行, 关于rotate的用法有如下几种: $(选择器).rotate3Di(30); //把图片3D旋转 ...
- JQuery图片轮播滚动效果(网页效果--每日一更)
今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...
- jquery+css实现菜单收缩效果并适应多种浏览器与移动平台
效果 出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease ...
- 纯css3图片旋转展示
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- jQuery 3D旋转展示焦点图
在线演示 本地下载
- Elastislide - 响应式的图片循环展示效果
Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...
- JS框架_(coolShow.js)图片旋转动画特效
百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...
随机推荐
- OAF_开发系列29_实现OAF中批次处理迭代器RowSet/RowSetIterator（案例）
20150814 Created By BaoXinjian
- dubbo简单demo
zookeeper,可以集群,可以只安装一台 依赖dubbo jar, zkclient等 发布服务 <?xml version="1.0" encoding=" ...
- 禁用Windows窗体的关闭按钮
1. protected override void OnFormClosing(FormClosingEventArgs e) { e.Cancel = true; base.OnFormClosi ...
- Linux系统的压缩技术
1.常见的压缩文件扩展名 *.Z ---> compress程序压缩的文件. *.gz --->gzip 程序压缩的文件: *.bz2------>bzip2程序压缩的文件: *.t ...
- C#封装好的Win32API
Kernel.cs using System; using System.Runtime.InteropServices; using System.Text; using HANDLE = Syst ...
- Maven如何传递系统属性变量到TestNG
本文介绍如何传递Maven pom.xml里的系统属性参数到TestNG,文章沿用笔者一贯的风格--例子驱动. 解决什么问题 1. 用过WebDriver的都知道,当你启动Chrome或IE的时候都需 ...
- （转）Java：按值传递和按引用传递详细解说
值传递和引用传递详解: 1:按值传递是什么 指的是在方法调用时,传递的参数是按值的拷贝传递.示例如下: public class TempTest { private void test1(int a ...
- java ==与equal
java中的数据类型,可分为两类: 1.基本数据类型,也称原始数据类型.byte,short,char,int,long,float,double,boolean 他们之间的比较,应用双等号(== ...
- cs端调用Ajax
private static string Descoder() { //ajax地址 string MealFilePath = "http://***/user/SetWebsite.a ...
- [转载]SVN-主干/分支
一个大项目在开发中可能会拆分成几个小项目,分别分去,同时共通的部分再由人做,做完后再统一合并.同时,在开发中,共通的部分修改后,其它人要保持同步. 这种情况反应到SVN的分支/合并功能上,再贴切不过了 ...