css大图切割,利用CSS切割图片技术来动态显示图片

利用CSS切割图片来切换图片

.img2

{

position:absolute;

clip:rect(0px 20px 20px 0px);

}

.img1

{

position:absolute;

clip:rect(0px 60px 60px 20px);

left:-11px

}

function switchimgcss(obj)

{

//document.getElementById("img_css").className

//document.getElementById("img_css").className="img1"

if (obj.className=="img1")

{

obj.className=""; //该语句不能省略

obj.className="img2";

}

else{

obj.className="";

obj.className="img1";

}

clip 属性用于剪切图片：

css通过控制显示图片的位置来实现图片的剪切

clip:rect(y1 y1 x2 x1)吧

y1=定位的y坐标(垂直方向)的起点

x1=定位的x坐标(水平方向)的起点

y2=定位的y坐标(垂直方向)的终点

x2=定位的x坐标(水平方向)的终点

注:坐标的起点是在左上角

原文：http://3365169.blog.51cto.com/3355169/1435048

css大图切割,利用CSS切割图片技术来动态显示图片相关推荐

html实现图片切割,利用CSS切割图片技术来动态显示图片
利用CSS切割图片来切换图片 .img2 { position:absolute; clip:rect(0px 20px 20px 0px); } .img1 { position:absolute; ...
html与css编程证书,利用CSS布局做一个简单的荣誉证书（代码示例）
本篇文章将给大家介绍如何使用css布局制作一个简单的荣誉证书,有趣且实用,希望对需要的朋友有所帮助! 那么利用css布局实现简单荣誉证书样式的效果是非常简单的,主要用到以下几个基础属性: backgr ...
用html和css画太极图,利用css画一个太极图(阴阳八卦)实例
这篇文章介绍利用css画一个太极图(阴阳八卦)实例 #yin-yang { width: 96px; height: 48px; background: #eee; border-color: red ...
css 隐藏光标,利用css隐藏input的光标方法
如何在不影响操作的情况下,把input的光标隐藏了?在网上搜索了很多方式:用p模拟,设置readonly,设置disabled,设置自动blur等等方式,发现都不能满足需求,于是最后终于找到了一种完美 ...
对话框中显示jpg，bmp图片和对话框动态显示图片
1.添加一个Picture Control,关联变量为 m_picture,定义一个全局变量CString m_path. 2.添加一个打开jpg图片的按钮,并添加按钮事件:void ...Dlg:: ...
css初始化_利用CSS变量实现炫酷的悬浮效果
这个动画是将鼠标移动到订阅按钮上移动光标会显示相应的彩色渐变.这个想法很简单,但是它能使这个按钮脱颖而出,人们一下子就注意到它了,增加了点击的概率. 怎样才能达到这个效果,使我们的网站脱颖而出呢?其实 ...
fullpage.js 滑入滑出滚屏动画, 纯css方式。利用css权重,无需js操作dom
**完整案例在下方** 1.分析如下图所示, 一共8屏, 当前在第2屏上,fullpage.js 会在当前可视屏的最外层div上,插入一个active的class,根据框架添加外层的active动态 ...
表格样式css制作html5,利用css实现的表格样式展示
本文为大家展示了几款美观的表格样式,希望大家可以喜欢. 1.单像素边框CSS表格 table.gridtable { font-family: verdana,arial,sans-serif; fo ...
css如何将图片调成合适大小,如何利用CSS自动调整图片的大小
经常更换wordpress主题,会有一个困扰,就是之前主题的内容区域宽度比较大,很多正文图片的尺寸可能是500px,而换了一个主题,内容区域的宽度比较小,假设是400px, 这时原先的图片宽度都是50 ...

css大图切割,利用CSS切割图片技术来动态显示图片

css大图切割,利用CSS切割图片技术来动态显示图片相关推荐

最新文章

热门文章