jQuery图片旋转展示收缩效果
2024-10-12 00:12:32
<!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>
最新文章
- hibernate中数据库方言
- oracl 创建用户
- Java基础之读文件——从文件中读取文本（ReadAString）
- maven src/test/resources 下的logback-test.xml 读取 properties文件中的key-value值
- statusBarOrientation设备状态
- Node.js 使用gm处理图像
- Charles抓取https请求详解
- Java synchronized 线程同步
- build tool 的简单认知
- sqlserver 无法获得数据库独占权
- mac 下安装ES 与 Head插件 以及安装Kibana
- dubbo 搭建以及使用笔记
- [ERROR] Failed to execute goal org.mybatis.generator:mybatis-generator-maven-plugin:1.3.2:generate (default-cli) on project SSMMavenPro: configfile D:\java\PermissionPro\src\main\resources\generatorCo
- 在notepad++里面使用正则表达式替换掉所有行逗号前面内容
- 12.2 linux下的线程
- HeyWeGo小组团队项目管理
- C# Winform WPF DeskBand 窗体嵌入任务栏，在任务栏显示文字
- SQL Server 数据库空间使用情况
- python3【基础】-集合
- 在Linux下安装JDK环境