css3

css3

CSS-禁用a标签点击事件

博客maomao 发表了文章 • 0 个评论 • 996 次浏览 • 2018-09-17 22:17 • 来自相关话题

CSS-禁用a标签点击事件:   .ias_trigger a{display:block;pointer-events: none;}pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的 ...查看全部
CSS-禁用a标签点击事件:
 
.ias_trigger a{display:block;pointer-events: none;}
pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
其它属性值为SVG专用,这里不再多介绍了。

maomao 发表了文章 • %s 个评论 • %s 次浏览 • • 来自相关话题

html5 css3设置网页不让别人复制粘贴的方法

博客gallon 发表了文章 • 0 个评论 • 840 次浏览 • 2018-05-14 08:01 • 来自相关话题

html5 css3设置网页不让别人复制粘贴的方法:   只需要在你的CSS文件里加入以下代码即可:-webkit-touch-callout:none; -webkit-text-size-adjust:none; ...查看全部
html5 css3设置网页不让别人复制粘贴的方法:
 
只需要在你的CSS文件里加入以下代码即可:
-webkit-touch-callout:none;
-webkit-text-size-adjust:none;
-webkit-user-select:none;

 

jQuery/CSS3带数字时钟的圆盘时钟DEMO演示

源码taotao 发表了文章 • 0 个评论 • 1758 次浏览 • 2016-11-03 16:38 • 来自相关话题

今天要介绍的这款时钟插件是数字时钟和圆盘时钟的混合,也就是在圆盘时钟上嵌入了一个数字时钟,更加美观和实用。 代码如下: <!DOCTYPE html&g ...查看全部
今天要介绍的这款时钟插件是数字时钟和圆盘时钟的混合,也就是在圆盘时钟上嵌入了一个数字时钟,更加美观和实用。

jquery_css3_html5.png

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery/CSS3带数字时钟的圆盘时钟DEMO演示</title>
</head>
<style>
body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;}
.box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:30px auto; border-radius: 50%;
box-shadow: 0px 0px 20px 3px #444 inset; position: relative;}
/*原点*/
.origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;}
/* 指针 */
.clock_line{ position: absolute;position:absolute;z-index:20;}
.hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px;
transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;}
.minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000;
transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;}
.second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60;
transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;}

.dot_box{width: inherit; height: inherit;}
/*时钟数*/
.dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;}
.clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7;
position:absolute;top:199px;left:200px;}
.scale-show{ width:12px;height:2px;background-color:#555;float:left;}
.scale-hidden{width:183px;height:2px;float:left;}
/*日期*/
.date_info{width:160px;height:28px;
line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555;
font-weight:bold;}
.time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; }
.time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;}
#minute_time{border-left:1px solid #fff;border-right:1px solid #fff;}
</style>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="box" id="clock">
<!-- 原点 -->
<div class="origin"></div>
<!-- 时钟数 -->
<div class="dot_box">
<div class="dot">6</div>
<div class="dot">5</div>
<div class="dot">4</div>
<div class="dot">3</div>
<div class="dot">2</div>
<div class="dot">1</div>
<div class="dot">12</div>
<div class="dot">11</div>
<div class="dot">10</div>
<div class="dot">9</div>
<div class="dot">8</div>
<div class="dot">7</div>
</div>
<!-- 时、分、秒针 -->
<div class="clock_line hour_line" id="hour_line"></div>
<div class="clock_line minute_line" id="minute_line"></div>
<div class="clock_line second_line" id="second_line"></div>
<!-- 日期 -->
<div class="date_info" id="date_info"></div>
<!-- 时间 -->
<div class="time_info" >
<div class="time" id="hour_time"></div>
<div class="time" id="minute_time"></div>
<div class="time" id="second_time"></div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function(){
var clock = document.getElementById("clock");
function initNumXY(){
// 1、12个数字的位置设置
var radius = 160;//大圆半价
var dot_num = 360/$(".dot").length;//每个div对应的弧度数
//每一个dot对应的弧度;
var ahd = dot_num*Math.PI/180;
$(".dot").each(function(index, el) {
$(this).css({
"left":180+Math.sin((ahd*index))*radius,
"top":180+Math.cos((ahd*index))*radius
});
});
// 2、刻钟设置
for(var i = 0; i < 60; i++) {
clock.innerHTML += "<div class='clock-scale'> " +
"<div class='scale-hidden'></div>" +
"<div class='scale-show'></div>" +
"</div>";
}
var scale = document.getElementsByClassName("clock-scale");
for(var i = 0; i < scale.length; i++) {
scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
}
}
initNumXY();//调用上面的函数
//获取时钟id
var hour_line = document.getElementById("hour_line"),
minute_line = document.getElementById("minute_line"),
second_line = document.getElementById("second_line"),
date_info=document.getElementById("date_info"),//获取date_info
hour_time = document.getElementById("hour_time"),// 获去时间id
minute_time = document.getElementById("minute_time"),
second_time = document.getElementById("second_time");
//3、设置动态时间
function setTime(){
var nowdate = new Date();
//获取年月日时分秒
var year = nowdate.getFullYear(),
month = nowdate.getMonth()+1,
day = nowdate.getDay(),
hours = nowdate.getHours(),
minutes = nowdate.getMinutes(),
seconds = nowdate.getSeconds(),
date = nowdate.getDate();
var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 获取日期id
date_info.innerHTML=year+"年"+month+"月"+day+"日 "+weekday[day];
hour_time.innerHTML = hours >=10 ? hours : "0"+hours;
minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes;
second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;
console.log(year+"年"+month+"月"+day+"日 "+weekday[day]);
//时分秒针设置
var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';
second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';
}
// setTime();
setInterval(setTime, 1000);


});
</script>

</body>
</html>

CSS-禁用a标签点击事件

博客maomao 发表了文章 • 0 个评论 • 996 次浏览 • 2018-09-17 22:17 • 来自相关话题

CSS-禁用a标签点击事件:   .ias_trigger a{display:block;pointer-events: none;}pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的 ...查看全部
CSS-禁用a标签点击事件:
 
.ias_trigger a{display:block;pointer-events: none;}
pointer-events属性有很多值,但是对于浏览器来说,只有auto和non两个值可用,其它的几个是针对SVG的(本身这个属性就来自于SVG技术)。

pointer-events属性值详解
auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
其它属性值为SVG专用,这里不再多介绍了。

maomao 发表了文章 • %s 个评论 • %s 次浏览 • • 来自相关话题

html5 css3设置网页不让别人复制粘贴的方法

博客gallon 发表了文章 • 0 个评论 • 840 次浏览 • 2018-05-14 08:01 • 来自相关话题

html5 css3设置网页不让别人复制粘贴的方法:   只需要在你的CSS文件里加入以下代码即可:-webkit-touch-callout:none; -webkit-text-size-adjust:none; ...查看全部
html5 css3设置网页不让别人复制粘贴的方法:
 
只需要在你的CSS文件里加入以下代码即可:
-webkit-touch-callout:none;
-webkit-text-size-adjust:none;
-webkit-user-select:none;

 

jQuery/CSS3带数字时钟的圆盘时钟DEMO演示

源码taotao 发表了文章 • 0 个评论 • 1758 次浏览 • 2016-11-03 16:38 • 来自相关话题

今天要介绍的这款时钟插件是数字时钟和圆盘时钟的混合,也就是在圆盘时钟上嵌入了一个数字时钟,更加美观和实用。 代码如下: <!DOCTYPE html&g ...查看全部
今天要介绍的这款时钟插件是数字时钟和圆盘时钟的混合,也就是在圆盘时钟上嵌入了一个数字时钟,更加美观和实用。

jquery_css3_html5.png

代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>jQuery/CSS3带数字时钟的圆盘时钟DEMO演示</title>
</head>
<style>
body,div,p{ font-family: 'Microsoft Yahei' ;font-size: 14px;}
.box{ width: 400px; height: 400px; border:10px solid #8bf2f1;margin:30px auto; border-radius: 50%;
box-shadow: 0px 0px 20px 3px #444 inset; position: relative;}
/*原点*/
.origin{ width: 20px; height: 20px; border-radius: 50%; background: #ff0000; top:190px; left: 190px; position: absolute;}
/* 指针 */
.clock_line{ position: absolute;position:absolute;z-index:20;}
.hour_line{width:100px;height:4px;top:198px;left:200px;background-color:#000;border-radius:2px;
transform-origin:0 50%;box-shadow:1px -3px 8px 3px #aaa;}
.minute_line{width:130px;height:2px;top:199px;left:190px;background-color:#000;
transform-origin:7.692% 50%;box-shadow:1px -3px 8px 1px #aaa;}
.second_line{width:170px;height:1px;top:199.5px;left:180px;background-color:#f60;
transform-origin:11.765% 50%;box-shadow:1px -3px 7px 1px #bbb;}

.dot_box{width: inherit; height: inherit;}
/*时钟数*/
.dot{ width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 22px; position: absolute;}
.clock-scale{width:195px;height:2px;transform-origin:0% 50%;z-index:7;
position:absolute;top:199px;left:200px;}
.scale-show{ width:12px;height:2px;background-color:#555;float:left;}
.scale-hidden{width:183px;height:2px;float:left;}
/*日期*/
.date_info{width:160px;height:28px;
line-height:28px;text-align:center;position:absolute;top:230px;left:120px;z-index:11;color:#555;
font-weight:bold;}
.time_info{ width: 110px; height: 35px; line-height: 35px;text-align:center;position:absolute;top:270px;left:150px;z-index:11;color:#555; background: #253e3e; }
.time{ width: 35px ;height:35px; float: left; color: #fff; font-size: 22px;}
#minute_time{border-left:1px solid #fff;border-right:1px solid #fff;}
</style>
<body>
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="box" id="clock">
<!-- 原点 -->
<div class="origin"></div>
<!-- 时钟数 -->
<div class="dot_box">
<div class="dot">6</div>
<div class="dot">5</div>
<div class="dot">4</div>
<div class="dot">3</div>
<div class="dot">2</div>
<div class="dot">1</div>
<div class="dot">12</div>
<div class="dot">11</div>
<div class="dot">10</div>
<div class="dot">9</div>
<div class="dot">8</div>
<div class="dot">7</div>
</div>
<!-- 时、分、秒针 -->
<div class="clock_line hour_line" id="hour_line"></div>
<div class="clock_line minute_line" id="minute_line"></div>
<div class="clock_line second_line" id="second_line"></div>
<!-- 日期 -->
<div class="date_info" id="date_info"></div>
<!-- 时间 -->
<div class="time_info" >
<div class="time" id="hour_time"></div>
<div class="time" id="minute_time"></div>
<div class="time" id="second_time"></div>
</div>
</div>

<script src="js/jquery.min.js"></script>
<script>
$(function(){
var clock = document.getElementById("clock");
function initNumXY(){
// 1、12个数字的位置设置
var radius = 160;//大圆半价
var dot_num = 360/$(".dot").length;//每个div对应的弧度数
//每一个dot对应的弧度;
var ahd = dot_num*Math.PI/180;
$(".dot").each(function(index, el) {
$(this).css({
"left":180+Math.sin((ahd*index))*radius,
"top":180+Math.cos((ahd*index))*radius
});
});
// 2、刻钟设置
for(var i = 0; i < 60; i++) {
clock.innerHTML += "<div class='clock-scale'> " +
"<div class='scale-hidden'></div>" +
"<div class='scale-show'></div>" +
"</div>";
}
var scale = document.getElementsByClassName("clock-scale");
for(var i = 0; i < scale.length; i++) {
scale[i].style.transform="rotate(" + (i * 6 - 90) + "deg)";
}
}
initNumXY();//调用上面的函数
//获取时钟id
var hour_line = document.getElementById("hour_line"),
minute_line = document.getElementById("minute_line"),
second_line = document.getElementById("second_line"),
date_info=document.getElementById("date_info"),//获取date_info
hour_time = document.getElementById("hour_time"),// 获去时间id
minute_time = document.getElementById("minute_time"),
second_time = document.getElementById("second_time");
//3、设置动态时间
function setTime(){
var nowdate = new Date();
//获取年月日时分秒
var year = nowdate.getFullYear(),
month = nowdate.getMonth()+1,
day = nowdate.getDay(),
hours = nowdate.getHours(),
minutes = nowdate.getMinutes(),
seconds = nowdate.getSeconds(),
date = nowdate.getDate();
var weekday =["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
// 获取日期id
date_info.innerHTML=year+"年"+month+"月"+day+"日 "+weekday[day];
hour_time.innerHTML = hours >=10 ? hours : "0"+hours;
minute_time.innerHTML = minutes >=10 ? minutes : "0"+minutes;
second_time.innerHTML = seconds >=10 ? seconds : "0"+seconds;
console.log(year+"年"+month+"月"+day+"日 "+weekday[day]);
//时分秒针设置
var hour_rotate = (hours*30-90) + (Math.floor(minutes / 12) * 6);
hour_line.style.transform = 'rotate(' + hour_rotate + 'deg)';
minute_line.style.transform = 'rotate(' + (minutes*6 - 90) + 'deg)';
second_line.style.transform = 'rotate(' + (seconds*6 - 90)+'deg)';
}
// setTime();
setInterval(setTime, 1000);


});
</script>

</body>
</html>