<!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图片旋转展示收缩效果的更多相关文章

  1. jQuery图片组展示插件----Galleria使用简介

    1.技术目标 掌握Galleria插件的基本操作 2.Galleria简介 Galleria是一个jQuery插件,可用于展示多张图片,操作也比较简单, 展示效果也非常不错,如图: 提示:Galler ...

  2. jquery图片懒加载效果

    1.要引入jquery 2.要引入underscore.js <!DOCTYPE html> <html lang="en"> <head> & ...

  3. jquery图片3D旋绕效果 rotate3Di的操作

    这是一个图片效果,很简单实用,只需要一个"rotate3Di.js"的插件就行, 关于rotate的用法有如下几种: $(选择器).rotate3Di(30); //把图片3D旋转 ...

  4. JQuery图片轮播滚动效果(网页效果--每日一更)

    今天,带来的是一个图片的轮播滚动效果! 先来看一下效果展示:亲,请点击这里 原理很简单,设置一个定时器,使图片列表在每隔一段时间后滚动一次.而循环效果,就是在每一滚动的时候,将第一张图片放到最后一张的 ...

  5. jquery+css实现菜单收缩效果并适应多种浏览器与移动平台

    效果 出现 css部分 .content-wrapper{ -webkit-transition: -webkit-transform .3s ease-in-out, margin .3s ease ...

  6. 纯css3图片旋转展示

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  7. jQuery 3D旋转展示焦点图

    在线演示 本地下载

  8. Elastislide - 响应式的图片循环展示效果

    Elastislide 是一款非常优秀的响应式 jQuery 图片循环展示(旋转木马)插件,集成了 Touchwipe 插件以支持触屏设备.提供了四种效果:水平图片传送带.垂直图片传送带.固定在屏幕底 ...

  9. JS框架_(coolShow.js)图片旋转动画特效

    百度云盘 传送门 密码:ble6 coolShow.js插件图片旋转动画效果 <!DOCTYPE HTML> <head> <meta http-equiv=" ...

随机推荐

  1. 【解决】SharePoint Foundation 2013 未显示搜索框

    在正确安装 SharePoint Foundation 2013 后会发现页面中缺少搜索框. 经查询网页了解到这是一个Bug,而且在 SP1 中也没有修复,所以即便是安装了 SP1 补丁的系统也需要下 ...

  2. JavaScript 命名规则

    来源 :http://www.codelifter.com/main/tips/tip_020.shtml The following are the rules for naming JavaScr ...

  3. Jmeter分布式测试

    随着并发量的增大,一台机器就不能满足需求了,所以我们采用分布式(Master-Slaver)的方案去执行高并发的测试 注意事项: Master机器一般我们不执测试,所以可以拿一台配置差些的机器,主要用 ...

  4. SqlServer实现先将所有数据排好序再进行分页

    平时,我们对数据进行分页,然后将分页后的数据再进行排序输出.这样做只是针对每次请求,也就是前TOP个数据进行了排序,并不是将数据库中的所有的数据进行了排序.当我们需要将数据库中的所有数据排序后在进行分 ...

  5. 从 A/Looper: Could not create epoll instance. errno=24 错误浅谈解决各种 bug 的思路

    今天代码写着写着就莫名闪退了,手机也没有“程序停止运行”的提示,logcat也没有看到蓝色的调用栈log,这样的闪退最是蛋疼了,还好必现.复现几次之后,终于从logcat中看到了一行可疑的log: A ...

  6. Oracle:分割字符串 取TOP N条记录

    oracle数据库,表数据如下: ids                           id 3,4,5                        7 13,14,15,16         ...

  7. jQuery判断键盘按下的keyCode

    $("div").keydown(function(event) { var keyCode = event.keyCode; //根据keycode判断按下的是哪个键 });

  8. SSH Tunneling

    把本地端口 local_port 转发到服务器 server2 的 remote_port 端口上, server1 和 server2可以是同一ip或者不同ip. ssh user@server1 ...

  9. Life cycle of plist in Lockdown changes dramatically in iOS 10

    We could take advantage of plist to bypass Trust Relationship so as to extract data from a iDevice. ...

  10. java程序员需要掌握些什么知识

    java程序员需要掌握些什么知识 合格的程序员应具有实际开发能力的Java和J2EE.如今的IT企业需求量大,但人才紧缺的.企业需要大量掌握Java/JEE/Oracle/WebLogic/Websp ...