1.前言 CSS3的出现解决了很多让人头疼的问题,至少我想很多童鞋都这样认为.css3的cursor属性大家用的应该是非常的多的,我想用的比较多的像cursor:pointer;cursor:help;cursor:text;等等.很少人用到cursor:zoom-in/zoom-out;今天就来讲一下这两个属性值的用法. 2.简介 zoom-in/zoom-out 就是让元素的鼠标形状变成“放大镜”/“放小镜”的效果:如下图: 有了这个属性,我们就不用自己制作一个.cur的放大镜文件和.cur…

下载地址:cloud_zoom.rar 图片放大镜效果是一种不错的效果,多应用于电子商务.图片展示等网站,给用户带来更好的体验.实现这种效果的代码不少,今天要给大家介绍的是 Cloud Zoom,它是 jQuery 的一个插件.和其他产品相比,Cloud Zoom 具有代码少.功能多.兼容性好等特点,并且支持 Tint. Soft Focus 和 Inner 三种放大镜模式.在a标签中的rel属性设置不同的属性值,可以显示不同效果哦:1.默认模式:rel="adjustX: 10, adjust…

本文转载于http://blog.csdn.net/xinhaozheng/article/details/4085644, 这是一款非常不错的给图片添加放大镜效果,可以应用在诸如zen cart,magento电子商场之类的开源项目上.如果想看它的效果,你可以直接访问: http://www.mind-projects.it/projects/jqzoom/demos.php 觉得不错就下载一个玩玩吧,jQuery出来的插件都是非常容易使用的,也可以当做学习的示例. 如何安装: 先在网页中包含…

效果图: 无意间看到过去流行的一个效果:[能感知鼠标方向的图片遮罩效果]近来不忙,就仔细的看了一看看到后来发现,网上有好多版本,谁是原著者似乎已经无法考证.读码就要读比较全面的,读像是原著的代码.代码随然不难,不过要能想到这个创意,并成功应用却很难! 另外,对于初学者,这也是不错的学习例子.含Jquery插件写法,css3等 英文教程:http://tympanus.net/TipsTricks/DirectionAwareHoverEffect/源码下载:http://tympanus.net…

今天我们要为您展示如何基于 jQuery 和 CSS3 创建一个整洁的图片墙效果.我们的想法是在页面上洒上一些大小不同的缩略图,并在当我们点击图片时候显示丝带,会显示一些描述,再次点击缩略图时,丝带将关闭并重新打开一个更大的图像预览效果. 在线演示     下载源码 您可能感兴趣的相关文章 充满想象力的 JavaScript 物理和重力实验 精选9个值得学习的 HTML5 效果[附源码] 精选12个时尚的 CSS3 效果[附源码下载] 十分惊艳的8个 HTML5 & JavaScript 特效…

原文:CSS3 实现六边形Div图片展示效果 效果图: 实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden;  超出隐藏 3.>visibility: hidden;  也是隐藏,与display:none;相似,但不同的是,它虽然隐藏了,但依然会在网页中占有位置 我们要用到3层div进行旋转来得到这个效果(ps:3层div的大小是一样的). 最外层div(boxF)旋转120度.第二层(b…

今天要给大家介绍一款纯css3实现的机器人看书动画效果.整个画面完全由css3实现的绘制,没有使用任何图片元素.机器人的眼睛使用了动画元素.我们一起看下效果图: 在线预览   源码下载 实现的代码. html代码: <div class='szene'> <div class='image i1'> < HTML > <div class='nail'> </div> </div> <div class='image i2'&g…

Cloud Zoom是一个图像放大jQuery插件,效果堪比Magic Zoom.相对于流行jQZoom插件,Cloud Zoom体积小,有更多的功能和更强大的跨浏览器兼容性. 猛击这里查看演示DEMO 特点 兼容大多数浏览器,(已经测试通过的浏览器有:IE6+, Firefox, Chrome, Opera, Safari) 易于集成的基本有效的HTML. (精缩)脚本小,只有6Kb. 平滑变焦运动. 画廊模式. 着色,软聚焦和内变焦功能. 它是完全免费的. 使用方法 1.加载CSS: <li…

/* Cloud Zoom 10 Site License (CZ01-10). Version 3.1 rev 1312051822 */ (function(e) { function s(a) { var b = a.zoom, c = a.Q, g = a.R, k = a.e, f = a.g; this.data = a; this.U = this.b = null; this.za = 0; this.zoom = b; this.V = !0; this.r = this.in…

1.zoom:(缩放)…